/* base-desktop */
.elementor .e-div-block-base{min-width:30px;padding:10px;display:block;}.elementor .e-flexbox-base{padding:10px;display:flex;flex-direction:row;}.elementor .e-grid-base{column-gap:20px;padding:10px;display:grid;row-gap:20px;grid-template-columns:repeat(3, 1fr);grid-template-rows:repeat(2, 1fr);}.elementor .e-tabs-base{padding-block-start:0px;display:flex;flex-direction:column;gap:30px;}.elementor .e-tabs-menu-base{display:flex;justify-content:center;}.elementor .e-tab-base{width:160px;color:#0C0D0E;cursor:pointer;padding:8px;border-width:2px;border-color:#E0E0E0;border-style:solid;background-color:#FFFFFF;display:block;}.elementor .e-tab-base.e--selected{border-color:#0C0D0E;outline-width:0px;}.elementor .e-tab-base:focus{border-color:#0C0D0E;outline-width:0px;}.elementor .e-tab-base:hover,.elementor .e-tab-base:focus-visible{background-color:#E0E0E0;}.elementor .e-tabs-content-area-base{display:block;}.elementor .e-tab-content-base{min-width:30px;padding:10px;display:block;}.elementor .e-accordion-base{padding:0px;display:flex;flex-direction:column;}.elementor .e-accordion-item-base{padding:0px;display:block;}.elementor .e-accordion-item-header-base{cursor:pointer;padding:10px;display:flex;gap:8px;justify-content:space-between;align-items:center;}.elementor .e-accordion-item-title-base{padding:0px;}.elementor .e-accordion-item-icon-base{width:200px;height:20px;padding:0px;display:inline-flex;flex:0 0 auto;justify-content:flex-end;align-items:center;}.elementor .e-accordion-item-content-base{min-width:30px;padding:10px;display:block;}.elementor .e-background-video-base{width:100%;overflow:hidden;position:relative;padding:10px;display:flex;flex-direction:column;}.elementor .e-background-video-content-base{width:100%;position:relative;z-index:1;padding:0px;display:flex;flex-direction:column;flex:1 1 auto;}.elementor .e-background-video-controls-base{width:auto;position:absolute;inset-inline-end:20px;inset-block-end:20px;z-index:2;display:flex;gap:8px;}.elementor .e-background-video-play-base{cursor:pointer;padding:8px;border-style:none;background-color:transparent;display:inline-flex;justify-content:center;align-items:center;}.elementor .e-background-video-pause-base{cursor:pointer;padding:8px;border-style:none;background-color:transparent;display:inline-flex;justify-content:center;align-items:center;}.elementor .e-form-base{padding:20px;display:flex;flex-direction:row;gap:10px;flex-wrap:wrap;align-content:start;align-items:flex-start;}.elementor .e-form-base .e-form-checkbox-row{padding:0px;gap:8px;align-items:center;}.elementor .e-form-success-message-base{font-size:12px;color:#2F532E;text-align:center;padding:12px;background-color:#D4E9D6;display:none;}.elementor .e-form-error-message-base{font-size:12px;color:#870000;text-align:center;padding:12px;background-color:#ffdede;display:none;}.elementor .e-collection-loop-base{display:block;}.elementor .e-collection-loop-layout-base{display:grid;gap:20px;grid-template-columns:repeat(3, 1fr);grid-auto-rows:1fr;}.elementor .e-pagination-base{padding-block-start:8px;padding-block-end:8px;padding-inline-start:8px;padding-inline-end:8px;margin-block-start:8px;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-start;align-items:center;}.elementor .e-pagination-prev-base{font-size:14px;color:#1F2937;text-align:center;text-decoration:none;padding-block-start:8px;padding-block-end:8px;padding-inline-start:12px;padding-inline-end:12px;border-radius:4px;border-width:1px;border-color:#E5E7EB;border-style:solid;display:inline-flex;gap:8px;align-items:center;}.elementor .e-pagination-next-base{font-size:14px;color:#1F2937;text-align:center;text-decoration:none;padding-block-start:8px;padding-block-end:8px;padding-inline-start:12px;padding-inline-end:12px;border-radius:4px;border-width:1px;border-color:#E5E7EB;border-style:solid;display:inline-flex;gap:8px;align-items:center;}.elementor .e-collection-loop-empty-state-base{display:flex;justify-content:center;}
/* base-mobile */
@media (max-width:767px) {
@media(max-width:767px){.elementor .e-grid-base{grid-template-columns:repeat(1, 1fr);}}
}
/* elementor-post-166503 */
.elementor-166503 .elementor-element.elementor-element-e8478d3{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-166503 .elementor-element.elementor-element-5bf512b{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-166503 .elementor-element.elementor-element-1090037{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-166503 .elementor-element.elementor-element-bdd9ae1{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-166503 .elementor-element.elementor-element-70b918a{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-166503 .elementor-element.elementor-element-faf82ae{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-166503 .elementor-element.elementor-element-da157a8{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-166503 .elementor-element.elementor-element-3b1215c{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-166503 .elementor-element.elementor-element-874d84c{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-166503 .elementor-element.elementor-element-dd00d06{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}
/* ght-appealhead */
/* GHH Appeal: Title — breadcrumb, category, the appeal's name, short description. */
.ght.aph { padding: clamp(28px, 3.6vw, 52px) 0 clamp(24px, 3vw, 40px); }
.ght .aph__crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 22px; font-size: 14px; font-weight: 600; color: var(--ght-mute); }
.ght .aph__crumbs a { text-decoration: none; }
/* a fundraiser page, to whoever may edit it: back to their pages, and Edit */
.ght .aph__owner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 20px; padding: 10px 10px 10px 16px; border: 1px solid var(--ght-line); border-radius: var(--ght-r-m); background: #fff; }
.ght .aph__ownback { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ght-ink-2); text-decoration: none; }
.ght .aph__ownback:hover { color: var(--ght-blue-d); }
.ght .aph__owner svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ght .aph__edit { gap: 8px; }
.ght .aph__crumbs a:hover { color: var(--ght-blue-d); }
.ght .aph__crumbs span { opacity: .5; }
.ght .aph__cat { margin-bottom: 10px; font-size: 15px; font-weight: 700; color: var(--ght-blue-d); }
.ght .aph__h { max-width: 20ch; margin: 0; font-size: clamp(38px, 5vw, 76px); font-weight: 900; line-height: .98; letter-spacing: -.04em; color: var(--ght-ink); text-wrap: balance; }
.ght .aph__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 40px; }
.ght .aph__share { position: relative; display: flex; align-items: center; gap: 6px; }
.ght .aph__sharet { margin-right: 6px; font-size: 14px; font-weight: 700; color: var(--ght-mute); }
/* desktop: the share block at the far right of the row, "Share this appeal" above the icons (user) */
@media (min-width: 761px) {
	.ght .aph__row { flex-wrap: nowrap; }
	.ght .aph__share { flex: none; margin-left: auto; }
	.ght .aph__sharet { position: absolute; right: 0; bottom: calc(100% + 6px); margin: 0; white-space: nowrap; }
}
.ght .aph__sh, .ght .aph__sh:hover, .ght .aph__sh:focus { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--ght-mist); color: var(--ght-ink); text-decoration: none; cursor: pointer; transition: background-color .2s, color .2s; }
.ght .aph__sh:hover { background: var(--ght-ink); color: #fff; }
.ght .aph__sh[hidden] { display: none; }
.ght .aph__sh svg { width: 18px; height: 18px; }
/* WhatsApp, Facebook, X: the real brand marks, solid */
.ght .aph__sh svg.is-brand { width: 17px; height: 17px; fill: currentColor; stroke: none; }
.ght .aph__done { position: absolute; right: 0; top: calc(100% + 6px); font-size: 13px; font-weight: 700; color: var(--ght-blue-d); white-space: nowrap; }
.ght .aph__lead { max-width: 62ch; margin-top: 18px; font-size: clamp(17px, 1.3vw, 19px); color: var(--ght-ink-2); }
.ght .aph__lead p { margin: 0 0 .6em; }
.ght .aph__lead p:last-child { margin-bottom: 0; }
.ght .aph__lead a { color: var(--ght-blue-d); }
@media (max-width: 760px) {
	.ght .aph__crumbs a { display: inline-block; padding: 10px 0; margin: -10px 0; }
	.ght .aph__h { font-size: 38px; }
}

/* ght-appealgallery */
/* GHH Appeal: Photos — big photo, thumbnails, full-size view. */
.ght.apg { display: grid; gap: 12px; }
.ght .apg__main { position: relative; display: block; aspect-ratio: var(--apg-ratio, 4 / 3); overflow: hidden; border-radius: 26px; background: var(--ght-mist); cursor: zoom-in; }
.ght .apg__stage { position: relative; }
.ght .apg__play, .ght .apg__play:hover, .ght .apg__play:focus { position: absolute; left: 18px; bottom: 18px; z-index: 2; display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--ght-ink); box-shadow: 0 6px 18px rgba(0, 0, 0, .28); cursor: pointer; transition: transform .15s; }
.ght .apg__play:hover { transform: scale(1.08); }
.ght .apg__play svg { width: 22px; height: 22px; margin-left: 3px; fill: currentColor; stroke: none; }
.ght .apg__stage.is-playing .apg__main { visibility: hidden; }
.ght .apg__film { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: inherit; background: #000; }
.ght .apg__stage.is-playing { overflow: hidden; border-radius: 26px; }
.ght .apg__main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ght .apg__thumbs { display: flex; gap: 10px; margin: 0; padding: 2px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; list-style: none; }
.ght .apg__thumbs::-webkit-scrollbar { display: none; }
.ght .apg__thumbs li { flex: none; }
.ght .apg__thumb, .ght .apg__thumb:hover, .ght .apg__thumb:focus { position: relative; display: block; width: 84px; height: 84px; padding: 0; overflow: hidden; border: 0; border-radius: 14px; background-color: var(--ght-mist); cursor: pointer; opacity: .7; outline: 2px solid transparent; outline-offset: 2px; transition: opacity .2s, outline-color .2s; }
.ght .apg__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ght .apg__thumb:hover { opacity: 1; }
.ght .apg__thumb.is-on { opacity: 1; outline-color: var(--ght-blue); }
/* full size */
.ght .apg__box { position: fixed; z-index: 1000001; inset: 0; display: grid; place-items: center; padding: 4vw; background: rgba(3, 10, 16, .92); cursor: zoom-out; }
.ght .apg__box[hidden] { display: none; }
.ght .apg__box img { max-width: 100%; max-height: 88vh; border-radius: 14px; }
.ght .apg__x, .ght .apg__x:hover, .ght .apg__x:focus { position: absolute; top: 20px; right: 20px; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background-color: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; }
/* ── slider look: GoFundMe's photo viewer (measured from theirs) ── */
.ght.apg--slider { display: block; }
.ght .apg__view { position: relative; aspect-ratio: var(--apg-ratio, 16 / 9); overflow: hidden; border-radius: 16px; background: #EDEFF1; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.ght .apg__view:focus-visible { outline: 2px solid var(--ght-blue); outline-offset: 3px; }
.ght .apg__track { display: flex; height: 100%; will-change: transform; }
.ght .apg__slide { position: relative; flex: 0 0 100%; height: 100%; margin: 0; }
.ght .apg__slide img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; pointer-events: none; }
/* the film's play button sits in the middle of the first photo */
.ght.apg--slider .apg__play, .ght.apg--slider .apg__play:hover, .ght.apg--slider .apg__play:focus { left: 50%; top: 50%; bottom: auto; transform: translate(-50%, -50%); }
.ght.apg--slider .apg__play:hover { transform: translate(-50%, -50%) scale(1.06); }
.ght .apg__slide.is-playing .apg__play { display: none; }
.ght .apg__slide .apg__film { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
/* dots: bottom left; the active one a 16px pill, normal 6px, far ones 3px */
.ght .apg__dots { position: absolute; left: 16px; bottom: 19px; z-index: 2; display: flex; align-items: center; gap: 0; }
/* each dot is a 24px target (WCAG 2.5.8) that draws the small dot inside it */
.ght .apg__dot, .ght .apg__dot:hover, .ght .apg__dot:focus { position: relative; flex: none; width: 24px; height: 24px; min-height: 0; padding: 0; border: 0; border-radius: 999px; background: transparent; cursor: pointer; }
.ght .apg__dot::before { content: ""; position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .45); transform: translate(-50%, -50%); transition: width .25s, height .25s, background-color .25s; }
.ght .apg__dot.is-far::before { width: 3px; height: 3px; }
.ght .apg__dot.is-on::before { width: 16px; height: 6px; background: #fff; }
/* arrows: bottom right, 32px dark see-through circles */
.ght .apg__arrows { position: absolute; right: 24px; bottom: 24px; z-index: 2; display: flex; gap: 8px; }
.ght .apg__arrow, .ght .apg__arrow:hover, .ght .apg__arrow:focus { display: grid; place-items: center; width: 32px; height: 32px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer; transition: background-color .15s, opacity .15s; }
.ght .apg__arrow:hover { background: rgba(0, 0, 0, .75); }
.ght .apg__arrow[disabled] { opacity: .45; cursor: default; }
.ght .apg__arrow svg { width: 16px; height: 16px; stroke-width: 2.2; }

@media (max-width: 760px) {
	/* phones: inside the page's margins with rounded corners, like the cards under it (user: not full
	   width); no arrows (swipe), dots centred */
	.ght .apg__arrows { display: none; }
	.ght .apg__dots { left: 50%; bottom: 7px; transform: translateX(-50%); }
	.ght .apg__thumb, .ght .apg__thumb:hover, .ght .apg__thumb:focus { width: 64px; height: 64px; border-radius: 12px; }
}

/* ght-appealsecure */
/* GHH Appeal: Card Heading — shield + "Secure donation" (styled with the appeal page, ght-appeal.css). */
.ght.apsec { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; }
.ght.apsec svg { width: 26px; height: 26px; color: #2f9e6e; }

/* ght-appealdonors */
/* GHH Appeal: Donations — GoFundMe's donations card and window, measured from theirs
   (rows 40px avatars / 16px name / 14px amount · label, pill buttons, 616px window with a
   24px radius, black pill tab, full-width Donate band, Donate now pinned at the foot), in GHH
   colours: blue where GoFundMe uses green, ink for their dark green. Root is .ght.apdn. */
.ght.apdn { --dn-ink: #232323; --dn-mute: #6F6F6F; --dn-soft: #F2F2F2; --dn-tint: #E9F6FD; padding: clamp(48px, 6vw, 80px) 0; color: var(--dn-ink); }

/* totals */
.apdn .apdn__stats { display: flex; align-items: center; gap: 16px; }
.apdn .apdn__ring { position: relative; display: grid; flex: none; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: conic-gradient(var(--ght-blue) calc(var(--p) * 1%), #EDEFF1 0); }
.apdn .apdn__ring::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #fff; }
.apdn .apdn__ring b { position: relative; font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.apdn .apdn__ring small { font-size: 9px; vertical-align: top; }
.apdn .apdn__totals { display: grid; margin: 0; line-height: 1.2; }
.apdn .apdn__raised { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.apdn .apdn__of { font-size: 20px; font-weight: 400; color: var(--dn-mute); }
.apdn .apdn__totals small { margin-top: 2px; font-size: 14px; color: var(--dn-mute); }
.apdn .apdn__acts { position: relative; display: grid; gap: 10px; margin: 18px 0 22px; }
.apdn .apdn__pri, .apdn .apdn__pri:hover, .apdn .apdn__pri:focus, .apdn .apdn__sec, .apdn .apdn__sec:hover, .apdn .apdn__sec:focus { width: 100%; min-height: 48px; padding: 0 20px; border: 0; border-radius: 999px; font: inherit; font-size: 16px; font-weight: 700; text-transform: none; letter-spacing: 0; cursor: pointer; transition: filter .15s; }
.apdn .apdn__pri { background: var(--ght-btn); color: #fff; }
.apdn .apdn__sec { background: var(--ght-ink); color: #fff; }
.apdn .apdn__pri:hover, .apdn .apdn__sec:hover { filter: brightness(.94); }
.apdn .apdn__done { position: absolute; left: 0; right: 0; bottom: -20px; font-size: 13px; font-weight: 600; text-align: center; color: var(--ght-blue-d); }

/* recent donations */
.apdn .apdn__count { display: flex; align-items: center; gap: 14px; margin: 0 0 6px; font-size: 16px; font-weight: 700; color: var(--ght-blue-d); }
.apdn .apdn__trend { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--dn-tint); }
.apdn .apdn__trend svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* the activity line: the count, then how the appeal is moving, one line at a time rolling up */
.apdn .apdn__count.has-pulse { position: relative; height: 40px; }
.apdn .apdn__line { display: flex; align-items: center; gap: 14px; min-width: 0; }
.apdn .apdn__say { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.apdn .apdn__say b, .apdn .apdn__say time { font-weight: 800; }
.apdn .has-pulse .apdn__line { position: absolute; inset: 0; opacity: 0; transform: translateY(14px); transition: transform .45s var(--ght-ease), opacity .45s var(--ght-ease); pointer-events: none; }
.apdn .has-pulse .apdn__line.is-on { opacity: 1; transform: none; pointer-events: auto; }
.apdn .has-pulse .apdn__line.is-out { opacity: 0; transform: translateY(-14px); }
/* gifts in the last day: the icon itself pulses (its round background stays still) */
.apdn .apdn__count.is-live .apdn__trend > * { animation: apdn-pulse 2s var(--ght-ease) infinite; transform-origin: 50% 50%; }
@keyframes apdn-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 45% { transform: scale(1.2); opacity: .75; } }
@media (prefers-reduced-motion: reduce) {
	.apdn .has-pulse .apdn__line { transition: none; }
	.apdn .apdn__count.is-live .apdn__trend > * { animation: none; }
}
.apdn .apdn__list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.apdn .apdn__row { display: flex; align-items: center; gap: 16px; padding: 12px 0; }
/* GoFundMe's avatar: their donor icon, 24px, #232323 on a #F5F5F5 circle */
.apdn .apdn__av { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #F5F5F5; color: var(--dn-ink); }
.apdn .apdn__av svg { width: 24px; height: 24px; fill: currentColor; stroke: none; }
.apdn .apdn__who { display: grid; flex: 1; min-width: 0; line-height: 1.4; }
/* type as the promise card under it (user): 15px semi-bold ink over 14px grey */
.apdn .apdn__name { overflow: hidden; font-size: 15px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; color: var(--ght-ink); }
.apdn .apdn__amt { font-weight: 600; color: inherit; }
/* second line: flag, "Chessington, United Kingdom" · "3 days ago" (the place gives way first) */
.apdn .apdn__meta { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 14px; color: var(--ght-mute); }
.apdn .apdn__msg { display: block; margin-top: 6px; padding: 8px 12px; border-radius: 4px 12px 12px 12px; background: #F3F6F8; font-size: 14px; line-height: 1.45; font-style: italic; color: var(--ght-ink); quotes: "\201C" "\201D"; overflow-wrap: anywhere; }
.apdn .apdn__row--top .apdn__msg { background: #fff; }
.apdn .apdn__meta i { flex: none; margin: 0; font-style: normal; }
.apdn .apdn__when, .apdn .apdn__tag { flex: none; white-space: nowrap; }
/* the pinned top donation: a light-blue panel (border only, no shadow), white avatar, blue starred label */
/* pulled out by its own padding, so its avatar lines up with the rows under it */
.apdn .apdn__tops { gap: 8px; margin: 6px 0; }
.apdn .apdn__row--top { margin: 0 -14px; padding: 12px 14px; border: 1px solid #CBE9F8; border-radius: 12px; background: var(--dn-tint); }
.apdn .apdn__row--top .apdn__av { background: #fff; color: var(--ght-blue-d); }
.apdn .apdn__tag { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--ght-blue-d); }
.apdn .apdn__tag svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.apdn .apdn__flag { flex: none; font-size: 15px; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.apdn .apdn__place { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* the latest gifts: without the script only the newest few show; with it they arrive one by one */
.apdn .apdn__feed:not(.is-live) > li:nth-child(n + 4) { display: none; }
/* the replay window: a fixed height (set by the script), the row arriving at the top grows (script) */
/* a block, not a grid: rows keep their height and are pushed down out of the window */
.apdn .apdn__feed.is-live { display: block; overflow: hidden; }
.apdn .apdn__feed > li { overflow: hidden; box-sizing: border-box; }
.apdn .apdn__empty { margin: 0; color: var(--dn-mute); }
.apdn .apdn__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 14px; }
.apdn .apdn__btn, .apdn .apdn__btn:hover, .apdn .apdn__btn:focus { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 16px; border: 1px solid #C8C8C8; border-radius: 999px; background: #fff; color: var(--dn-ink); font: inherit; font-size: 16px; font-weight: 700; text-transform: none; letter-spacing: 0; cursor: pointer; }
.apdn .apdn__btn:hover { background: var(--dn-soft); }
.apdn .apdn__btn svg { width: 16px; height: 16px; }

/* the window */
.apdn .apdn__win { position: fixed; z-index: 1000002; inset: 0; display: grid; place-items: center; padding: 50px 24px; background: rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.apdn .apdn__win[hidden] { display: none; }
.apdn .apdn__panel { display: flex; flex-direction: column; width: min(616px, 100%); height: 100%; max-height: 900px; overflow: hidden; border-radius: 24px; background: #fff; color: var(--dn-ink); }
.apdn .apdn__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 24px 24px 12px; }
.apdn .apdn__title { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -.025em; }
.apdn .apdn__badge { padding: 3px 7px; border-radius: 6px; background: #EDEFF1; font-size: 14px; font-weight: 700; letter-spacing: 0; color: var(--dn-ink); }
.apdn .apdn__x, .apdn .apdn__x:hover, .apdn .apdn__x:focus { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--dn-ink); cursor: pointer; }
.apdn .apdn__x:hover { background: var(--dn-soft); }
.apdn .apdn__x svg { width: 20px; height: 20px; }
.apdn .apdn__tabs { display: flex; gap: 4px; padding: 6px 24px 18px; }
.apdn .apdn__tab, .apdn .apdn__tab:hover, .apdn .apdn__tab:focus { padding: 8px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--dn-mute); font: inherit; font-size: 16px; font-weight: 700; text-transform: none; letter-spacing: 0; cursor: pointer; }
.apdn .apdn__tab[aria-selected="true"] { background: var(--dn-ink); color: #fff; }
.apdn .apdn__scroll { flex: 1; min-height: 0; padding: 0 24px 16px; overflow-y: auto; overscroll-behavior: contain; }
.apdn .apdn__topline { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.apdn .apdn__topline[hidden] { display: none; }
.apdn .apdn__list--win .apdn__row { padding: 14px 0; }
/* the Donate band, full width inside the window */
.apdn .apdn__cta { display: flex; align-items: center; gap: 16px; margin: 6px -24px; padding: 16px 24px; background: var(--dn-tint); }
.apdn .apdn__cta img { flex: none; width: 44px; height: 56px; border: 2px solid #fff; border-radius: 6px; object-fit: cover; transform: rotate(-4deg); }
.apdn .apdn__cta p { flex: 1; margin: 0; font-size: 16px; font-weight: 700; line-height: 1.3; }
.apdn .apdn__ctabtn, .apdn .apdn__ctabtn:hover, .apdn .apdn__ctabtn:focus { flex: none; min-height: 32px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--ght-ink); color: #fff; font: inherit; font-size: 14px; font-weight: 700; text-transform: none; cursor: pointer; }
.apdn .apdn__more { margin: 8px 0 0; text-align: center; color: var(--dn-mute); }
.apdn .apdn__foot { padding: 24px; border-top: 1px solid #E5E5E5; }
.apdn .apdn__foot .apdn__pri { min-height: 48px; }
@media (max-width: 760px) {
	.apdn .apdn__win { align-items: end; padding: 0; }
	.apdn .apdn__panel { width: 100%; height: 92vh; border-radius: 24px 24px 0 0; }
	.apdn .apdn__title { font-size: 24px; }
}

/* ght-appealtrust */
/* GHH Appeal: Reassurance — three short points under the form. (Root is .ght.aptr.) */
.ght.aptr { display: grid; gap: 4px; margin: 4px 0 0; padding: 14px 0 0; border-top: 1px solid var(--ght-line); list-style: none; }
.ght.aptr .aptr__i { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; text-decoration: none; }
.ght.aptr svg { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--ght-blue-d); }
.ght.aptr p { display: grid; font-size: 14px; line-height: 1.4; }
.ght.aptr b { font-size: 15px; color: var(--ght-ink); }
.ght.aptr span { color: var(--ght-mute); }
.ght.aptr a.aptr__i:hover b { color: var(--ght-blue-d); }

/* ght-appealbrief */
/* GHH Appeal: Brief — everything about the appeal in one card: progress, tabs, facts, story, gift,
   steps and films. Same on every appeal; each part comes from the appeal itself. */
.ght.apbr { container-type: inline-size; }
.ght .apbr__h { margin-bottom: 16px; }

/* tabs: one bar of pills on a soft track; scrolls sideways when the card is narrow */
.ght .apbr__tabs { scroll-margin-top: calc(var(--ght-hdr) + 16px); display: flex; gap: 4px; margin: 0 0 22px; padding: 4px; border-radius: 999px; background: var(--ght-mist); overflow-x: auto; scrollbar-width: none; }
.ght .apbr__tabs::-webkit-scrollbar { display: none; }
.ght .apbr__tab, .ght .apbr__tab:hover, .ght .apbr__tab:focus { flex: 1 1 0; min-height: 40px; margin: 0; padding: 8px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--ap-muted, var(--ght-mute)); font: inherit; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0; text-transform: none; white-space: nowrap; cursor: pointer; box-shadow: none; transition: background .2s, color .2s, box-shadow .2s; }
.ght .apbr__tab:hover { color: var(--ap-ink, var(--ght-ink)); }
.ght .apbr__tab[aria-selected="true"] { background: #fff; color: var(--ap-ink, var(--ght-ink)); box-shadow: 0 1px 2px rgba(6, 20, 30, .08), 0 0 0 1px var(--ap-edge, var(--ght-line)); }
.ght .apbr__tab:focus-visible { outline: 2px solid var(--ght-blue); outline-offset: 2px; }
/* with the script, one panel at a time (without it, all of them, one under another) */
.ght.apbr.is-tabbed .apbr__panel:not(.is-on) { display: none; }
.ght .apbr__panel + .apbr__panel { margin-top: 28px; }
.ght.apbr.is-tabbed .apbr__panel + .apbr__panel { margin-top: 0; }
.ght.apbr.is-tabbed .apbr__panel.is-on { animation: ght-apbr-in .35s var(--ght-ease) both; }
@keyframes ght-apbr-in { from { opacity: 0; transform: translateY(6px); } }

/* at a glance: icon, small label, value */
.ght .apbr__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 24px; padding: 0; list-style: none; }
.ght .apbr__fact { display: flex; align-items: center; gap: 12px; min-width: 0; margin: 0; padding: 12px 14px; border: 1px solid var(--ap-edge, var(--ght-line)); border-radius: 12px; background: #fff; }
.ght .apbr__fi { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--ght-soft); color: var(--ght-blue-d); }
.ght .apbr__fi svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ght .apbr__fact > span:last-child { display: grid; gap: 1px; min-width: 0; }
.ght .apbr__fact small { font-size: 12.5px; line-height: 1.2; color: var(--ap-muted, var(--ght-mute)); }
.ght .apbr__fact b { font-size: 15.5px; font-weight: 700; line-height: 1.25; color: var(--ap-ink, var(--ght-ink)); overflow-wrap: anywhere; }
.ght .apbr__fact a, .ght .apbr__jump, .ght .apbr__jump:hover, .ght .apbr__jump:focus { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: 0; text-transform: none; text-decoration: underline; text-decoration-color: var(--ap-line, var(--ght-line)); text-underline-offset: 3px; cursor: pointer; box-shadow: none; min-height: 0; }
.ght .apbr__fact a:hover, .ght .apbr__jump:hover { text-decoration-color: currentColor; }

/* the story */
.ght .apbr .apst__text { max-width: none; font-size: 16px; line-height: 1.65; color: var(--ap-muted, var(--ght-mute)); }
.ght .apbr .apst__text > p:first-child { font-size: 17.5px; line-height: 1.55; color: var(--ap-ink, var(--ght-ink)); }
.ght .apbr .story__body.is-folded { max-height: 13em; }

/* your gift */
.ght .apbr__hint { margin: 0 0 4px; font-size: 14.5px; color: var(--ap-muted, var(--ght-mute)); }
.ght .apbr__h3 { margin: 22px 0 6px; font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--ap-ink, var(--ght-ink)); }
.ght .apbr__panel > .apbr__h3:first-child { margin-top: 0; }
.ght .apbr__boxes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.ght .apbr__boxes li { display: flex; align-items: flex-start; gap: 14px; margin: 0; padding: 14px 16px; border-radius: 12px; background: var(--ght-mist); }
.ght .apbr__bi { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #fff; color: var(--ght-blue-d); }
.ght .apbr__bi img { width: 28px; height: 28px; object-fit: contain; }
.ght .apbr__bi svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ght .apbr__boxes b { display: block; font-size: 15.5px; font-weight: 700; line-height: 1.3; color: var(--ap-ink, var(--ght-ink)); }
.ght .apbr__boxes small { display: block; margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--ap-muted, var(--ght-mute)); }
.ght .apbr__give { margin-top: 20px; }

/* how it works: the steps in order, joined by a line */
/* the appeal's highlighted note over the tabs ("Given out straight away in Ramadan"): GHH's gold, so it
   stands apart from the white cards under it */
.ght .apbr__note { display: flex; align-items: flex-start; gap: 14px; margin: 0 0 18px; padding: 16px 18px; border: 1px solid #F1C98A; border-left: 4px solid #E0902A; border-radius: 14px; background: #FFF7EA; }
.ght .apbr__ni { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: #fff; color: #B86A0E; }
.ght .apbr__ni svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ght .apbr__note b { display: block; font-size: 17px; font-weight: 800; line-height: 1.3; color: var(--ap-ink, var(--ght-ink)); }
.ght .apbr__note b + span { display: block; margin-top: 3px; font-size: 15px; line-height: 1.5; color: var(--ap-ink, var(--ght-ink)); }

/* timeline: the time to complete, as one calm fact (the panel's "Time to complete") */
.ght .apbr__time { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; border: 1px solid var(--ap-edge, var(--ght-line)); border-radius: 14px; background: #fff; }
.ght .apbr__ti { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--ght-soft); color: var(--ght-blue-d); }
.ght .apbr__ti svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ght .apbr__time small { display: block; font-size: 13.5px; color: var(--ap-muted, var(--ght-mute)); }
.ght .apbr__time b { display: block; margin-top: 2px; font-size: 22px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; color: var(--ap-ink, var(--ght-ink)); }
.ght .apbr__time em { display: block; margin-top: 4px; font-style: normal; font-size: 14.5px; color: var(--ap-muted, var(--ght-mute)); }
/* the update promise under it: the same box, the line in normal weight */
.ght .apbr__time + .apbr__time { margin-top: 10px; }
.ght .apbr__time strong { display: block; margin-top: 2px; font-size: 16px; font-weight: 600; line-height: 1.45; color: var(--ap-ink, var(--ght-ink)); }

.ght .apbr__steps { position: relative; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: apbr; }
.ght .apbr__steps li { position: relative; display: grid; gap: 4px; margin: 0; padding: 2px 0 22px 52px; counter-increment: apbr; }
.ght .apbr__steps li:last-child { padding-bottom: 0; }
.ght .apbr__steps li::before { content: counter(apbr); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ght-blue); color: #fff; font-size: 15px; font-weight: 700; }
.ght .apbr__steps li:not(:last-child)::after { content: ""; position: absolute; left: 16.25px; top: 38px; bottom: 4px; width: 1.5px; background: var(--ap-edge, var(--ght-line)); }
.ght .apbr__steps b { font-size: 16.5px; font-weight: 700; line-height: 1.3; color: var(--ap-ink, var(--ght-ink)); padding-top: 6px; }
.ght .apbr__steps span { font-size: 15px; line-height: 1.55; color: var(--ap-muted, var(--ght-mute)); }

/* from the field: the appeal's films, upright like the app's */
.ght .apbr__films { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px; padding: 0; list-style: none; }
.ght .apbr__films li { margin: 0; }
.ght .apbr__film { position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 14px; background: var(--ght-night); color: #fff; text-decoration: none; }
.ght .apbr__film img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ght-ease); }
.ght .apbr__film::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 20, 30, 0) 50%, rgba(6, 20, 30, .85)); }
.ght .apbr__film:hover img { transform: scale(1.04); }
.ght .apbr__play { position: absolute; top: 50%; left: 50%; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--ght-ink); }
.ght .apbr__play svg { width: 18px; height: 18px; margin-left: 2px; fill: currentColor; }
.ght .apbr__len { position: absolute; top: 8px; right: 8px; z-index: 1; padding: 2px 7px; border-radius: 999px; background: rgba(6, 20, 30, .6); font-size: 12px; font-weight: 600; }
.ght .apbr__ft { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 1; display: -webkit-box; overflow: hidden; font-size: 13.5px; font-weight: 600; line-height: 1.3; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.ght .apbr .more { color: var(--ght-blue-d); }

/* narrow card (phone, or the column below 560px): two facts and two boxes a row */
@container (max-width: 560px) {
	.ght .apbr__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* an odd one out takes the whole row, so no gap is left beside it */
	.ght .apbr__fact:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.ght .apbr__boxes { grid-template-columns: minmax(0, 1fr); }
}
/* phone: the tabs two a row, all in sight (not a bar that hides the last ones off the edge) */
@container (max-width: 440px) {
	.ght .apbr__tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 14px; }
	.ght .apbr__tab, .ght .apbr__tab:hover, .ght .apbr__tab:focus { border-radius: 10px; padding: 8px 10px; }
	.ght .apbr__tab:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@container (max-width: 380px) {
	.ght .apbr__fact { padding: 10px; gap: 10px; }
	.ght .apbr__fi { width: 30px; height: 30px; }
	.ght .apbr__films { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
	.ght.apbr.is-tabbed .apbr__panel.is-on { animation: none; }
}

/* ght-appealfaq */
/* GHH Appeal: Questions — uses the Questions section's styles (faq.css). */

/* ght-films */
/* GHH Field Films — a sideways rail of the app's reels. */
.ght.films { padding: clamp(80px, 10vw, 140px) 0; background: var(--ght-night); color: #fff; }
.ght .films__head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 40px; margin-bottom: 40px; }
.ght .films__head .more { margin-left: auto; }
.ght .films__rail { display: flex; gap: 16px; max-width: 1600px; margin: 0 auto; padding: 0 var(--ght-pad) 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--ght-pad); scrollbar-width: none; list-style: none; }
.ght .films__rail::-webkit-scrollbar { display: none; }
.ght .films__rail li { flex: none; scroll-snap-align: start; }
.ght .fl { position: relative; display: block; width: 250px; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 18px; background: var(--ght-ink-2); color: #fff; text-decoration: none; }
.ght .fl img, .ght .fl video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ght-ease), opacity .4s; }
.ght .fl video { opacity: 0; }
.ght .fl.is-playing video { opacity: 1; }
.ght .fl::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .85), rgba(0, 0, 0, 0) 55%); }
.ght .fl:hover img { transform: scale(1.05); }
.ght .fl__len { position: absolute; z-index: 1; top: 14px; right: 14px; padding: 3px 8px; border-radius: 6px; background: rgba(0, 0, 0, .5); font-size: 12px; font-weight: 700; }
.ght .fl__t { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 16px; font-size: 16px; font-weight: 700; line-height: 1.25; }
.ght .fl__t small { display: block; margin-top: 6px; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .65); }

/* the app plugin's GHH Reels in place of the rail: its heading and "Watch more" are this section's own,
   its background is the section's. Inside .wrap its rail starts in line with the heading and runs off
   the right edge (as the app widget is designed). */
.ght .films__app .ghhr { padding: 0; background: transparent; }
.ght .films__app .ghhr-head, .ght .films__app .ghhr-watchmore { display: none; }
.ght .films__app .ghhr-rail { margin-top: 0; }
.ght .films__app .ghhr-controls { justify-content: flex-end; }

@media (max-width: 760px) {
	.ght .fl { width: 200px; }
}

/* ght-appeals */
/* GHH Urgent Appeals — three calm cards, each with its own film. */
.ght.now { padding: clamp(72px, 8vw, 120px) 0; background: #fff; color: var(--ght-ink); }
.ght .now__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 40px; margin-bottom: clamp(28px, 3vw, 44px); }
.ght .now__lead { margin-top: 14px; }
.ght .now__all { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ght-blue-d); text-decoration: none; }
.ght .now__all svg { transition: transform .2s var(--ght-ease); }
.ght .now__all:hover svg { transform: translateX(4px); }
.ght .now__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.ght .ap { display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; background: var(--ght-mist); }
/* 16:9, the shape of the appeal photos: a square cropped their sides (user: "images must show in full") */
.ght .ap__film { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ght-ink); }
.ght .ap__film video, .ght .ap__film img { width: 100%; height: 100%; object-fit: cover; }
.ght .ap__rec { position: absolute; left: 12px; top: 12px; display: flex; align-items: center; gap: 8px; padding: 5px 11px; border-radius: 999px; background: rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font-size: 12px; font-weight: 700; }
.ght .ap__body { display: flex; flex: 1; flex-direction: column; padding: 22px; }
.ght .ap__tag { font-size: 13px; font-weight: 700; color: var(--ght-blue-d); }
.ght .ap__h { margin-top: 6px; font-size: clamp(20px, calc(1.8vw - 2px), 25px); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.ght .ap__h a { text-decoration: none; }
.ght .ap__h a:hover { color: var(--ght-blue-d); }
.ght .ap__text { margin-top: 8px; font-size: 15px; color: var(--ght-mute); }
.ght .ap__goal { margin-top: auto; padding-top: 18px; }
.ght .ap__bar { height: 6px; overflow: hidden; border-radius: 999px; background: #D3E1E9; }
.ght .ap__bar span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--ght-blue); transition: width 1.4s var(--ght-ease); }
.ght .ap__goal p { margin-top: 8px; font-size: 14px; color: var(--ght-mute); }
.ght .ap__goal b { color: var(--ght-ink); }
.ght .ap__give { display: flex; gap: 6px; margin-top: 16px; }
.ght .ap__goal + .ap__give { margin-top: 16px; }
.ght .ap__body > .ap__give:first-child, .ght .ap__text + .ap__give { margin-top: auto; padding-top: 18px; }
/* > only: SkyDonate's pop-up starts inside .ap__give and its buttons must keep their own look */
.ght .ap__give > button, .ght .ap__give > button:focus { flex: 1; min-height: 46px; padding: 0 6px; border: 1.5px solid var(--ght-line); border-radius: 999px; background-color: #fff; color: var(--ght-ink); font-family: var(--ght-f); font-size: 16px; font-weight: 800; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.ght .ap__give > button.is-on, .ght .ap__give > button:hover { border-color: var(--ght-ink); background-color: var(--ght-ink); color: #fff; }
.ght .ap__give > .btn { flex: 1.4; min-height: 46px; padding: 0 14px; }

@media (max-width: 1180px) {
	.ght .now__grid { gap: 14px; }
	.ght .ap__give { flex-wrap: wrap; }
	.ght .ap__give > .btn { flex-basis: 100%; }
}

/* "grid" layout: every appeal. The first lies sideways across two columns (photo beside its words),
   and so does a last card that would otherwise sit alone on its row. */
.ght.now--grid .now__grid { gap: 22px; }
.ght.now--grid .ap:first-child, .ght.now--grid .ap:last-child:nth-child(3n) { grid-column: span 2; flex-direction: row; }
.ght.now--grid .ap:last-child:nth-child(3n) { grid-column: 1 / -1; }
.ght.now--grid .ap:first-child .ap__film, .ght.now--grid .ap:last-child:nth-child(3n) .ap__film { flex: 0 0 56%; aspect-ratio: auto; min-height: 100%; }
.ght.now--grid .ap:first-child .ap__body, .ght.now--grid .ap:last-child:nth-child(3n) .ap__body { justify-content: center; padding: clamp(24px, 2.6vw, 40px); }
.ght.now--grid .ap:first-child .ap__h { font-size: clamp(26px, 2.4vw, 36px); }
.ght.now--grid .ap:first-child .ap__text { font-size: 16.5px; }
.ght.now--grid .ap:first-child .ap__goal { margin-top: 0; }
@media (max-width: 1180px) and (min-width: 761px) {
	.ght.now--grid .now__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ght.now--grid .ap:last-child:nth-child(3n) { grid-column: auto; flex-direction: column; }
	.ght.now--grid .ap:last-child:nth-child(3n) .ap__film { flex: none; aspect-ratio: 16 / 9; min-height: 0; }
	.ght.now--grid .ap:last-child:nth-child(3n) .ap__body { justify-content: flex-start; padding: 22px; }
	/* two columns: the featured card fills a row, so an even count leaves the last one alone */
	.ght.now--grid .ap:last-child:nth-child(even) { grid-column: 1 / -1; flex-direction: row; }
	.ght.now--grid .ap:last-child:nth-child(even) .ap__film { flex: 0 0 50%; aspect-ratio: auto; min-height: 100%; }
	.ght.now--grid .ap:last-child:nth-child(even) .ap__body { justify-content: center; }
}
/* phones: a sideways row of cards */
@media (max-width: 760px) {
	.ght .now__grid { display: flex; gap: 14px; margin: 0 calc(var(--ght-pad) * -1); padding: 0 var(--ght-pad) 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--ght-pad); scrollbar-width: none; }
	.ght .now__grid::-webkit-scrollbar { display: none; }
	.ght .ap { flex: none; width: 82%; scroll-snap-align: start; }
	/* "grid" layout: one under another, wide photos */
	.ght.now--grid .now__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0; padding: 0; overflow: visible; scroll-snap-type: none; }
	.ght.now--grid .ap, .ght.now--grid .ap:first-child, .ght.now--grid .ap:last-child:nth-child(3n) { grid-column: auto; flex-direction: column; width: auto; }
	.ght.now--grid .ap .ap__film, .ght.now--grid .ap:first-child .ap__film, .ght.now--grid .ap:last-child:nth-child(3n) .ap__film { flex: none; aspect-ratio: 16 / 9; min-height: 0; }
	.ght.now--grid .ap:first-child .ap__body, .ght.now--grid .ap:last-child:nth-child(3n) .ap__body { padding: 20px; }
	.ght.now--grid .ap:first-child .ap__h { font-size: 26px; }
}

/* ght-appeal-sd */
/* ==========================================================================
 * GHH Toolkit — SkyDonate's donation form on the appeal page, in the GHH look (moved out of
 * ght-appeal.css in 1.53.6). Loaded only while Settings → GHH Toolkit → "Style SkyDonate widgets"
 * is on; off, SkyDonate's own design shows.
 * ======================================================================== */

/* ── SkyDonate's form, as the donation checkout draws it (also in the Donate section, .ght-sdform) ── */
:is(.ght-ap-side, .ght-sdform) .elementor-widget-skyweb_donation_form { --accent-color: var(--ght-blue); margin: 0; }
:is(.ght-ap-side, .ght-sdform) .donation-form-wrapper { font-family: var(--ght-f); }
:is(.ght-ap-side, .ght-sdform) .donation-form { gap: 12px; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
:is(.ght-ap-side, .ght-sdform) .donation-form button, :is(.ght-ap-side, .ght-sdform) .donation-form input, :is(.ght-ap-side, .ght-sdform) .donation-form select { font-family: var(--ght-f); }
/* Give once / Monthly: two boxes, the chosen one light blue */
:is(.ght-ap-side, .ght-sdform) .donation-form .donation-type-switch { display: grid !important; grid-template-columns: 1fr 1fr !important; width: 100%; gap: 0; padding: 0; border: 0; border-radius: 8px; background: none; box-shadow: none; }
:is(.ght-ap-side, .ght-sdform) .donation-form .donation-type-btn { width: 100% !important; max-width: none !important; flex: none !important; min-height: 46px; margin: 0; border: 0; border-radius: 0; background: #fff; box-shadow: inset 0 0 0 1px var(--ght-line); color: var(--ght-ink); font-size: 16px; font-weight: 500; text-transform: none; }
:is(.ght-ap-side, .ght-sdform) .donation-form .donation-type-btn:first-child { border-radius: 8px 0 0 8px; }
:is(.ght-ap-side, .ght-sdform) .donation-form .donation-type-btn:last-child { border-radius: 0 8px 8px 0; }
:is(.ght-ap-side, .ght-sdform) .donation-form .donation-type-btn::before { display: none; }
:is(.ght-ap-side, .ght-sdform) .donation-form .donation-type-btn.active { position: relative; z-index: 1; background: var(--ap-soft, #E9F6FD); box-shadow: inset 0 0 0 1.5px var(--ght-blue); color: var(--ght-ink); }
/* amounts */
:is(.ght-ap-side, .ght-sdform) .donation-form .donation-buttons { gap: 8px; }
:is(.ght-ap-side, .ght-sdform) .donation-form.grid-layout .donation-buttons .donation-btn { display: flex; align-items: center; justify-content: center; min-height: 46px; border: 0; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--ght-line); color: var(--ght-ink); font-size: 17px; font-weight: 500; text-transform: none; }
:is(.ght-ap-side, .ght-sdform) .donation-form .donation-buttons .donation-btn::after { display: none; }
:is(.ght-ap-side, .ght-sdform) .donation-form.grid-layout .donation-buttons .donation-btn:hover { box-shadow: inset 0 0 0 1.5px var(--ght-blue); }
:is(.ght-ap-side, .ght-sdform) .donation-form.grid-layout .donation-buttons .donation-btn.active { background: var(--ap-soft, #E9F6FD); box-shadow: inset 0 0 0 1.5px var(--ght-blue); color: var(--ght-ink); }
:is(.ght-ap-side, .ght-sdform) .donation-form .donation-btn .currency-symbol, :is(.ght-ap-side, .ght-sdform) .donation-form .donation-btn .price { color: inherit; font-weight: inherit; }
/* project options with a label ("Fully fund a complete water well" £1,120) — water wells, masjids:
   one per row, what it does on the left, the amount on the right, sentence case; SkyDonate ran
   "£1120Fully Fund A Complete…" together, title-cased, the others in pink */
:is(.ght-ap-side, .ght-sdform) .donation-form .donation-buttons:has(.btn-label) { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; }
:is(.ght-ap-side, .ght-sdform) .donation-form .donation-buttons .donation-btn:has(.btn-label) { display: flex !important; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 12px; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; min-height: 50px; white-space: normal !important; margin: 0 !important; padding: 10px 16px !important; border: 0 !important; border-radius: 10px !important; background: #fff !important; box-shadow: inset 0 0 0 1px var(--ght-line) !important; color: var(--ght-ink) !important; font: 500 15px/1.3 var(--ght-f) !important; text-align: left; text-transform: none !important; letter-spacing: 0 !important; }
:is(.ght-ap-side, .ght-sdform) .donation-form .donation-buttons .donation-btn:has(.btn-label):hover { box-shadow: inset 0 0 0 1.5px var(--ght-blue) !important; }
:is(.ght-ap-side, .ght-sdform) .donation-form .donation-buttons .donation-btn.active:has(.btn-label) { background: var(--ght-soft) !important; box-shadow: inset 0 0 0 1.5px var(--ght-blue) !important; }
:is(.ght-ap-side, .ght-sdform) .donation-form .donation-btn:has(.btn-label) .btn-label { flex: 1; min-width: 0; color: var(--ght-ink) !important; font: inherit !important; text-transform: none !important; white-space: normal !important; }
:is(.ght-ap-side, .ght-sdform) .donation-form .donation-btn:has(.btn-label) .price { flex: none; color: var(--ght-ink) !important; font-size: 16px !important; font-weight: 700 !important; }
:is(.ght-ap-side, .ght-sdform) .donation-form .donation-btn:has(.btn-label)::before { display: none !important; }
/* the project's promise above the options: a calm line, not blue part-way through */
:is(.ght-ap-side, .ght-sdform) .donation-box-title, :is(.ght-ap-side, .ght-sdform) .donation-box-title * { color: var(--ght-ink-2) !important; font-weight: 400 !important; }
:is(.ght-ap-side, .ght-sdform) .donation-box-title { margin-bottom: 12px; font-size: 15px; line-height: 1.5; }
/* custom amount: one big field */
:is(.ght-ap-side, .ght-sdform) .donation-amount-groups .donation-custom { min-height: 56px; border: 0; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--ght-line); }
/* list layout (Fidyah): SkyDonate joins the field to the list above (square top, no gap); the rows are separate cards here, so it is one too */
:is(.ght-ap-side, .ght-sdform) .donation-form.list-layout .donation-amount-groups .donation-custom { margin-top: 8px !important; border-radius: 10px !important; }
:is(.ght-ap-side, .ght-sdform) .donation-amount-groups .donation-custom:focus-within { box-shadow: inset 0 0 0 1.5px var(--ght-blue); }
:is(.ght-ap-side, .ght-sdform) .donation-amount-groups .donation-custom .skydonate-currency-wrapper .currency-symbol { color: var(--ght-ink); background-color: transparent; font-weight: 400; }
/* (the field's ring is an inset shadow: anything inside with a background would paint over it) */
:is(.ght-ap-side, .ght-sdform) .donation-custom input.custom-amount-input { background: transparent !important; box-shadow: none !important; color: var(--ght-ink); font-size: 22px; font-weight: 500; }
:is(.ght-ap-side, .ght-sdform) .donation-custom .custom-placeholder { background: transparent !important; }
/* the currency switcher sits invisibly over the £ (its own label would print over it) */
:is(.ght-ap-side, .ght-sdform) .donation-custom .skydonate-currency-select { color: transparent; background: transparent; }
:is(.ght-ap-side, .ght-sdform) .donation-custom .skydonate-currency-select option { color: var(--ght-ink); }
/* the field's blue ring is the focus mark: SkyDonate's reset.css also draws a black outline on the input/select inside it */
:is(.ght-ap-side, .ght-sdform) .donation-custom :is(input.custom-amount-input, .skydonate-currency-select):is(:focus, :focus-visible) { outline: 0 !important; box-shadow: none !important; }
/* "Select donation type": its group draws the box */
:is(.ght-ap-side, .ght-sdform) .donation-type-select-group { border: 0 !important; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--ght-line); }
:is(.ght-ap-side, .ght-sdform) .donation-type-select-group select { min-height: 48px; border: 0; background-color: transparent; box-shadow: none; font-size: 15px; color: var(--ght-ink); }
:is(.ght-ap-side, .ght-sdform) .skydonate-currency-wrapper, :is(.ght-ap-side, .ght-sdform) .skydonate-currency-select { border: 0 !important; box-shadow: none !important; }
/* Donate */
:is(.ght-ap-side, .ght-sdform) .donation-form-wrapper .form-submit-button { height: 54px !important; min-height: 54px !important; border-radius: 8px; background: var(--ght-btn); background-image: none; box-shadow: none; }
:is(.ght-ap-side, .ght-sdform) .donation-form-wrapper .form-submit-button:hover { background: var(--ght-blue-d); filter: none !important; }
:is(.ght-ap-side, .ght-sdform) .form-submit-button > span { font-family: var(--ght-f); font-weight: 600; text-transform: none; }
/* "This project is Zakat applicable.": a quiet line with a blue tick, not SkyDonate's lilac pill */
body .donation-form-wrapper .zakat-applicable { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 14px 0 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--ght-ink-2); font: 500 14px/1.4 var(--ght-f); text-align: center; }
body .donation-form-wrapper .zakat-applicable i { display: none; }
body .donation-form-wrapper .zakat-applicable::before { content: ""; flex: none; width: 16px; height: 16px; background: var(--ght-blue-d); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m8 12.5 2.7 2.7L16.2 9.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m8 12.5 2.7 2.7L16.2 9.5'/%3E%3C/svg%3E") center / contain no-repeat; }

/* the header's Donate pop-up on an appeal page (header.js): the site's close button, not SkyDonate's red one */
.quick-modal.ght-qd .quick-modal-close { width: 40px; height: 40px; border: 1px solid var(--ght-line); border-radius: 50%; background: #fff; box-shadow: none; color: var(--ght-ink); }
.quick-modal.ght-qd .quick-modal-close:hover { background: var(--ght-mist); }
.quick-modal.ght-qd .quick-modal-close:after { background-color: var(--ght-ink); }
.quick-modal.ght-qd .quick-modal-body { border-radius: 20px; }
:is(.ght-ap-side, .ght-sdform) .form-submit-button .skd-app-cta__code { color: #fff !important; opacity: 1 !important; }

/* ght-appeal */
/* ==========================================================================
 * GHH appeal (product) page — styled on SkyDonate's donation checkout
 * (FundraiseUp style) with GoFundMe-style type: Onest (bold, tight headings,
 * plain text), white cards with a 16px radius and a 1px border (no shadows),
 * 8px controls with a fine ring, the chosen
 * option in light blue with a blue ring, one blue button.
 *
 * The appeal template (build/ght-build-appeal.php) is Elementor containers:
 *   .ght-ap-top    the grid
 *     .ght-ap-media  photos (+ film) and progress            left, row 1
 *     .ght-ap-rail   right column:
 *       .ght-ap-side   the giving card (heading + SkyDonate's Donation Form)
 *       .ght-ap-side2  recent donations, our promise
 *     .ght-ap-body   the story card, how it helps            left, row 2
 * Phones: photos → giving card → story → donations. Classes are set on the
 * containers (Advanced → CSS Classes), so the layout stays editable.
 * ======================================================================== */

/* ── the calm type and colours (this page only) ── */
.ght-appeal-page {
	--ght-f: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--ap-ink: #1F2933;
	--ap-muted: #5F6B7A;
	--ap-line: #CDD5DE;
	--ap-soft: #E9F6FD;
	/* cards are drawn with a border only, no shadow (user: "keep it clean") */
	--ap-edge: #DDE3EA;
	font-family: var(--ght-f);
	color: var(--ap-ink);
}
body.single-product.ght-site, body.ght-site:has(.ght-fundraiser-page) { background: #F6F8FA; }
/* fundraiser pages (GHT_Fundraiser): the plugin's form widget sits where SkyDonate's appeal form does,
   and its team banner / leaderboard sit in the story column as white cards */
.ght-ap-side .elementor-widget-skydonate-donation-form { --accent-color: var(--ght-blue); margin: 0; }
.ght-fundraiser-page .ght-ap-body > .elementor-widget:is(.elementor-widget-skydonate-leaderboard, .elementor-widget-skydonate-team-campaign-banner):has(> .elementor-widget-container > *) { padding: 24px; border: 1px solid var(--ap-edge); border-radius: 16px; background: #fff; }
.ght-fundraiser-page .skydonate-donations-closed { padding: 14px 16px; border: 1px solid var(--ght-line); border-radius: 12px; background: var(--ght-mist); color: var(--ght-ink); font: 500 15px/1.5 var(--ght-f); }
.ght-appeal-page .ght { font-family: var(--ght-f); }
.ght-appeal-page .ght .h2 { font-size: clamp(26px, 2.4vw, 34px); font-weight: 700; line-height: 1.15; letter-spacing: -.025em; }
.ght-appeal-page .ght .lead { font-size: 16.5px; color: var(--ap-muted); }
.ght-appeal-page .ght-notices:empty { display: none; }
.ght-appeal-page .ght-notices { max-width: 1200px; margin: 16px auto 0; padding: 0 var(--ght-pad); }

/* title */
.ght-appeal-page .ght.aph { padding: clamp(24px, 3vw, 40px) 0 clamp(20px, 2.4vw, 28px); }
.ght-appeal-page .ght.aph .wrap { max-width: 1200px; }
.ght-appeal-page .ght .aph__cat { margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.ght-appeal-page .ght .aph__h { max-width: 28ch; font-size: clamp(30px, 3.2vw, 42px); font-weight: 700; line-height: 1.12; letter-spacing: -.025em; color: var(--ap-ink); }
.ght-appeal-page .ght .aph__lead { margin-top: 10px; font-size: 17px; line-height: 1.55; color: var(--ap-muted); }

/* ── the grid ── */
.e-con.ght-ap-top { --padding-top: 0px; --padding-bottom: 0px; display: grid !important; grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr); grid-template-areas: "media rail" "body rail"; grid-template-rows: auto 1fr; /* the tall right column's extra height goes to the story row, never between the photo and the story */ align-items: start; gap: 24px 32px; max-width: 1200px; margin: 0 auto; padding: 0 var(--ght-pad) clamp(48px, 6vw, 80px); }
.e-con.ght-ap-media, .e-con.ght-ap-side, .e-con.ght-ap-side2, .e-con.ght-ap-rail, .e-con.ght-ap-body { --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; --gap: 0px; --row-gap: 0px; min-width: 0; }
.e-con.ght-ap-top > .ght-ap-media { grid-area: media; display: flex; flex-direction: column; gap: 18px; }
.e-con.ght-ap-top > .ght-ap-rail { grid-area: rail; display: flex; flex-direction: column; gap: 20px; }
.e-con.ght-ap-top > .ght-ap-body { grid-area: body; display: flex; flex-direction: column; gap: 20px; }
.e-con.ght-ap-side2 { display: flex; flex-direction: column; gap: 20px; }
.e-con.ght-ap-body > .elementor-widget:not(:has(.ght)), .e-con.ght-ap-side2 > .elementor-widget:not(:has(.ght)) { display: none; }
/* an older template (giving card straight in the grid) still lays out */
.e-con.ght-ap-top:not(:has(> .ght-ap-rail)) > .ght-ap-side { grid-area: rail; }

/* cards */
.e-con.ght-ap-side, .ght-ap-body .ght.apst, .ght-ap-body .ght.apim, .ght-ap-body .ght.apbr, .ght-ap-side2 .ght.apdn, .ght-ap-side2 .ght.aptr { padding: 24px; border: 1px solid var(--ap-edge); border-radius: 16px; background: #fff; box-shadow: none; }
.e-con.ght-ap-side { display: flex; flex-direction: column; gap: 16px; }
.ght-ap-body .ght.apst, .ght-ap-body .ght.apim, .ght-ap-body .ght.apbr { padding: clamp(22px, 2.6vw, 32px); }
.ght .apst__h2, .ght-appeal-page .ght .apst__h2 { margin: 0 0 14px; font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; color: var(--ap-ink); }
.ght-appeal-page .ght.apst--parts .apst__text { max-width: none; font-size: 16px; line-height: 1.65; color: var(--ap-muted); }
.ght-appeal-page .ght .rich h3, .ght-appeal-page .ght .rich h4 { font-size: 16px; font-weight: 600; letter-spacing: 0; color: var(--ap-ink); }
.ght-appeal-page .ght .rich strong, .ght-appeal-page .ght .rich b { font-weight: 600; color: var(--ap-ink); }

/* card heading: shield + "Secure donation" */
.ght-appeal-page .ght.apsec { font-size: 20px; font-weight: 700; letter-spacing: -.015em; color: var(--ap-ink); }

/* photos and progress */
.ght-appeal-page .ght .apg__main, .ght-appeal-page .ght .apg__stage.is-playing { border-radius: 16px; }
.ght-appeal-page .ght .apg__thumb { border-radius: 10px; }
.ght-appeal-page .ght.apgo { padding: 18px 20px; border: 1px solid var(--ap-edge); border-radius: 16px; background: #fff; box-shadow: none; }
/* no shadows anywhere on the page: the gift cards and play button keep to borders too */
.ght-appeal-page .ght .apst__gift:hover { box-shadow: inset 0 0 0 1.5px var(--ght-blue); }
.ght-appeal-page .ght .apg__play { box-shadow: none; }
.ght-appeal-page .ght .apgo__line { font-size: 15px; color: var(--ap-muted); }
.ght-appeal-page .ght .apgo__line b { font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--ap-ink); }

/* how it helps, gifts, points: the checkout's controls */
.ght-appeal-page .ght .apim__list li, .ght-appeal-page .ght .apst__gift { border: 0; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--ap-line); }
.ght-appeal-page .ght .apst__gift:hover { box-shadow: inset 0 0 0 1.5px var(--ght-blue); transform: none; }
.ght-appeal-page .ght .apst__gift.is-on { background: var(--ap-soft); box-shadow: inset 0 0 0 1.5px var(--ght-blue); }
.ght-appeal-page .ght .apst__gift b, .ght-appeal-page .ght .apim__list b { font-weight: 600; }
.ght-appeal-page .ght .apst__price { font-weight: 700; letter-spacing: -.01em; }
.ght-appeal-page .ght .apst__pts li { border-radius: 10px; background: #F4F7FA; }
.ght-appeal-page .ght .apst__pts li b { font-weight: 600; }

/* donations and our promise in the right column (the donations panel styles itself: appealdonors.css) */
.ght-ap-side2 .ght.apdn .apst__h2 { font-size: 18px; }
.ght-ap-side2 .ght.aptr { display: grid; gap: 14px; margin: 0; list-style: none; }
.ght-appeal-page .ght.aptr b { font-weight: 600; }

/* SkyDonate's form itself: ght-appeal-sd.css (only while "Style SkyDonate widgets" is on) */

@media (max-width: 1024px) {
	.e-con.ght-ap-top { grid-template-columns: minmax(0, 1fr); grid-template-areas: "media" "side" "body" "side2"; }
	/* the right column's two parts take their own places in the one column */
	.e-con.ght-ap-top > .ght-ap-rail { display: contents; }
	.e-con.ght-ap-rail > .ght-ap-side { grid-area: side; }
	.e-con.ght-ap-rail > .ght-ap-side2 { grid-area: side2; }
	.e-con.ght-ap-top:not(:has(> .ght-ap-rail)) > .ght-ap-side { grid-area: side; }
	.e-con.ght-ap-top { grid-template-rows: none; }
	/* One column of cards as a grid, not a flex column. As a flex column, Chrome gave the tabbed story
	   card (Appeal brief) a height far beyond its content (3,672px for 1,176px on the Palestine appeal,
	   most likely its hidden tabs): a 2,500px empty band on phones (user: "big gaps under some
	   sections on mobile"). As a grid it's its content's height. */
	.e-con.ght-ap-top > .ght-ap-body, .e-con.ght-ap-rail > .ght-ap-side2 { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 20px; }
}
@media (max-width: 760px) {
	.e-con.ght-ap-top { gap: 16px; padding-left: 12px; padding-right: 12px; }
	.ght-appeal-page .ght.aph { padding-left: 0; padding-right: 0; }
	.e-con.ght-ap-side, .ght-ap-body .ght.apst, .ght-ap-body .ght.apim, .ght-ap-body .ght.apbr, .ght-ap-side2 .ght.apdn, .ght-ap-side2 .ght.aptr { padding: 18px; }
	/* the photos keep the page's 12px margins and the cards' rounded corners (user: not full width) */
	.ght-appeal-page .ght .apg__main, .ght-appeal-page .ght .apg__view { margin: 0; border-radius: 14px; }
	/* TRIAL (user: "merge them, only on mobile"): the photos become the top of the donation card — no
	   gap, square corners where they meet, the card's own border carrying on under the photo */
	.e-con.ght-ap-top:has(> .ght-ap-media .apg__view) .ght-ap-media .apg__view,
	.e-con.ght-ap-top:has(> .ght-ap-media .apg__view) .ght-ap-media .apg__main { border-radius: 16px 16px 0 0; }
	.e-con.ght-ap-top:has(> .ght-ap-media .apg__view) .e-con.ght-ap-side { margin-top: -16px; border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
}

/* ght-video */
/* GHH Video. (Root is .ght.gtv.) */
.ght.gtv { position: relative; aspect-ratio: var(--gtv-ratio, 16 / 9); overflow: hidden; border-radius: 22px; background: var(--ght-ink); }
.ght.gtv .gtv__play, .ght.gtv .gtv__play:hover, .ght.gtv .gtv__play:focus { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; background-color: transparent; color: #fff; cursor: pointer; }
.ght.gtv .gtv__play img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ght-ease); }
.ght.gtv .gtv__play::after { content: ""; position: absolute; inset: 0; background: rgba(6, 20, 30, .25); transition: background-color .3s; }
.ght.gtv .gtv__btn { position: relative; z-index: 1; display: grid; place-items: center; width: 78px; height: 78px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--ght-ink); box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .6); transition: transform .3s var(--ght-ease), background-color .3s, color .3s; }
.ght.gtv .gtv__btn svg { width: 26px; height: 26px; margin-left: 4px; fill: currentColor; stroke: none; }
.ght.gtv .gtv__label { position: absolute; z-index: 1; left: 0; right: 0; bottom: 20px; font-weight: 700; text-align: center; }
.ght.gtv .gtv__play:hover img { transform: scale(1.04); }
.ght.gtv .gtv__play:hover .gtv__btn { transform: scale(1.08); background: var(--ght-blue); color: #fff; }
.ght.gtv .gtv__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ght-story */
/* GHH Story — words beside a photo or film; without a picture, heading left and text right. */
.ght .story__grid { display: grid; align-items: center; gap: clamp(32px, 5vw, 96px); }
.ght.story--media .story__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ght.story--left .story__media { order: -1; }
.ght.story--text.story--plain .story__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; max-width: calc(68ch + 2 * var(--ght-pad)); }
.ght.story--only .story__grid { grid-template-columns: minmax(0, 1fr); max-width: 1040px; }
.ght.story--only .story__text { display: none; }
.ght.story--text .story__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; }
.ght .story__text .h2 { margin-bottom: 24px; }
.ght.story--text .story__text .h2 { margin-bottom: 0; }
.ght .story__body { max-width: 64ch; }
.ght .story__btns { margin-top: 30px; }
.ght .story__media .pmedia { border-radius: 22px; }
.ght .story__media .pmedia img { aspect-ratio: 4 / 3.2; object-fit: cover; }
/* folded long text */
.ght .story__body.is-folded { position: relative; max-height: 15em; overflow: hidden; }
.ght .story__body.is-folded::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6em; background: linear-gradient(rgba(255, 255, 255, 0), #fff); pointer-events: none; }
.ght.t-mist .story__body.is-folded::after { background: linear-gradient(rgba(238, 244, 247, 0), var(--ght-mist)); }
.ght.t-night .story__body.is-folded::after { background: linear-gradient(rgba(6, 20, 30, 0), var(--ght-night)); }
.ght .story__more, .ght .story__more:hover, .ght .story__more:focus { display: inline-flex; margin-top: 14px; padding: 0; border: 0; background: none; color: var(--ght-blue-d); font-size: 16px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.ght.t-night .story__more { color: var(--ght-gold); }
/* long words beside a picture: the picture starts at the top and stays in view while reading */
.ght.story--long .story__grid { align-items: start; }
.ght.story--long .story__media { position: sticky; top: calc(var(--ght-hdr) + var(--wp-admin--admin-bar--height, 0px) + 28px); }
.ght.story--long .story__media .pmedia img { aspect-ratio: 4 / 5; }

@media (max-width: 960px) {
	.ght.story--media .story__grid, .ght.story--text .story__grid { grid-template-columns: minmax(0, 1fr); }
	.ght.story--text .story__text .h2 { margin-bottom: 0; }
	.ght .story__media { order: -1; }
	.ght.story--long .story__media { position: static; }
	.ght.story--long .story__media .pmedia img { aspect-ratio: 4 / 3.2; }
}

/* ght-appealstory */
/* GHH Appeal: Description — the appeal's own content, in the GHH type. */
.ght.apst { padding: clamp(56px, 7vw, 96px) 0; border-top: 1px solid var(--ght-line); background: #fff; }
.ght .apst__h { margin-bottom: 28px; }
.ght .apst__body { font-size: 17px; line-height: 1.7; color: var(--ght-ink-2); }
/* the description's own boxed containers line up with the page */
.ght .apst__body > .elementor > .e-con.e-parent { --content-width: min(var(--ght-max), 100%); --padding-left: var(--ght-pad); --padding-right: var(--ght-pad); }
/* prose rules skip SkyDonate's Daily Giving, which brings its own type and centring, and the page
   sections placed in a description (shared blocks such as "Our promise"), which bring their own */
.ght .apst__body :is(h2, h3, h4):not(.skd-dg *, .apst__body .ght *) { margin: 0 0 .5em; font-family: var(--ght-f); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: var(--ght-ink); }
.ght .apst__body h2:not(.skd-dg *, .apst__body .ght *) { font-size: clamp(28px, 2.8vw, 40px); }
.ght .apst__body h3:not(.skd-dg *, .apst__body .ght *) { font-size: 24px; }
.ght .apst__body p:not(.skd-dg *, .apst__body .ght *) { margin: 0 0 1em; }
/* a container holding a page section runs edge to edge; the section keeps its own band and width */
.ght .apst__body .e-con.e-parent:has(> .elementor-widget-shortcode .ght, > .elementor-widget :is(.ght.sec, .ght.phero)) { --content-width: 100%; --padding-left: 0px; --padding-right: 0px; }
/* a description built of page sections from its page hero down (Fidyah): it is the page, so the
   description's own padding and top rule go */
.ght.apst:has(.apst__body > .elementor > .e-con:first-child > .elementor-widget-ght_pagehero) { padding: 0; border-top: 0; }
/* a description that is only Daily Giving: its full-height sky is the page, so no section padding or rule */
.ght.apst:has(.skd-dg--fullheight) { padding: 0; border-top: 0; }
/* …and edge to edge, from the top of the screen (behind the floating header) to the bottom, as on the
   live site (user: "the blue design must be full height and width like the original site") */
.ght .apst__body .e-con.e-parent:has(.skd-dg--fullheight) { --content-width: 100%; --padding-left: 0px; --padding-right: 0px; --padding-top: 0px; --padding-bottom: 0px; --margin-top: 0px; margin-top: 0; }
body.ght-site .ght-site-header ~ main.site-main.ght-appeal-page:has(.skd-dg--fullheight) { padding-top: 0; }
/* the notices box holds an empty WooCommerce wrapper, so it's never :empty; with no notice in it, its
   16px top margin would push the whole page (and the sky) down out from under the header */
.ght-appeal-page:has(.skd-dg--fullheight) .ght-notices:not(:has(.woocommerce-message, .woocommerce-error, .woocommerce-info, .wc-block-components-notice-banner)) { margin: 0; }
.ght .apst__body .skd-dg--fullheight { border-radius: 0; }
/* the sky runs under the header, so each step's content starts clear of it (the amount card touched it) */
.ght .apst__body .skd-dg--fullheight .skd-dg__step { box-sizing: border-box; padding-top: calc(var(--ght-tuck, 20px) + 24px); }
/* ght-base's `.ght p { margin: 0 }` outranks SkyDonate's centring of the intro line */
.ght .skd-dg__welcome-text { margin-left: auto; margin-right: auto; }
.ght .apst__body a:not(.skd-dg *, .apst__body .ght *) { color: var(--ght-blue-d); }
.ght .apst__body ul:not(.skd-dg *, .apst__body .ght *) { padding-left: 1.2em; list-style: disc; }
/* story and film (the appeal template's column) */
.ght.apst--parts .apst__text { max-width: 66ch; font-size: 17.5px; }
.ght.apst--parts .apst__text h3, .ght.apst--parts .apst__text h4 { margin-top: 1.4em; font-size: 19px; }
.ght .apst__pts { display: grid; gap: 10px; margin: 6px 0 4px; padding: 0; list-style: none; }
.ght .rich .apst__pts { padding-left: 0; list-style: none; }
.ght .apst__pts li { position: relative; margin: 0; padding: 14px 16px 14px 50px; border-radius: 14px; background: var(--ght-mist); font-size: 16px; line-height: 1.5; }
.ght .apst__pts li::before { content: ""; position: absolute; left: 16px; top: 16px; width: 22px; height: 22px; border-radius: 50%; background: var(--ght-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 14px no-repeat; }
.ght .apst__pts li b { display: block; color: var(--ght-ink); }
/* gifts with a price ("Water tanker £120"): pressing one puts the amount in the donation form */
.ght .apst__gifts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 10px 0 8px; padding: 0; list-style: none; }
.ght .rich .apst__gifts { padding-left: 0; list-style: none; }
.ght .apst__gifts li { display: flex; margin: 0; }
.ght .apst__gift, .ght .apst__gift:hover, .ght .apst__gift:focus { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name price" "desc desc"; align-content: start; gap: 6px 12px; width: 100%; margin: 0; padding: 18px; border: 1.5px solid var(--ght-line); border-radius: 16px; background: #fff; color: var(--ght-ink); font: inherit; text-align: left; text-transform: none; letter-spacing: 0; white-space: normal; overflow-wrap: anywhere; min-width: 0; cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s var(--ght-ease); }
.ght .apst__gift:hover { border-color: var(--ght-blue); box-shadow: 0 16px 34px -24px rgba(6, 20, 30, .5); transform: translateY(-2px); }
.ght .apst__gift.is-on { border-color: var(--ght-blue); box-shadow: inset 0 0 0 1.5px var(--ght-blue); }
.ght .apst__gift b { grid-area: name; font-size: 16.5px; font-weight: 800; line-height: 1.25; }
.ght .apst__price { grid-area: price; font-size: 20px; font-weight: 900; letter-spacing: -.02em; color: var(--ght-blue-d); }
.ght .apst__gift small { grid-area: desc; font-size: 14px; line-height: 1.5; color: var(--ght-mute); }
/* progress under the heading: raised of target, a bar marked at each quarter, three totals */
/* first in the section; a hairline parts it from "About this appeal" below */
.ght .apst__prog { margin: 0 0 24px; padding-bottom: 24px; border-bottom: 1px solid var(--ght-line); container-type: inline-size; }
.ght .apst__ptop { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ght .apst__raised { display: grid; gap: 2px; margin: 0; }
.ght .apst__raised b { font-size: 30px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: var(--ght-ink); }
.ght .apst__raised > span { font-size: 14px; color: var(--ght-mute); }
.ght .apst__pill { flex: none; padding: 4px 10px; border-radius: 999px; background: var(--ght-gold); color: var(--ght-ink); font-size: 13px; font-weight: 700; line-height: 1.3; white-space: nowrap; }
.ght .apst__bar { position: relative; height: 8px; border-radius: 999px; background: var(--ght-mist); box-shadow: inset 0 0 0 1px var(--ght-line); overflow: hidden; }
.ght .apst__fill { position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: inherit; background: var(--ght-blue); overflow: hidden; }
/* in view (story.js): the bar fills from the start while the amount rolls in, a light passes along it,
   and the badge settles when it's done. Without the script, or with reduced motion, it's simply full. */
.ght .apst__prog.is-armed .apst__fill { width: 0; transition: none; }
.ght .apst__prog.is-in .apst__fill { transition: width 1.8s cubic-bezier(.22, .8, .24, 1); }
.ght .apst__fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); transform: translateX(-100%); }
.ght .apst__prog.is-in .apst__fill::after { animation: ght-apst-sheen 1.4s .5s ease-out both; }
@keyframes ght-apst-sheen { to { transform: translateX(100%); } }
.ght .apst__prog.is-done .apst__pill { animation: ght-apst-pop .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes ght-apst-pop { 40% { transform: scale(1.08); } }
/* the raised amount as an odometer: each digit column is sized by an invisible copy of its final digit
   (Onest's own spacing), and its 0–9 strip is parked on that digit (--to = 10 + digit) */
.ght .apst__od { --lh: 1.1em; display: inline-flex; align-items: flex-start; }
.ght .apst__oc { position: relative; display: block; height: var(--lh); clip-path: inset(0 -.3em); }
.ght .apst__oc > i { display: block; font-style: normal; line-height: var(--lh); visibility: hidden; }
.ght .apst__os { position: absolute; top: 0; left: 50%; display: flex; flex-direction: column; transform: translate(-50%, calc(var(--to) * var(--lh) * -1)); }
.ght .apst__os span { display: block; height: var(--lh); line-height: var(--lh); text-align: center; }
.ght .apst__ox { display: block; line-height: var(--lh); }
.ght .apst__prog.is-armed .apst__os { transform: translate(-50%, 0); transition: none; }
.ght .apst__prog.is-rolling .apst__os { transition: transform var(--dur, 1.6s) cubic-bezier(.16, 1, .3, 1) var(--delay, 0s); }
.ght .apst__prog.is-rolling .apst__oc { -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); }
@media (prefers-reduced-motion: reduce) {
	.ght .apst__prog.is-armed .apst__fill { width: var(--p); }
	.ght .apst__prog.is-armed .apst__os { transform: translate(-50%, calc(var(--to) * var(--lh) * -1)); }
	.ght .apst__fill::after, .ght .apst__prog.is-done .apst__pill { animation: none; }
}
.ght .apst__bar i { position: absolute; top: 0; bottom: 0; width: 1.5px; margin-left: -.75px; background: rgba(11, 38, 56, .18); }
.ght .apst__marks { position: relative; display: flex; justify-content: space-between; height: 16px; margin: 6px 0 0; font-size: 12px; line-height: 16px; color: var(--ght-mute); }
.ght .apst__marks span[style] { position: absolute; top: 0; transform: translateX(-50%); }
.ght .apst__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.ght .apst__stat { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0; padding: 10px 12px; border: 1px solid var(--ght-line); border-radius: 12px; background: #fff; }
.ght .apst__si { display: grid; flex: none; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: #FDF1DA; color: #A86A06; }
.ght .apst__si svg { width: 16px; height: 16px; stroke-width: 2; }
/* Onest's own (proportional) figures: its fixed-width ones spread "£147,470" apart (user) */
.ght .apst__stat > span:last-child { display: grid; gap: 1px; min-width: 0; }
.ght .apst__stat b { font-size: 16px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; color: var(--ght-ink); white-space: nowrap; }
.ght .apst__stat small { font-size: 13px; font-weight: 400; line-height: 1.2; color: var(--ght-mute); }
/* narrow column: no room for the icon beside "£19,239", so the totals go without it */
@container (max-width: 480px) {
	.ght .apst__si { display: none; }
}
@media (max-width: 760px) {
	.ght .apst__marks span[style] { display: none; } /* 0 and the target only */
}
.ght .apst__film { margin-top: 28px; }
.ght .apst__film .pmedia { border-radius: 20px; overflow: hidden; }
.ght .apst__film .gtv { aspect-ratio: 16 / 9; }
.ght .apst__body iframe { max-width: 100%; border: 0; border-radius: 18px; }
.ght .apst__body .elementor-widget-video .elementor-wrapper { overflow: hidden; border-radius: 22px; }

/* ght-faq */
/* GHH Questions — heading (and topics) left, questions right. */
.ght .faq__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; gap: clamp(32px, 5vw, 96px); }
.ght .faq__side { position: sticky; top: calc(var(--ght-hdr) + var(--wp-admin--admin-bar--height, 0px) + 28px); }
.ght .faq__side .h2 { font-size: clamp(32px, 3.4vw, 52px); }
.ght .faq__side .lead { margin-top: 18px; }
.ght .faq__btns { margin-top: 26px; }
/* the questions: the design system's accordion (DESIGN-SYSTEM.md) — one card, hairline rows, a
   chevron in a ringed circle that turns when open, the open question in blue */
.ght .faq__list { overflow: hidden; border: 1px solid var(--ght-line); border-radius: var(--ght-r-l); background: #fff; }
.ght .faq__item + .faq__item { border-top: 1px solid var(--ght-line); }
.ght .faq__q { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 16px 20px; font-family: var(--ght-ui); font-size: 16px; font-weight: 600; line-height: 1.4; letter-spacing: 0; color: var(--ght-ink); list-style: none; cursor: pointer; transition: background-color .2s, color .2s; }
.ght .faq__q::-webkit-details-marker { display: none; }
.ght .faq__q:hover { background: var(--ght-page); }
.ght .faq__q i { position: relative; flex: none; width: 32px; height: 32px; border: 1px solid var(--ght-line); border-radius: 50%; background: #fff; color: var(--ght-ink); transition: border-color .2s, background-color .2s; }
.ght .faq__q i::before { content: ""; position: absolute; inset: 0; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 16px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform .25s var(--ght-ease); }
.ght .faq__item[open] .faq__q { color: var(--ght-blue-d); }
.ght .faq__item[open] .faq__q i { border-color: var(--ght-blue); color: var(--ght-blue-d); }
.ght .faq__item[open] .faq__q i::before { transform: rotate(180deg); }
.ght .faq__a { max-width: 68ch; padding: 0 20px 20px; font-size: 16px; line-height: 1.6; color: var(--ght-ink-2); animation: ght-faq-open .25s var(--ght-ease); }
@keyframes ght-faq-open { from { opacity: 0; transform: translateY(-4px); } }
/* dark sections: the same card, on the dark */
.ght.t-night .faq__list { border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); }
.ght.t-night .faq__item + .faq__item { border-color: rgba(255, 255, 255, .14); }
.ght.t-night .faq__q { color: #fff; }
.ght.t-night .faq__q:hover { background: rgba(255, 255, 255, .04); }
.ght.t-night .faq__q i { border-color: rgba(255, 255, 255, .24); background: transparent; color: #fff; }
.ght.t-night .faq__item[open] .faq__q { color: var(--ght-gold); }
.ght.t-night .faq__item[open] .faq__q i { border-color: var(--ght-gold); color: var(--ght-gold); }
@media (min-width: 961px) { .ght .faq__q { font-size: 17px; } }

/* topics list (guide pages) */
.ght .faq__nav { margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--ght-line); }
.ght .faq__navt { margin-bottom: 10px; font-size: 14px; font-weight: 700; color: var(--ght-mute); }
.ght .faq__nav ul { display: grid; gap: 2px; }
.ght .faq__nav a { display: block; padding: 8px 12px; margin-left: -12px; border-radius: 10px; font-size: 15.5px; font-weight: 600; text-decoration: none; color: var(--ght-ink-2); transition: background-color .2s, color .2s; }
.ght .faq__nav a:hover { background: var(--ght-mist); color: var(--ght-ink); }
.ght .faq__nav a[aria-current] { background: var(--ght-ink); color: #fff; }

@media (max-width: 960px) {
	.ght .faq__grid { grid-template-columns: minmax(0, 1fr); }
	.ght .faq__side { position: static; }
	/* topics move under the questions on phones */
	.ght.faq--nav .faq__grid { display: flex; flex-direction: column; }
	.ght.faq--nav .faq__nav { order: 3; }
	.ght.faq--nav .faq__side { display: contents; }
	.ght.faq--nav .faq__list { order: 2; }
}

/* donation-card */
.donation-card {
    background-color: #3340ac;
    color: white;
    border-radius: 10px;
}

.donation-card .donation-image {
    position: relative;
}

.donation-card .donation-image .play-button {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 2;
    background-color: white;
    color: black;
    border-radius: 999px;
    overflow: hidden;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}


.donation-card .donation-image .play-button i:before {
    content: "\f101";
    font-family: "woodmart-font";
}

.donation-card .donation-image .play-button i {
    font-style: normal;
    width: 50px;
    height: 50px;
    display: inline-block;
    text-align: center;
    font-size: 18px;
    line-height: 50px;
    border-radius: 99px;
    background-color: white;
    z-index: 2;
    padding-left: 3px;
}

.donation-card .donation-image .play-button span {
    display: inline-block;
    padding-right: 30px;
    margin-left: -104px;
    transition: .3s;
}

.donation-card .donation-image .play-button:hover span {
    margin-left: 0px;
}
.donation-card .donation-image a {
    display: block;
}

.donation-card .donation-image img {
    border-radius: 10px;
}

.donation-card .donation-content {
    padding: 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.donation-card .donation-content > .row {
    margin-top: auto;
}

.donation-card .donation-content .donation-title a {
    color: white;
    display: inline-block;
}

.donation-card .donation-content .donation-title {
    margin-bottom: 12px;
    margin-top: -5px;
    font-size: 23px;
    font-weight: 600;
}

.donation-card .donation-content .donation-short-description {
    color: #fffc;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 20px;
}

.donation-card .donation-content .donation-button {
    color: currentColor;
    font-size: 12px;
    background-color: #e10130;
    display: block;
    border-radius: 50px;
    padding: 10px;
    text-transform: uppercase;
    font-weight: 600;
    transition: .3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0px;
    width: 100%;
    line-height: 1.34em;
    height: auto;
    min-height: inherit;
}

.donation-card .donation-content .donation-button .e-font-icon-svg {
    width: 12px;
    margin-left: 8px;
    color: currentColor;
    fill: currentColor;
}

.donation-card .donation-content .donation-button .icon {
    margin-left: 8px;
}

.donation-card .donation-content .donation-button.white-button {
    background-color: white;
    color: #3340ac;
}

.button-loader {
    position: relative;
    width: 0px;
    height: 0px;
}

.button-loader:before {
    content: "";
    border: 2px solid currentColor;
    border-left-color: transparent;
    animation: spin 1s linear infinite;
    width: 14px;
    height: 14px;
    display: block;
    border-radius: 50%;
    position: absolute;
    left: 5px;
    top: 2px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.donation-card .donation-content .donation-button:hover {
    background-color: white;
    color: #e10130;
}

.donation-card .donation-content .donation-button.white-button:hover {
    background-color: black;
    color: currentColor;
}


.donation-card .donation-content .donation-details {
    display: flex;
    justify-content: space-between;
    color: currentColor;
    font-weight: 600;
    margin-top: 12px;
    line-height: 1.2em;
    text-align: center;
}

.layout1 .donation-card .donation-content .donation-details > span {
    min-width: 30%;
}

.donation-card .donation-content .donation-details .amount {
    display: block;
}

.donation-card .donation-content .donation-details .raised-amount {
    text-align: left;
}

.donation-card .donation-content .donation-details .target-amount {
    text-align: right;
}

.donation-card .donation-content .donation-details .amount {
    color: currentColor;
}

.donation-card .donation-progress {
    width: 100%;
    height: 12px;
    background-color: #dadfdc;
    border-radius: 99px;
    margin-top: 24px;
    overflow: hidden;
}

.donation-card .donation-progress .progress-bar {
    width: 0%;
    height: 100%;
    background: #6bb766;
    border-radius: 99px;
}


button.lity-close {
    position: absolute;
    top: -40px; /* Adjust for visibility */
    right: 0px; /* Ensure placement */
    width: 30px;
    height: 30px;
    overflow: hidden;
    text-indent: -99999px;
    font-size: 18px;
    line-height: 18px;
    padding: 0px;
    min-height: 30px;
    background-color: red;
    border-radius: 99px;
    cursor: pointer;
}

button.lity-close:hover {
    background-color: darkred; /* Better hover effect */
    color: white;
    font-size: 18px !important;
    line-height: 18px !important;
}


button.lity-close:before {
    content: "\f112";
    font-family: "woodmart-font";
    display: block;
    font-size: 18px;
    position: absolute;
    left: 50%;
    top: 50%;
    text-indent: 0px;
    transform: translate(-50%, -50%);
    color: white;
}

.layout2 .donation-card .donation-content .donation-details {
    margin: 0;
}

.layout2 .donation-card .donation-content .donation-details > span {
    display: flex;
    flex-wrap: wrap;
}

.layout2 .donation-card .donation-content .donation-details .amount {
    margin-left: 5px;
}

.layout2 .donation-card .donation-progress {
    margin-top: 8px;
}

.layout2 .donation-card .percentage {
    text-align: right;
    font-size: 12px;
    margin-bottom: 8px;
    margin-top: 3px;
}

.layout2 .donation-card .donation-content .donation-button {
    max-width: 200px;
    display: inline-block;
    padding: 5px 5px 5px 24px;
    line-height: 36px;
    text-align: left;
    background-color: white;
    color: #0C5EBA;
}

.layout2 .donation-card .donation-content .donation-button .icon {
    width: 36px;
    height: 36px;
    line-height: 1em;
    background-color: #0C5EBA;
    color: white;
    text-align: center;
    border-radius: 99px;
    float: right;
    margin-left: -10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.layout2 .donation-card .donation-content .donation-button:hover {
    background-color: #eeac2d;
    color: #ffffff;
}

.layout2 .donation-card .donation-content .donation-button .icon svg {
    margin: 0;
}

.layout2 .donation-card .donation-content .donation-title {
    margin-bottom: 16px;
}

.layout2 .donation-card .donation-content .donation-short-description {
    margin-bottom: 24px;
}

.layout2 .donation-card {
    border-bottom: 5px solid #eeac2d;
    background-color: #0C5EBA;
}


.donation-card .donation-content .icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.layout2 .donation-card .card-icon {
    font-size: 40px;
    line-height: 1em;
    margin-bottom: 20px;
    position: relative;
    z-index: 3;
    display: inline-flex;
    width: 80px;
    height: 80px;
    background-color: #e30a6c;
    align-items: center;
    justify-content: center;
    border-radius: 99px;
}

.donation-card .donation-content .icon-wrapper .card-icon {
    display: flex;
}

.layout2 .donation-card .card-icon span {
    display: inline-block;
}

.layout2 .donation-card .card-icon img {
    width: 40px;
}

.layout2 .donation-card .card-icon svg {
    width: 40px;
    height: 40px;
    fill: currentColor;
}

.donation-cards-wrapper {
  display: flex;
  flex-wrap: wrap;
}

.donation-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 400px;
}

/* ght-skydonate */
/* ==========================================================================
 * SkyDonate, dressed in the GHH look. The markup, amounts, Once/Monthly,
 * Zakat note and the add-to-basket all stay SkyDonate's; only the look changes.
 *
 * .ght-sd--dock  the hero form as one glass bar over the film
 * .quick-modal   the quick-donate pop-up (urgent appeal cards)
 * ======================================================================== */

/* ── the hero bar ── */
.ght .ght-sd--dock .donation-form-wrapper { width: fit-content; max-width: 100%; }
.ght .ght-sd--dock form.donation-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 8px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; background: rgba(6, 20, 30, .45); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); box-shadow: none; color: #fff; }
.ght .ght-sd--dock .donation-box-title { display: none; }

/* Once / Monthly */
.ght .ght-sd--dock .donation-type-switch { display: flex; gap: 0; width: auto; margin: 0; padding: 4px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .12); }
.ght .ght-sd--dock .donation-type-switch .donation-type-btn { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 42px; margin: 0; padding: 0 16px; border: 0; border-radius: 999px; background: none; background-image: none; color: rgba(255, 255, 255, .85); font-family: var(--ght-f); font-size: 15px; font-weight: 700; line-height: 1; box-shadow: none; cursor: pointer; }
.ght .ght-sd--dock .donation-type-switch .donation-type-btn::before, .ght .ght-sd--dock .donation-type-switch .donation-type-btn::after { display: none; }
.ght .ght-sd--dock .donation-type-switch .donation-type-btn.active { background: #fff; color: var(--ght-ink); }
.ght .ght-sd--dock .donation-type-btn .heart-icon { display: none; }

/* amounts */
.ght .ght-sd--dock .donation-amount-groups { display: contents; }
.ght .ght-sd--dock .donation-amount-group { display: none; }
.ght .ght-sd--dock .donation-amount-group.active { display: block; }
.ght .ght-sd--dock .donation-buttons { display: flex; flex-wrap: nowrap; gap: 6px; margin: 0; }
.ght .ght-sd--dock .donation-buttons .donation-btn { position: relative; flex: 0 0 auto; width: auto; min-width: 66px; height: 50px; min-height: 50px; margin: 0; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; background: none; background-image: none; color: #fff; font-family: var(--ght-f); font-size: 17px; font-weight: 800; box-shadow: none; cursor: pointer; transition: border-color .15s, background-color .15s, color .15s; }
.ght .ght-sd--dock .donation-buttons .donation-btn::before, .ght .ght-sd--dock .donation-buttons .donation-btn::after { display: none; }
.ght .ght-sd--dock .donation-buttons .donation-btn:hover { border-color: #fff; background-color: transparent; color: #fff; }
.ght .ght-sd--dock .donation-buttons .donation-btn.active { border-color: #fff; background-color: #fff; color: var(--ght-ink); }
.ght .ght-sd--dock .donation-buttons .donation-btn { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.ght .ght-sd--dock .donation-btn .price, .ght .ght-sd--dock .donation-btn .currency-symbol { margin: 0; padding: 0; color: inherit; font: inherit; line-height: 1; }

/* custom amount */
.ght .ght-sd--dock .donation-amount-groups .donation-custom { position: relative; display: flex; flex: 0 0 auto; align-items: center; width: 132px; height: 50px; min-height: 50px; margin: 0; padding: 0 14px 0 34px; overflow: visible; border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; background-color: transparent; }
.ght .ght-sd--dock .donation-amount-groups .donation-custom:focus-within { border-color: #fff; }
/* the £ (SkyDonate lets it switch currency: the select sits invisibly over it) */
.ght .ght-sd--dock .donation-amount-groups .donation-custom .skydonate-currency-wrapper { position: absolute; left: 10px; top: 0; bottom: 0; display: flex; align-items: center; width: 22px; height: auto; margin: 0; padding: 0; overflow: hidden; border: 0; background: none; }
.ght .ght-sd--dock .donation-amount-groups .donation-custom .skydonate-currency-wrapper .currency-symbol { min-width: 0; width: 100%; height: auto; padding: 0; border-radius: 0; background: none; color: #fff; font-size: 17px; font-weight: 800; }
.ght .ght-sd--dock .donation-custom .skydonate-currency-select { inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ght .ght-sd--dock .donation-custom input.custom-amount-input { width: 100%; min-width: 0; height: 48px; margin: 0; padding: 0; border: 0; outline: 0; background: none; box-shadow: none; color: #fff; font-family: var(--ght-f); font-size: 17px; font-weight: 800; -moz-appearance: textfield; appearance: textfield; }
.ght .ght-sd--dock .donation-custom input.custom-amount-input::-webkit-outer-spin-button, .ght .ght-sd--dock .donation-custom input.custom-amount-input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
/* the bar has no room for SkyDonate's "Custom Amount" label (it sat over the amount); hidden even if its script shows it */
.ght .ght-sd--dock .donation-custom .custom-placeholder { display: none !important; }

/* Donate: SkyDonate's app-style button ("Donate now  £55  ›"), sized to its words.
   Its stylesheet sets the button with !important, so the bar has to as well. */
.ght .ght-sd--dock .donation-form-wrapper .form-submit-button { flex: 0 0 auto; gap: 10px !important; width: auto !important; height: 50px !important; min-height: 50px !important; margin: 0; padding: 0 22px 0 26px !important; border-radius: 999px; background: var(--ght-btn); background-image: none; box-shadow: none; text-transform: none; transition: background-color .2s, box-shadow .2s !important; }
.ght .ght-sd--dock .donation-form-wrapper .form-submit-button:hover { background: var(--ght-blue-d); background-image: none; filter: none !important; box-shadow: 0 10px 30px -10px rgba(27, 157, 217, .8); }
.ght .ght-sd--dock .form-submit-button > span { font-family: var(--ght-f); font-size: 17px; font-weight: 700; color: #fff; text-transform: none; }
.ght .ght-sd--dock .form-submit-button .skd-app-cta__spacer, .ght .ght-sd--dock .form-submit-button .skd-app-cta__code { display: none !important; }
.ght .ght-sd--dock .form-submit-button .skd-app-cta__amount { font-weight: 800; opacity: 1; color: #fff; }
.ght .ght-sd--dock .form-submit-button .skd-app-cta__chevron { display: flex; }
.ght .ght-sd--dock .form-submit-button svg { width: 18px; height: 18px; }
.ght .ght-sd--dock .sky-daily-note:empty { display: none; }

/* notes SkyDonate adds (Zakat, daily dates): small, under the bar */
.ght .ght-sd--dock .zakat-applicable { display: flex; align-items: center; justify-content: flex-start; gap: 6px; text-align: left; margin: 12px 0 0 6px; padding: 0; border: 0; background: none; color: rgba(255, 255, 255, .75); font-size: 13px; font-weight: 600; }
.ght .ght-sd--dock .zakat-applicable i { color: var(--ght-gold); }

/* phones: a rounded panel, the amounts in a grid */
@media (max-width: 760px) {
	.ght .ght-sd--dock .donation-form-wrapper { width: 100%; }
	.ght .ght-sd--dock form.donation-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 10px; border-radius: 22px; }
	.ght .ght-sd--dock .donation-type-switch { grid-column: 1 / -1; }
	.ght .ght-sd--dock .donation-type-switch .donation-type-btn { flex: 1; justify-content: center; }
	.ght .ght-sd--dock .donation-amount-group.active { grid-column: 1 / -1; }
	.ght .ght-sd--dock .donation-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ght .ght-sd--dock .donation-buttons .donation-btn { min-width: 0; width: 100%; padding: 0 6px; }
	.ght .ght-sd--dock .donation-amount-groups .donation-custom { grid-column: 1 / -1; width: 100%; }
	.ght .ght-sd--dock .donation-form-wrapper .form-submit-button { grid-column: 1 / -1; width: 100% !important; justify-content: center !important; }
}

/* ── quick-donate pop-up: GHH type and colours ── */
.quick-modal .donation-form, .quick-modal .donation-form button, .quick-modal .donation-form input { font-family: var(--ght-f); }
/* the small currency code after the amount on a donate button: white, not a faded blue (AA) */
.ght .form-submit-button .skd-app-cta__code { color: #fff !important; opacity: 1 !important; }