/*
 * Gianna — Sept 17 feedback components.
 *
 * Served as a real stylesheet, NOT as an inline wp_head <style>. WP Rocket's Remove Unused CSS
 * empties every inline style block on this site (verified 2026-09-22: <style id="..."></style>
 * with the contents gone, on the plain URL, with the used-css table empty and Kinsta's cache
 * purged). Inline CSS is therefore not a delivery mechanism here. Enqueued and excluded from
 * optimisation in gianna-sept17-components.php.
 */
/* ---- 6-card hover-reveal grid ------------------------------------ */
.gianna-hovercard-grid > .e-con,
.gianna-hovercard {
	flex: 1 1 calc(33.333% - 14px);
	max-width: calc(33.333% - 14px);
	min-width: 0;
}
.gianna-hovercard {
	position: relative;
	overflow: hidden;
	border-radius: 10px;
	isolation: isolate;
}
/* Kept light: the title plate now carries the contrast, so this only stops the photo
   from running bright right up to the plate's edge. */
.gianna-hovercard::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient( 180deg, rgba(0,0,0,.06) 40%, rgba(0,0,0,.42) 100% );
	transition: background .3s ease;
}
.gianna-hovercard > * { position: relative; z-index: 1; }

/* ---- the title plate --------------------------------------------- */
.gianna-hovercard .gianna-hovercard__title {
	margin: 0;
	padding: 12px 16px;
	border-radius: 8px;
	/* Flat, not backdrop-filter: a backdrop-filter that fails to composite (headless,
	   software rendering, older Safari) can take the element's own background down with
	   it, which is exactly the legibility this plate exists to guarantee. */
	background: rgba(0,0,0,.62);
}
.gianna-hovercard .gianna-hovercard__title h1,
.gianna-hovercard .gianna-hovercard__title h2,
.gianna-hovercard .gianna-hovercard__title h3,
.gianna-hovercard .gianna-hovercard__title h4 {
	margin: 0;
	color: #FFFFFF;
	text-shadow: none;
}

/* ---- the reveal panel, centred on both axes ----------------------- */
.gianna-hovercard .gianna-hovercard__panel {
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(100% - 36px);
	max-width: calc(100% - 36px);
	max-height: calc(100% - 36px);
	z-index: 2;
	overflow: auto;
	padding: 16px 18px;
	border-radius: 8px;
	background: rgba(255,255,255,.96);
	color: #3D3D3D;
	opacity: 0;
	transform: translate(-50%, calc(-50% + 8px));
	pointer-events: none;
	transition: opacity .3s ease, transform .3s ease;
}
.gianna-hovercard:hover .gianna-hovercard__panel,
.gianna-hovercard:focus-within .gianna-hovercard__panel {
	opacity: 1;
	transform: translate(-50%, -50%);
	pointer-events: auto;
}
.gianna-hovercard:hover::after,
.gianna-hovercard:focus-within::after {
	background: linear-gradient( 180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.62) 100% );
}
.gianna-hovercard .gianna-hovercard__panel ul {
	margin: 0;
	padding-left: 20px;
}
.gianna-hovercard .gianna-hovercard__panel p:last-child { margin-bottom: 0; }
.gianna-hovercard .gianna-hovercard__btn .elementor-button {
	background-color: #0075C9;
	color: #FFFFFF;
}

@media (max-width: 1024px) {
	.gianna-hovercard-grid > .e-con,
	.gianna-hovercard { flex-basis: calc(50% - 10px); max-width: calc(50% - 10px); }
}

/* No hover on touch: lay the panel out in normal flow, TITLE FIRST. */
@media (hover: none), (max-width: 767px) {
	.gianna-hovercard-grid > .e-con,
	.gianna-hovercard {
		flex-basis: 100%;
		max-width: 100%;
		min-height: 0;
	}
	.gianna-hovercard { flex-direction: column; }
	.gianna-hovercard .gianna-hovercard__title { order: -1; margin-bottom: 12px; }
	.gianna-hovercard .gianna-hovercard__panel {
		position: static;
		width: auto;
		max-width: 100%;
		max-height: none;
		opacity: 1;
		transform: none;
		pointer-events: auto;
	}
	.gianna-hovercard::after {
		background: linear-gradient( 180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.62) 100% );
	}
}

/* ---- pull-quote treatment ---------------------------------------- */
/* Anna, 23 Sept: "remove the dark blue background behind all of the quotes so it's just the lighter
 * backsplash box with the quote inside". The band behind each quote is gone (Elementor), so the
 * bubble now stands on the page ground: a light tint of Pantone 3005 with ink text (14.7:1). */
.gianna-quote .elementor-widget-container {
	position: relative;
	padding: 26px 28px 22px 58px;
	border-radius: 12px;
	background: #E1EEF8;
}
.gianna-quote .elementor-widget-container,
.gianna-quote .elementor-widget-container p,
.gianna-quote .elementor-widget-container em { color: #1A1A1A !important; }
.gianna-quote .elementor-widget-container::before {
	content: "\201C";
	position: absolute;
	left: 16px;
	top: 2px;
	font-size: 64px;
	line-height: 1;
	color: #0075C9;
	opacity: .55;
	font-family: Georgia, "Times New Roman", serif;
}
.gianna-quote .elementor-widget-container::after {
	content: "";
	position: absolute;
	left: 46px;
	bottom: -14px;
	width: 0;
	height: 0;
	border: 14px solid transparent;
	border-top-color: #E1EEF8;
	border-bottom: 0;
}

/* ---- "such as" list spacing (her "add space here" note) ----------- */
ul.gianna-spaced-list { margin-top: 14px; }

/* ---- shop pagination -----------------------------------------------------
 * Anna, Market Sales Page screenshot: "vertical bullet point page lists are showing up in some
 * places -- please change to [numbered boxes]". The theme was rendering WooCommerce's paginator
 * as a plain bulleted <ul>, one page number per line.
 */
.woocommerce-pagination ul.page-numbers,
nav.woocommerce-pagination ul,
.ast-pagination .page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	list-style: none;
	margin: 32px 0 0;
	padding: 0;
	border: 0;
}
.woocommerce-pagination ul.page-numbers li,
nav.woocommerce-pagination ul li {
	list-style: none;
	margin: 0;
	border: 0;
	display: block;
}
.woocommerce-pagination ul.page-numbers li::marker,
nav.woocommerce-pagination ul li::marker { content: none; }

.woocommerce-pagination .page-numbers a,
.woocommerce-pagination .page-numbers span,
nav.woocommerce-pagination .page-numbers a,
nav.woocommerce-pagination .page-numbers span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	border: 1px solid #A7BCD7;
	border-radius: 6px;
	background: #FFFFFF;
	color: #0075C9;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.woocommerce-pagination .page-numbers a:hover,
nav.woocommerce-pagination .page-numbers a:hover {
	background: #FCF7FC;
	border-color: #0075C9;
}
.woocommerce-pagination .page-numbers .current,
nav.woocommerce-pagination .page-numbers .current {
	background: #0075C9;
	border-color: #0075C9;
	color: #FFFFFF;
}
.woocommerce-pagination .page-numbers .dots,
nav.woocommerce-pagination .page-numbers .dots {
	border-color: transparent;
	background: transparent;
	color: #3D3D3D;
}

/* ---- Featured Products sidebar ------------------------------------------ */
.astra-woo-shop-sidebar .wp-block-woocommerce-handpicked-products ul.wc-block-grid__products,
.widget_block .wp-block-woocommerce-handpicked-products ul.wc-block-grid__products {
	list-style: none;
	padding-left: 0;
}


/* ---- from gianna-commerce-chrome.php: commerce chrome — shop UI kept off non-shop pages ----------------------------- */
/*
 * 2026-09-23: this block was broken by the 22 Sept migration itself. The regex that lifted
 * the CSS out of gianna-commerce-chrome.php copied the PHP string concatenation verbatim,
 * which is not CSS, so the browser dropped the rule and the cart total, account icon and
 * floating cart came back on every page. Written out by hand now.
 *
 * Non-commerce pages: the header keeps ONLY the basket icon.
 */
body:not(.gc-commerce) .ast-woo-header-cart-info-wrap,
body:not(.gc-commerce) .ast-header-account,
body:not(.gc-commerce) .ast-header-account-wrap {
	display: none !important;
}
/* The Modern Cart floating bubble is off everywhere, commerce pages included (JM, 2026-09-23). */
#moderncart-floating-cart,
.moderncart-floating-cart {
	display: none !important;
}

/* ---- from gianna-footer-divider.php: footer centre-column dotted rule ----------------------------- */
/* Anna, 23 Sept: "Take out the line separating 'Catholic Social Services' and our social media
 * buttons and centre the buttons underneath the two columns." The dotted rule above is removed. */
.site-footer-primary-section-2 [data-section="section-fb-social-icons-1"] {
	padding-top: 14px;
	margin-top: 14px;
	justify-content: center;
}
.site-footer-primary-section-2 .ast-footer-social-1-wrap { width: 100%; text-align: center; }
.site-footer-primary-section-2 .footer-social-inner-wrap { justify-content: center; }

/* "divide the column of 8 into columns of 4": two columns, filled top-to-bottom like her example. */
.site-footer #menu-secondary-menu {
	display: grid;
	grid-template-rows: repeat(4, auto);
	grid-auto-flow: column;
	grid-auto-columns: max-content;
	justify-content: center;
	column-gap: 48px;
	row-gap: 2px;
}
.site-footer #menu-secondary-menu li { text-align: left; }

/* "Change the blurb font to be the same as the website menu font, and adjust the logo and the blurb
 * to be centred with the website menu." / "could the hyperlink to CSS in the blurb be underlined". */
.site-primary-footer-inner-wrap { align-items: center; }
.site-footer-section-3 .widget_block p {
	font-family: inherit;
	font-style: normal;
	font-weight: 400;
	font-size: inherit;
	line-height: inherit;
}
.site-footer-section-3 .widget_block p strong,
.site-footer-section-3 .widget_block p em { font-weight: inherit; font-style: normal; }
.site-footer-section-3 .widget_block a { text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 921px) {
	.site-footer #menu-secondary-menu { column-gap: 32px; }
}


/* ---- from gianna-contrast-fixes.php: WCAG contrast fixes ----------------------------- */
/* Restored 2026-09-23. The 22 Sept migration copied printf's "%s" placeholder here instead of the
 * CSS, so "Powered by Sojourn Digital" went dark grey on the blue footer (visible in Anna's own
 * 23 Sept screenshot) and shop category labels went back to 55% opacity. */
.woocommerce ul.products li.product .ast-woo-product-category,
.woocommerce-page ul.products li.product .ast-woo-product-category{opacity:1;}
.footer-widget-area .ast-builder-html-element,
.footer-widget-area .ast-builder-html-element p,
.site-footer .ast-builder-html-element,
.site-footer .ast-builder-html-element p{color:var(--ast-global-color-5);}
.footer-widget-area .ast-builder-html-element a,
.footer-widget-area .ast-builder-html-element a:visited,
.site-footer .ast-builder-html-element a,
.site-footer .ast-builder-html-element a:visited{color:#70d0ec;}
.footer-widget-area .ast-builder-html-element a:hover,
.footer-widget-area .ast-builder-html-element a:focus,
.site-footer .ast-builder-html-element a:hover,
.site-footer .ast-builder-html-element a:focus{color:var(--ast-global-color-5);}


/* ---- from gianna-brand-guard.php: third-party palette/typeface overrides ----------------------------- */
:root {
	--pc-primary:   #0075C9;
	--pc-secondary: #005A9C;
	--pc-accent:    #DD9CDF;
	--pc-danger:    #E2885A;
	--pc-text:      #3D3D3D;
	--pc-muted:     #A7BCD7;
	--pc-bg:        #FFFFFF;
}
.power-coupons-list,
.power-coupons-list .power-coupons-apply-coupon-btn,
.power-coupons-list .power-coupons-coupon-status {
	font-family: 'Lato', sans-serif;
}
.power-coupons-list .power-coupons-coupon-status { fill: #3D3D3D; }
.site .skip-link { font-family: 'Lato', sans-serif; }

/* ---- social icon buttons -------------------------------------------------
 * Inline SVG, not Font Awesome. The FA route resolved correctly in every computed value —
 * content f16d, family "Font Awesome 5 Brands", weight 400, face reported loaded — and still
 * painted blank circles in a real browser, with no readable @font-face for that family in any
 * same-origin sheet. SVG has no font dependency and nothing for RUCSS to prune.
 */
.gianna-home-social,
.gianna-market-social {
	display: flex;
	align-items: center;
	gap: 12px;
}
.gianna-home-social { justify-content: flex-start; }
.gianna-home-social .gianna-soc,
.gianna-market-social .gianna-soc {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}
.gianna-home-social .gianna-soc { background: #FFFFFF; color: #0075C9; }
.gianna-home-social .gianna-soc:hover,
.gianna-home-social .gianna-soc:focus { background: #FFFFFF; color: #005A9C; box-shadow: 0 0 0 3px #0075C9, 0 0 0 5px #FFFFFF; }
.gianna-market-social .gianna-soc { background: #0075C9; color: #FFFFFF; }
.gianna-market-social .gianna-soc:hover,
.gianna-market-social .gianna-soc:focus { background: #005A9C; color: #FFFFFF; }

@media (max-width: 767px) {
	.gianna-home-social { justify-content: center; }
}

/* ---- donation page: $50 / $100 / $500 quick-pick (Anna, 23 Sept) ------------------------
 * The Square variation swatch is hidden; the typed amount is what's charged. */
body.gianna-donation form.variations_form table.variations,
body.gianna-donation form.variations_form .reset_variations { display: none !important; }
.gianna-donation-presets { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
.gianna-donation-presets button {
	min-width: 88px; padding: 10px 18px; border: 2px solid #0075C9; border-radius: 6px;
	background: #fff; color: #0075C9; font-weight: 700; font-size: 16px; line-height: 1.2; cursor: pointer;
}
.gianna-donation-presets button:hover,
.gianna-donation-presets button:focus-visible { background: #005A9C; border-color: #005A9C; color: #fff; }
.gianna-donation-presets button[aria-pressed="true"] { background: #0075C9; color: #fff; }

/* ---- Home: "Run by Gianna Moms" card (Anna, 23 Sept) ---------------------------------------
 * "when you scroll over the picture, have a brief description of the Market pop up". The card
 * matches its two neighbours; the description covers the card on hover or keyboard focus, and on
 * touch screens (no hover) it simply shows under the title. Panel is Pantone 3005, white text 4.8:1. */
.gianna-momscard { position: relative; overflow: hidden; }
.gianna-momscard .gianna-momscard__pop {
	/* JM 23 Sept: the reveal covers only the photo band. Title and button stay visible and clickable. */
	position: absolute; top: auto; left: 0; right: 0; bottom: 0; height: 225px; overflow: auto; z-index: 3;
	margin: 0 !important; width: 100% !important;
	display: flex; align-items: center; justify-content: center;
	padding: 14px 22px; background: #0075C9 !important; border-radius: 0 0 8px 8px;
	opacity: 0; transition: opacity .2s ease;
}
.gianna-momscard .gianna-momscard__pop .elementor-widget-container,
.gianna-momscard .gianna-momscard__pop p { color: #fff; font-size: 14px; line-height: 1.45; margin: 0; text-align: center; }
@media (hover: hover) {
	/* Anna, 9.23: "when you scroll over the picture, have a brief description of the Market pop up". */
	.gianna-momscard .gianna-momscard__pop:hover,
	.gianna-momscard:focus-within .gianna-momscard__pop { opacity: 1; }
}
@media (hover: none) {
	.gianna-momscard .gianna-momscard__pop {
		position: static; opacity: 1; visibility: visible; background: none; padding: 8px 0 0; width: 100% !important;
		justify-content: flex-start;
	}
	.gianna-momscard .gianna-momscard__pop .elementor-widget-container,
	.gianna-momscard .gianna-momscard__pop p { color: #3D3D3D; text-align: left; font-size: 15px; }
}

/* ---- product photos visible before JavaScript (found 23 Sept) ------------------------------
 * WooCommerce renders every product gallery at opacity:0 and fades it in from wc-single-product.js.
 * WP Rocket's Delay JS holds that script until the visitor's first interaction, so on every
 * product page the photo — the page's main image — stayed invisible until a scroll or tap.
 * The first image needs no script to display; the gallery still initialises when the JS runs. */
.woocommerce-product-gallery { opacity: 1 !important; }

/* ---- hover and focus states on blue backgrounds (JM, 23 Sept: "check on the blue on blue hover
 * accessibility contrast in the footer and anywhere else a hover link is blue on a blue background").
 * Measured on #0075C9: Astra's cyan hover #70D0EC was 2.72:1 (text needs 4.5), the footer social
 * icons hovered to #0075C9 = 1.0:1 (vanished), the home social icons hovered to blue-on-cyan 2.72:1
 * (icons need 3:1), and the Get Help button hovered to #005A9C, 1.49:1 against its band.
 * Rule used everywhere on blue: text and icons stay WHITE (4.79:1); hover/focus is shown by an
 * underline for links, and by inverting to a white fill for icons and buttons. */
.site-footer a,
.site-footer a:visited { color: #FFFFFF !important; }
.site-footer a:hover,
.site-footer a:focus { color: #FFFFFF !important; text-decoration: underline !important; text-underline-offset: 3px; }
.site-footer a:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
/* "Powered by Sojourn Digital" sits in running white text, so the link is underlined at rest too. */
.site-footer .ast-builder-html-element a { text-decoration: underline !important; text-underline-offset: 3px; }
.site-footer .ast-builder-social-element { border-radius: 50%; padding: 6px; transition: background .15s ease; }
.site-footer .ast-builder-social-element svg { fill: #FFFFFF !important; }
.site-footer .ast-builder-social-element:hover,
.site-footer .ast-builder-social-element:focus { background: #FFFFFF; text-decoration: none !important; }
.site-footer .ast-builder-social-element:hover svg,
.site-footer .ast-builder-social-element:focus svg { fill: #0075C9 !important; }
/* Home "Get Help" button on the blue band: invert to white on hover/focus (white vs band 4.79:1,
 * ink text 17.4:1) instead of the theme default dark blue that melted into the band. */
.elementor-element-b8121aa .elementor-button:hover,
.elementor-element-b8121aa .elementor-button:focus { background-color: #FFFFFF !important; color: #1A1A1A !important; border-color: #FFFFFF !important; }
.elementor-element-b8121aa .elementor-button:hover .elementor-button-icon svg,
.elementor-element-b8121aa .elementor-button:focus .elementor-button-icon svg { fill: #1A1A1A; }

/* ── Round 41 (JM, 23 Sept) ───────────────────────────────────────────── */

/* Buttons: blue buttons turn white on hover; white buttons turn blue. Every button carries a
   2px blue outline so a white one stays visible on a light background (WCAG 1.4.11, 3:1).
   Blue #0075C9 on white = 4.79:1; white on #0075C9 = 4.79:1. */
.elementor-button,
.wpforms-container .wpforms-submit,
.woocommerce a.button, .woocommerce button.button, .woocommerce .single_add_to_cart_button,
.wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button {
	border: 2px solid #0075C9 !important;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.elementor-button:hover, .elementor-button:focus-visible,
.wpforms-container .wpforms-submit:hover, .wpforms-container .wpforms-submit:focus-visible,
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce .single_add_to_cart_button:hover,
.wc-block-cart__submit-button:hover, .wc-block-components-checkout-place-order-button:hover {
	background-color: #FFFFFF !important;
	color: #0075C9 !important;
	border-color: #0075C9 !important;
}
.elementor-button:hover svg, .elementor-button:focus-visible svg { fill: currentColor !important; }
/* The white buttons (Donate Now on /gianna-centre/, All Kitchen on the home page): outlined at rest, blue on hover. */
.elementor-element-a0287bf .elementor-button, .elementor-element-f054528 .elementor-button {
	background-color: #FFFFFF !important; color: #1A1A1A !important; border-color: #0075C9 !important;
}
.elementor-element-a0287bf .elementor-button:hover, .elementor-element-a0287bf .elementor-button:focus-visible,
.elementor-element-f054528 .elementor-button:hover, .elementor-element-f054528 .elementor-button:focus-visible {
	background-color: #0075C9 !important; color: #FFFFFF !important; border-color: #0075C9 !important;
}
.elementor-button:focus-visible { outline: 2px solid #1A1A1A; outline-offset: 2px; }

.elementor-element-b8121aa .elementor-button { border-color: #FFFFFF !important; }

/* Home shop cards: one-line titles on desktop, and every button on the same line whether or not
   the card has a description (the text block grows to fill; the button sits under it). */
@media (min-width: 1025px) {
	.elementor-8390 .elementor-element-7a5a915,
	.elementor-8390 .elementor-element-838e544,
	.elementor-8390 .elementor-element-mkmomsib {
		flex-grow: 1 !important;
		--container-widget-width: 100%;
		width: 100% !important; max-width: 100% !important;
	}
	.elementor-8390 .elementor-element-7a5a915 .elementor-image-box-title,
	.elementor-8390 .elementor-element-838e544 .elementor-image-box-title,
	.elementor-8390 .elementor-element-mkmomsib .elementor-image-box-title,
	.elementor-8390 .elementor-element-7a5a915 .elementor-image-box-title a,
	.elementor-8390 .elementor-element-838e544 .elementor-image-box-title a,
	.elementor-8390 .elementor-element-mkmomsib .elementor-image-box-title a {
		font-size: clamp(18px, 2.2vw, 26px) !important;
		line-height: 1.2 !important;
		white-space: nowrap;
	}
	.elementor-8390 .elementor-element-7a5a915 > .elementor-widget-container { padding-top: 5px !important; }
}

/* Program Calendar: the contact options as a short centred list. */
.gianna-contact-list { display: inline-block; text-align: left; margin: 0; padding-left: 1.2em; }
.gianna-contact-list li { margin: .2em 0; }

/* ── Mobile clean-up (JM, 23 Sept, with screenshots) ───────────────────── */
@media (max-width: 921px) {
	/* "Gaps in the header": the bar had 18px side margins, so it floated inset from the full-width hero. */
	#ast-mobile-header .main-header-bar { margin-left: 0 !important; margin-right: 0 !important; }
}
/* Footer blurb: its block column was 263px wide in a 350px row, so it sat left of centre. */
.site-footer #block-7 .wp-block-columns { justify-content: center; }
.site-footer #block-7 .wp-block-column { flex-basis: 100% !important; flex-grow: 1; }
.site-footer #block-7 p { margin-left: auto; margin-right: auto; }
.site-footer .footer-widget-area:has(#block-7) { margin-left: 0 !important; }
@media (max-width: 767px) {
	/* Home cards: the button was centred under left-aligned text. It now lines up with the text. */
	.elementor-8390 .elementor-element-5fc93e4, .elementor-8390 .elementor-element-e795541, .elementor-8390 .elementor-element-mkmomsbtn { text-align: left !important; align-self: flex-start !important; }
	.elementor-8390 .elementor-element-5fc93e4 .elementor-button-wrapper, .elementor-8390 .elementor-element-e795541 .elementor-button-wrapper, .elementor-8390 .elementor-element-mkmomsbtn .elementor-button-wrapper { text-align: left !important; justify-content: flex-start !important; }
	/* Quotes: 42px line spacing and 1.8px letter spacing read as a scatter of words on a phone. */
	.gianna-quote .elementor-widget-container, .gianna-quote .elementor-widget-container p, .gianna-quote .elementor-widget-container em {
		font-size: 16px !important; line-height: 1.6 !important; letter-spacing: normal !important;
	}
	/* /gianna-centre/ photos shrank to 99px wide on a phone. */
	.elementor-9184 .elementor-element-fbdacd5, .elementor-9184 .elementor-element-863e4aa, .elementor-9184 .elementor-element-a7bfc8c { width: 100% !important; max-width: 100% !important; --container-widget-width: 100%; }
	.elementor-9184 .elementor-element-fbdacd5 img, .elementor-9184 .elementor-element-863e4aa img, .elementor-9184 .elementor-element-a7bfc8c img { width: 100% !important; max-width: 100% !important; height: auto !important; border-radius: 8px; }
}

/* Even spacing everywhere (JM, 23 Sept: "padding/margins are not consistent"): a text block's last
   paragraph kept a 1.8em bottom margin, so every box had more space under its text than over it. */
.elementor-widget-text-editor .elementor-widget-container > p:last-child,
.elementor-widget-text-editor .elementor-widget-container > ul:last-child,
.elementor-image-box-description p:last-child { margin-bottom: 0 !important; }
.elementor-widget-text-editor .elementor-widget-container > *:first-child { margin-top: 0; }

/* Tablet footer: it squeezed three columns into ~720px. It now stacks and centres like the phone. */
@media (max-width: 921px) {
	.site-primary-footer-wrap .site-primary-footer-inner-wrap { grid-template-columns: 1fr !important; justify-items: center; text-align: center; row-gap: 28px; }
	.site-primary-footer-wrap .site-footer-section { justify-content: center !important; align-items: center !important; text-align: center; width: 100%; }
	.site-below-footer-wrap .site-below-footer-inner-wrap { grid-template-columns: 1fr !important; justify-items: center; text-align: center; row-gap: 8px; }
	.site-below-footer-wrap .site-footer-section { justify-content: center !important; text-align: center; }
}
@media (max-width: 921px) {
	.site-primary-footer-wrap .footer-widget-area { margin-top: 0 !important; margin-bottom: 0 !important; }
}
/* Contact card: 30px above the first box, and now 30px under the office hours (was ~95px). */
.elementor-15 .elementor-element-f9127d2 { padding-bottom: 30px !important; }
.elementor-15 .elementor-element-f9127d2 > .e-con-inner { padding-bottom: 0 !important; }

/* ── Full-site sweep fixes (JM, 23 Sept: "make sure everything looks proper") ── */
/* Quotes: one style everywhere. The Elementor setting gave 1.8px letter spacing and 42px lines. */
.gianna-quote .elementor-widget-container, .gianna-quote .elementor-widget-container p, .gianna-quote .elementor-widget-container em {
	letter-spacing: normal !important; line-height: 1.7 !important;
}
.gianna-quote { margin-bottom: 40px; }
/* FAQ: both accordions on the same 20px gutter on tablet/phone (one was 60px, one 10px), with room above the footer. */
@media (max-width: 1024px) {
	.elementor-9148 .elementor-element-192294b { padding-left: 10px !important; padding-right: 10px !important; }
	.elementor-9148 .elementor-element-6578245 { padding-left: 10px !important; padding-right: 10px !important; }
}
.elementor-9148 .elementor-element-6578245 { padding-bottom: 60px !important; }
/* Last section of The Market and Get Involved: room above the footer. */
.elementor-9029 > .e-con:last-child, .elementor-9726 > .e-con:last-child { padding-bottom: 60px !important; }
/* Get Involved accordion titles matched to the FAQ (was 40px). */
.elementor-9726 .elementor-element-giacc .elementor-tab-title, .elementor-9726 .elementor-element-giacc .elementor-accordion-title { font-size: 22px !important; line-height: 1.35 !important; }
.elementor-9726 .elementor-element-giacc .elementor-accordion-icon { font-size: 16px !important; align-self: center; }
/* Lists: a little air after the sentence that introduces them. */
.elementor-widget-text-editor p + ul { margin-top: 8px; }

/* Program Calendar: never clip, even before its resize script runs. */
.styled-calendar-container { min-height: 1100px !important; width: 100% !important; }
@media (max-width: 767px) { .styled-calendar-container { min-height: 900px !important; } }

/* Shop/product pages. */
.woocommerce div.product .product_title, .entry-title { font-weight: 700 !important; }
.product_meta .sku_wrapper { display: none !important; }
.product_meta > span { display: block; margin-bottom: 4px; }
.woocommerce-breadcrumb { margin-top: 16px; }
.woocommerce .related ul.products, .woocommerce .upsells ul.products { margin-left: 0 !important; padding-left: 0 !important; }
.woocommerce .related, .woocommerce .upsells { margin-top: 48px; clear: both; }
/* Tabs: until WooCommerce's (delayed) script runs, show only the first panel and a flush tab row. */
.woocommerce-tabs ul.tabs { padding-left: 0 !important; margin-left: 0 !important; }
.woocommerce-tabs .woocommerce-Tabs-panel:not(:first-of-type) { display: none; }
/* Review form: labels above full-width inputs. */
#review_form .comment-form label { display: block; margin-bottom: 6px; }
#review_form .comment-form input[type=text], #review_form .comment-form input[type=email] { width: 100% !important; max-width: 100%; }
/* Donation: a quantity makes no sense for a gift, and the button needs space. */
.postid-30 form.cart .quantity { display: none !important; }
.postid-30 form.cart .single_add_to_cart_button { margin-top: 16px !important; margin-left: 0 !important; }

/* Contact: keep the email address on one line on tablets. */
@media (max-width: 1024px) { .elementor-15 a[href^="mailto:"] { white-space: nowrap; font-size: 15px; } }
/* /gianna-centre/ photos: tablet too, not only phones (they were 222px). */
@media (min-width: 768px) and (max-width: 1024px) {
	.elementor-9184 .elementor-element-fbdacd5, .elementor-9184 .elementor-element-863e4aa, .elementor-9184 .elementor-element-a7bfc8c { width: 100% !important; max-width: 100% !important; --container-widget-width: 100%; }
	.elementor-9184 .elementor-element-fbdacd5 img, .elementor-9184 .elementor-element-863e4aa img, .elementor-9184 .elementor-element-a7bfc8c img { width: 100% !important; max-width: 520px !important; height: auto !important; border-radius: 8px; }
}
/* Footer: copyright and credit the same size. */
.site-below-footer-wrap .ast-footer-copyright, .site-below-footer-wrap .ast-builder-html-element, .site-below-footer-wrap p { font-size: 16px !important; }
/* Home cards on tablet: space between the stacked cards. */
@media (min-width: 768px) and (max-width: 1024px) { .elementor-8390 .elementor-element-d349891 > .e-con-inner { gap: 24px !important; } }

/* Round 43 (2026-09-24): the remaining design items. */
/* Home banner: heading and Get Help sit together as one centred group (the heading was centred in its own wide column, the button left in another). */
@media (min-width: 1025px) {
	.elementor-8390 .elementor-element-28fc7dc > .e-con-inner { justify-content: center !important; align-items: center !important; gap: 40px !important; }
	.elementor-8390 .elementor-element-477b54a, .elementor-8390 .elementor-element-bb7ca93 { width: auto !important; flex: 0 1 auto !important; --width: auto; }
}
/* /gianna-centre/ Pregnancy Tests card: "Walk-ins are welcome!" centred like the line above it. */
.elementor-9184 .elementor-element-gchc00t p { text-align: center !important; }
/* One button size everywhere: 16px text, 16px x 32px padding (was 19px on some, 14px on others). */
.elementor-button, .wpforms-submit, .woocommerce a.button, .woocommerce button.button { font-size: 16px !important; padding: 16px 32px !important; line-height: 1.2 !important; }
/* Page heroes over the awning / storefront photos: a soft white halo so the title reads over the lettering behind it. */
body:not(.home) .entry-content > .elementor > .e-con:first-child .elementor-heading-title,
body:not(.home) .entry-content > .elementor > .e-con:first-child .elementor-widget-text-editor p {
	text-shadow: 0 0 2px #FFFFFF, 0 0 10px rgba(255,255,255,.95), 0 0 24px rgba(255,255,255,.85);
}
/* The Market on tablet: a taller hero, and each text/photo pair stacked so the photos are not squeezed to a third of the width. */
@media (min-width: 768px) and (max-width: 1024px) {
	.elementor-9029 .elementor-element-dfdc5a6 { --min-height: 300px; min-height: 300px !important; }
	.elementor-9029 .elementor-element-748980c > .e-con-inner, .elementor-9029 .elementor-element-3686af7 > .e-con-inner,
	.elementor-9029 .elementor-element-82059be > .e-con-inner, .elementor-9029 .elementor-element-720525c > .e-con-inner,
	.elementor-9029 .elementor-element-748980c, .elementor-9029 .elementor-element-3686af7,
	.elementor-9029 .elementor-element-82059be, .elementor-9029 .elementor-element-720525c { flex-direction: column !important; }
	.elementor-9029 .elementor-element-9945606, .elementor-9029 .elementor-element-f499284, .elementor-9029 .elementor-element-950ce22, .elementor-9029 .elementor-element-e79e8b0,
	.elementor-9029 .elementor-element-e9a764b, .elementor-9029 .elementor-element-a40d014, .elementor-9029 .elementor-element-08adbd4, .elementor-9029 .elementor-element-9fa4041 { width: 100% !important; --width: 100%; max-width: 100% !important; }
	.elementor-9029 .elementor-element-f499284 img, .elementor-9029 .elementor-element-e79e8b0 img, .elementor-9029 .elementor-element-a40d014 img, .elementor-9029 .elementor-element-9fa4041 img { width: 100% !important; max-width: 560px !important; height: auto !important; border-radius: 8px; }
}
/* Services: the photo under the form was 871px wide and dominated the page. */
.elementor-9211 .elementor-element-04d6c82 img { max-width: 640px !important; width: 100% !important; height: auto !important; border-radius: 8px; }
.elementor-9211 .elementor-element-04d6c82 { margin-top: 24px; }

/* ---- Round 46 (JM, 28 Sept): nav on the transparent header — the minimum change -----------------
 * On the 5 photo-hero pages (the-market, gianna-centre, services-and-programs, faq, contact) the menu
 * sat directly on the photo. Measured worst word 4.09:1 at 1024–1920px, failing AA 4.5:1.
 * JM: "only make the least amount of change necessary to the background of the nav."
 *   - 18% white behind the header bar is the least tint that lifts every menu word past 4.5:1
 *     (16% is the bare edge; 18% leaves a margin for untested widths). No blur, no border.
 *   - Desktop only. At ≤921px the header already has its own solid background.
 * JM: "I still do want a much heavier bold on the nav text" → Lato Black 900 (face added in gianna-fonts.php). */
@media (min-width: 922px) {
	.ast-theme-transparent-header #masthead .main-header-bar { background-color: rgba(255, 255, 255, .18); }
}
#masthead .main-header-menu > .menu-item > .menu-link { font-weight: 900; }

/* ==== Round 47 (28 Sept call + Sept 28 screenshots; JM: "do the entire Needs You list") ======================= */

/* 88 — Home cards: everything centred, photos uniform. JM, 3:36–3:55: "centre the button, centre the soup, centre the
 * replacement hoodie picture… centre the mom"; "consistency". The photo is the container's background overlay
 * (::before); it becomes one centred 190px square, cropped to fill, the same in all three cards. */
.elementor-8390 .elementor-element-016cbfd,
.elementor-8390 .elementor-element-6cb5657,
.elementor-8390 .elementor-element-mkmoms { text-align: center; }
.elementor-8390 .elementor-element-7a5a915 .elementor-image-box-content,
.elementor-8390 .elementor-element-838e544 .elementor-image-box-content,
.elementor-8390 .elementor-element-mkmomsib .elementor-image-box-content { text-align: center !important; }
.elementor-8390 .elementor-element-5fc93e4, .elementor-8390 .elementor-element-e795541, .elementor-8390 .elementor-element-mkmomsbtn { text-align: center !important; align-self: center !important; }
.elementor-8390 .elementor-element-5fc93e4 .elementor-button-wrapper, .elementor-8390 .elementor-element-e795541 .elementor-button-wrapper, .elementor-8390 .elementor-element-mkmomsbtn .elementor-button-wrapper { text-align: center !important; justify-content: center !important; }
.elementor-8390 .elementor-element-016cbfd::before,
.elementor-8390 .elementor-element-6cb5657::before,
.elementor-8390 .elementor-element-mkmoms::before {
	top: auto !important; right: auto !important; bottom: 28px !important; left: 50% !important;
	width: 190px !important; height: 190px !important; transform: translateX(-50%);
	background-size: cover !important; background-position: center !important; border-radius: 8px;
}
@media (max-width: 767px) {
	/* card order changed (The Market Story first), so the per-card mobile margins no longer space them evenly */
	.elementor-8390 .elementor-element-d349891 > .e-con-inner { gap: 25px !important; }
	.elementor-8390 .elementor-element-016cbfd, .elementor-8390 .elementor-element-6cb5657, .elementor-8390 .elementor-element-mkmoms { margin: 0 !important; }
}
/* The Market Story on touch screens: its description shows plainly under the title, like its neighbours' text.
 * (The base rule's background !important and fixed height used to win here: a tall blue box with grey text.) */
@media (hover: none) {
	.gianna-momscard .gianna-momscard__pop { background: none !important; height: auto !important; overflow: visible !important; padding: 0 0 8px !important; order: 1; }
	.gianna-momscard .elementor-element-mkmomsbtn { order: 2; }
	.gianna-momscard .gianna-momscard__pop .elementor-widget-container,
	.gianna-momscard .gianna-momscard__pop p { color: #3D3D3D !important; text-align: center !important; font-size: 16px; line-height: 1.7; }
}

/* 90–91 — Gianna Centre grid, desktop: one uniform white panel, nearly the whole card, bigger text.
 * JM, 6:37: "more white on the top, more white on the bottom… consistently the same height"; Anna, 7:01: "make the white
 * boxes almost the entire size of each of those squares"; JM, 8:10 / 34:37: "I can make this font bigger". */
@media (hover: hover) and (min-width: 768px) {
	.gianna-hovercard .gianna-hovercard__panel {
		top: 18px; left: 18px; right: 18px; bottom: 18px;
		width: auto; max-width: none; max-height: none;
		transform: translateY(8px);
		display: flex; flex-direction: column; justify-content: center;
		background: #FFFFFF; /* opaque, so the card title no longer shows faintly through */
	}
	.gianna-hovercard:hover .gianna-hovercard__panel,
	.gianna-hovercard:focus-within .gianna-hovercard__panel { transform: none; }
}
.gianna-hovercard .gianna-hovercard__panel p,
.gianna-hovercard .gianna-hovercard__panel li { font-size: 18px; line-height: 1.5; }
/* 91 — JM, 7:37: "bold the call and bold the text words" (labels bolded in the text; the numbers here). */
.gianna-hovercard .gianna-hovercard__panel a[href^="tel:"],
.gianna-hovercard .gianna-hovercard__panel a[href^="sms:"] { font-weight: 700; }

/* 92 — Gianna Centre on phones: taller cards so the photos show. JM, 12:13 / 35:00: "make these images 1½ to two times
 * the height… maybe half or ¾ of the height of the phone"; "the white box moves down, the heading stays".
 * "T?" (transparent?, 13:58): the panel is 92% white — text stays about 9:1 on the darkest photo. */
@media (max-width: 767px) {
	.gianna-hovercard { min-height: 72vh; justify-content: space-between; }
	.gianna-hovercard .gianna-hovercard__panel { margin-top: auto; background: rgba(255, 255, 255, .92); }
	.gianna-hovercard::after { background: linear-gradient( 180deg, rgba(0,0,0,.10) 30%, rgba(0,0,0,.35) 100% ); }
}

/* 93 — "Need Help?" stands out in the Our Services dropdown. JM, 15:20: "make it pop by bigger, bolder, a little bit
 * different background… we kind of lost that urgency". Tint #E1EEF8 with #005A9C text = 6.5:1. */
#masthead #menu-item-9666 > .menu-link,
#ast-hf-mobile-menu #menu-item-9666 > .menu-link { font-size: 18px; font-weight: 900; color: #005A9C; background: #E1EEF8; }
#masthead #menu-item-9666 > .menu-link:hover,
#masthead #menu-item-9666 > .menu-link:focus-visible { background: #0075C9; color: #FFFFFF; }

/* 94 — "Text Us" (Astra Header Button 1, placed in gianna-round47.php). Compact, so 12–13" laptops keep room. */
.ast-header-button-1 .ast-custom-button {
	/* JM, 28 Sept: "the approved pink colour (like "Get Help") only keep the font weight and size the same".
	 * Get Help (Home b8121aa) = globals gianna_rose Pantone 251 #DD9CDF with gianna_navy ink #1A1A1A (≈9.6:1). */
	background: #DD9CDF; color: #1A1A1A; border: 2px solid #DD9CDF; border-radius: 4px;
	font-size: 15px; font-weight: 900; line-height: 1.2; padding: 8px 16px; white-space: nowrap;
}
/* Hover/focus: white fill, ink text, pink border kept so the button stays visible on the white header. */
.ast-header-button-1 .ast-custom-button:hover,
.ast-header-button-1 a:focus-visible .ast-custom-button { background: #FFFFFF; color: #1A1A1A; border-color: #DD9CDF; }
.ast-header-button-1 { margin-right: 14px; }
@media (max-width: 921px) {
	.ast-header-button-1 .ast-custom-button { font-size: 14px; padding: 7px 12px; }
	.ast-header-button-1 { margin-right: 10px; }
}

/* 96 — Program Calendar: the 1100px floor (Round 42, when the resizer was still delayed) was taller than the month, so it
 * left a ~470px band. The resizer now runs at load and sets the real height; this is only a floor if it ever fails. */
.styled-calendar-container { min-height: 600px !important; }
@media (max-width: 767px) { .styled-calendar-container { min-height: 600px !important; } }

/* 97 — FAQ: the space above the footer ("not the right pixels at the space on top of the footer") ~110px → ~60px. */
.elementor-9148 .elementor-element-6578245 { padding-bottom: 10px !important; }

/* 99 — Donate: everything centred (JM, 30:15: "This should be centred… everything centred"); Custom button styled
 * with the presets. */
body.gianna-donation .summary.entry-summary,
body.gianna-donation .summary .woocommerce-breadcrumb { text-align: center; }
body.gianna-donation .gianna-donation-presets { justify-content: center; }
body.gianna-donation .woonp { display: flex; justify-content: center; }
body.gianna-donation .woonp-input { width: 100%; max-width: 320px; text-align: center; }
body.gianna-donation .woocommerce-variation-add-to-cart { display: flex; flex-direction: column; align-items: center; }
body.gianna-donation.woocommerce div.product form.cart .woocommerce-variation-add-to-cart .single_add_to_cart_button.button { float: none !important; display: block; align-self: center !important; margin-left: auto !important; margin-right: auto !important; }
body.gianna-donation .woocommerce-variation-add-to-cart { justify-content: center; }
body.gianna-donation #wc-square-digital-wallet,
body.gianna-donation .ast-single-product-payments { margin-left: auto; margin-right: auto; }

/* 107 — Need Help form on desktop: contact fields left, Services Requested right (strategy meeting, D51).
 * Layout only — no field, order or notification is changed. */
@media (min-width: 1025px) {
	#wpforms-form-9186 .wpforms-field-container { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; align-items: start; }
	#wpforms-form-9186 .wpforms-field-container > .wpforms-field { grid-column: 1; }
	#wpforms-form-9186 #wpforms-9186-field_4-container { grid-column: 2; grid-row: 1 / span 3; }
	#wpforms-form-9186 #wpforms-9186-field_5-container { grid-column: 2; }
}

/* 108 — Customer Reviews: the /shop/ block (gianna-round47.php) and the one on About the Market share the site's quote
 * bubble colours. */
.gianna-shop-reviews { clear: both; margin: 48px 0 16px; text-align: center; }
.gianna-shop-reviews h2 { margin-bottom: 20px; }
.gianna-shop-reviews__list { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
.gianna-shop-reviews blockquote,
.gianna-reviews blockquote { flex: 1 1 240px; max-width: 320px; margin: 0; padding: 20px 22px !important; border: 0 !important; border-radius: 12px; background: #E1EEF8; color: #1A1A1A; font-style: italic; }
.gianna-shop-reviews blockquote p { margin: 0 0 8px; }
.gianna-shop-reviews__by, .gianna-reviews blockquote p:last-child { font-style: normal; font-weight: 700; margin: 0 !important; }