/*
Theme Name: DFI2026 Child - God's Promises
Theme URI: https://dfiproductions.com
Author: DFI Productions
Author URI: https://dfiproductions.com
Description: Child theme of DFI2026 holding all site-specific customizations for God's Promises.
Template: dfi2026
Version: 1.0.0
Text Domain: dfi2026-child
*/

/* Top bar: gold gradient, light at the top to darker at the bottom. */
.top-bar {
	background: linear-gradient(to bottom, #fecf63 0%, #d6ae53 100%);
}

/* Top bar on mobile: the address, icons and the spacing between them are
   all in vw, so the whole row shrinks with the screen instead of the
   address (which never wraps) running under the social icons on narrow
   phones. At these sizes the row takes about 90vw at any width. Each size
   is capped so it stops growing on wider phones and small tablets.

   These replace Theme Options → Top Bar's Mobile sizes for the address,
   social icons and phone icon, whose rem values are what overlapped. The
   phone number text is hidden up to 768px (the parent stops at 600px):
   there is no room for it beside the address until the desktop layout. */

@media (max-width: 768px) {
	.top-bar {
		gap: 2vw;
	}

	.top-bar .top-bar__left {
		padding-left: min(3vw, 1rem);
	}

	.top-bar .top-bar__right {
		gap: min(3vw, 1rem);
		padding-left: 0;
		padding-right: min(3vw, 1rem);
	}

	.top-bar .top-bar__social {
		gap: min(2vw, 0.6rem);
	}

	.top-bar .top-bar__address {
		font-size: min(2.8vw, 0.85rem);
	}

	.top-bar .top-bar__social-link,
	.top-bar .top-bar__phone-icon {
		font-size: min(5.5vw, 2rem);
	}

	.top-bar .top-bar__phone-label,
	.top-bar .top-bar__phone-number {
		display: none;
	}
}

/* Top bar social icons on desktop: hovering (or tabbing to) an icon shows
   its name in a small label just below the bar. The text is the link's own
   aria-label, so it follows whatever Theme Options → Top Bar has. Mouse
   devices only, so nothing changes on phones and tablets.

   The label hangs below the bar, so the bar stops clipping its overflow at
   this width and sits above the header that follows it. */

@media (hover: hover) and (min-width: 1024px) {
	.top-bar {
		overflow: visible;
		z-index: 901;
	}

	.top-bar .top-bar__social-link {
		position: relative;
	}

	.top-bar .top-bar__social-link::after {
		content: attr(aria-label);
		position: absolute;
		top: calc(100% + 0.6rem);
		left: 50%;
		transform: translateX(-50%);
		padding: 0.25rem 0.55rem;
		border-radius: 4px;
		background: #222222;
		color: #ffffff;
		font-size: 0.75rem;
		font-weight: 400;
		line-height: 1.4;
		white-space: nowrap;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.15s ease;
	}

	.top-bar .top-bar__social-link:hover::after,
	.top-bar .top-bar__social-link:focus-visible::after {
		opacity: 1;
	}
}

/* Script display font (headlines). Self-hosted, same as the parent's fonts. */

@font-face {
	font-family: 'Allura';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/allura-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Allura';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/allura-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--gp-gold-gradient: linear-gradient(to bottom, #fecf63 0%, #d6ae53 100%);
	--gp-script-font: 'Allura', cursive;
}

/* Header: logo centered above the nav. Desktop only — matches the parent's
   768px breakpoint; mobile keeps the parent's layout. The header is not
   sticky on this site (Sticky Header is off in the options, and
   functions.php drops the scroll script the transparent home header would
   otherwise load), so there is no scrolled state to style. */

.primary-menu > li > a {
	text-transform: uppercase;
}

@media (min-width: 769px) {
	.site-header__inner {
		flex-direction: column;
		justify-content: center;
		gap: 0.75rem;
		padding-bottom: 0.5rem;
	}

	/* The Nav Font Size option is in vw to scale with the layout; this
	   keeps it from getting unreadably small on narrow desktop windows. */
	.primary-menu > li > a {
		font-size: max(var(--dfi-nav-size, 1rem), 0.8rem);
	}
}

/* The header is tinted white rather than solid, so the clouds behind it
   show through: the page background on inner pages, the hero's clouds on
   the front page (where the parent's transparent-home mode would
   otherwise leave it fully transparent). Set here rather than through the
   Header Background option, which only accepts solid hex colors. */

.site-header,
.site-header--transparent-home {
	background: rgba(255, 255, 255, 0.7);
}

/* Page backgrounds (inc/backgrounds.php): faded clouds behind every page;
   the home page overrides this with the hero's clouds further down. */

body {
	position: relative;
	background-color: #e9ecf1;
}

/* The image is on its own layer, the full height of the page and behind
   everything, so it can grow on load like the home hero's clouds (same
   keyframes, defined with the hero below). It grows from the middle of the
   first screenful, so what the visitor sees moves about as much as the
   hero does however tall the page is. .page-bg clips the growth. */

.page-bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: -1;
	pointer-events: none;
}

.page-bg__image {
	position: absolute;
	inset: 0;
	background-image: var(--site-bg, none);
	background-size: cover;
	background-position: center top;
	transform-origin: 50% var(--page-bg-origin-y, 50vh);
	animation: home-hero-bg-grow 7s ease-in-out both;
}

@media (prefers-reduced-motion: reduce) {
	.page-bg__image {
		animation: none;
	}
}

/* Home hero (inc/home-hero.php) */

/* Clips the growing background image. Kept on its own layer rather than on
   .site-hero-wrap so the header's dropdowns aren't clipped along with it. */
.home-hero-bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 0;
	background: #b9975a;
}

.home-hero-bg__image {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	animation: home-hero-bg-grow 7s ease-in-out both;
}

@keyframes home-hero-bg-grow {
	from {
		transform: scale(1);
	}

	to {
		transform: scale(1.25);
	}
}

@media (prefers-reduced-motion: reduce) {
	.home-hero-bg__image {
		animation: none;
		transform: scale(1.25);
	}
}

.home-hero {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* --home-hero-header-height is measured by assets/js/home-hero.js; the
	   fallback approximates it (home logo + nav row + header padding) so
	   the content doesn't jump when the script runs. */
	padding: calc(var(--home-hero-header-height, calc(var(--dfi-logo-height-home, 15vw) + 6rem)) + 3vw) 1rem 5vw;
	font-family: var(--dfi-site-font, inherit);
}

.home-hero__card {
	width: 50%;
	margin-bottom: 2vw;
	border-radius: 20px;
	overflow: hidden;
	background: rgba(14, 10, 5, 0.83);
	box-shadow: 5px 5px 26px 11px rgba(0, 0, 0, 0.52);
	color: #ffffff;
}

.home-hero__headline {
	margin: 0;
	padding: 0.7vw;
	background: var(--gp-gold-gradient);
	font-family: var(--gp-script-font);
	font-size: 4vw;
	font-weight: 400;
	line-height: 1.5;
	color: #ffffff;
	text-align: center;
}

.home-hero__text {
	padding: 1em;
	font-size: max(1vw, 0.9rem);
	font-weight: 700;
	line-height: 2;
}

.home-hero__text p {
	margin: 0;
}

.home-hero__text p + p {
	margin-top: 1em;
}

/* The sample photo's caption: heavy white capitals with a soft shadow, to
   stand out against the clouds. */
.home-hero__image-heading {
	margin: 0 0 0.25em;
	font-family: var(--dfi-site-font, inherit);
	font-size: 4vw;
	font-weight: 900;
	line-height: 1.1;
	text-transform: uppercase;
	color: #ffffff;
	text-align: center;
	text-shadow: 0 4px 12px rgba(0, 0, 0, 0.55);
}

.home-hero__image {
	display: block;
	width: auto;
	max-width: 50vw;
	height: auto;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}

@media (max-width: 768px) {
	.home-hero {
		padding-bottom: 2rem;
	}

	.home-hero__card {
		width: 100%;
		margin-bottom: 1.5rem;
	}

	.home-hero__headline {
		padding: 0.5rem;
		font-size: 9vw;
	}

	.home-hero__text {
		font-size: 1rem;
		line-height: 1.75;
	}

	.home-hero__image-heading {
		font-size: 9vw;
	}

	.home-hero__image {
		max-width: 100%;
	}
}

/* Scriptures row: the parent's Button Row (Theme Options → Button Rows,
   instance ID "scriptures") restyled from a fixed-height row of image
   buttons into three text panels — verse reference as the heading, the
   verse itself in the Additional Text field. Colors, sizes, borders and
   images still come from the instance's options; this only changes the
   layout so each panel grows to fit its text. */

.dfi-button-row[data-instance="scriptures"] {
	height: auto;
}

.dfi-button-row[data-instance="scriptures"] .dfi-button-row__item {
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	padding: 2vw;
}

.dfi-button-row[data-instance="scriptures"] .dfi-button-row__item:nth-child(2) .dfi-button-row__bg {
	background-position: right center;
}

.dfi-button-row[data-instance="scriptures"] .dfi-button-row__content {
	padding: 0;
	text-align: left;
}

.dfi-button-row[data-instance="scriptures"] .dfi-button-row__h2 {
	padding: 0;
	margin-bottom: 0.6em;
	font-family: var(--gp-script-font);
	font-weight: 400;
}

.dfi-button-row[data-instance="scriptures"] .dfi-button-row__sub {
	position: relative;
	inset: auto;
	line-height: 1.75;
	text-align: left;
}

@media (max-width: 768px) {
	.dfi-button-row[data-instance="scriptures"] .dfi-button-row__item {
		aspect-ratio: auto;
		padding: 1.5rem 1rem;
	}

	.dfi-button-row[data-instance="scriptures"] .dfi-button-row__h2 {
		font-size: max(var(--dfi-br-h2-size, 1.75rem), 2rem);
	}
}

/* Button Row panels without a URL render as a <div>, not a link, so the
   parent's hover zoom/brighten would suggest they're clickable. Applies to
   any row; panels that do have a URL keep the hover effect. */

div.dfi-button-row__item:hover .dfi-button-row__bg {
	transform: none;
}

div.dfi-button-row__item:hover .dfi-button-row__dim {
	opacity: var(--dfi-br-dim, 0.4);
}

/* Home page content: the product sections (ordinary blocks in the Home
   page — headings with the "home-section-title" class and WooCommerce
   [products] shortcodes) sit on
   the same clouds as the hero, edge to edge instead of inside
   .site-main's usual max-width. The image covers the whole page behind
   everything (the hero paints its own animated copy on top), so on a page
   this tall it is scaled up and the product area shows its lower half.

   It grows like the hero's copy, but the visitor only reaches it by
   scrolling, so the animation waits until assets/js/page-bg.js sees the
   content scroll into view. */

body.home {
	background-color: #b9975a;
}

body.home .page-bg__image {
	background-image: var(--home-content-bg, none);
	animation-play-state: paused;
}

body.home .page-bg.is-in-view .page-bg__image {
	animation-play-state: running;
}

body.home .site-main {
	max-width: none;
	padding: 0 2vw 2vw;
}

.home-section-title {
	margin: 4vw 0 3vw;
	font-family: var(--gp-script-font);
	font-size: 5vw;
	font-weight: 400;
	line-height: 1.2;
	color: #281b0a;
	text-align: center;
}

.home-coming-soon {
	margin: 0;
	font-size: 3vw;
	font-weight: 300;
	text-align: center;
}

/* Product tiles, wherever WooCommerce lists products (the home page's
   [products] shortcodes, the shop and category pages). Five square white
   tiles per row, the whole image
   visible and pinned to the top, the title on a gold bar along the bottom
   and the price as a badge overhanging the top-left corner; the tile
   itself is the link, so Add to Cart is hidden. A short last row (or a
   section with only a couple of products) centers. */

.woocommerce ul.products[class*="columns-"] {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2vw;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products[class*="columns-"]::before,
.woocommerce ul.products[class*="columns-"]::after {
	display: none;
}

.woocommerce ul.products[class*="columns-"] li.product {
	float: none;
	flex: 0 0 calc((100% - 8vw) / 5);
	width: auto;
	margin: 0;
	padding: 0;
}

.woocommerce ul.products[class*="columns-"] li.product .woocommerce-loop-product__link {
	position: relative;
	display: block;
	aspect-ratio: 1;
	background: #ffffff;
	border: 1px solid #bfbfbf;
	text-decoration: none;
	transition: transform 0.2s ease;
}

.woocommerce ul.products[class*="columns-"] li.product .woocommerce-loop-product__link:hover,
.woocommerce ul.products[class*="columns-"] li.product .woocommerce-loop-product__link:focus-visible {
	transform: scale(1.06);
}

.woocommerce ul.products[class*="columns-"] li.product .woocommerce-loop-product__link img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: contain;
	object-position: center top;
}

.woocommerce ul.products[class*="columns-"] li.product .woocommerce-loop-product__title {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 0.5em;
	background: var(--gp-gold-gradient);
	font-family: var(--dfi-site-font, inherit);
	font-size: max(0.9vw, 0.8rem);
	font-weight: 700;
	line-height: 1.3;
	color: #5f4518;
	text-align: center;
}

.woocommerce ul.products[class*="columns-"] li.product .price {
	position: absolute;
	top: -0.5vw;
	left: 0.6vw;
	margin: 0;
	padding: 1em;
	background: var(--gp-gold-gradient);
	font-size: max(0.75vw, 0.75rem);
	font-weight: 700;
	line-height: 1;
	color: #5f4518;
}

.woocommerce ul.products[class*="columns-"] li.product .button,
.woocommerce ul.products[class*="columns-"] li.product .added_to_cart {
	display: none;
}

@media (max-width: 768px) {
	body.home .site-main {
		padding: 0 1rem 2rem;
	}

	.home-section-title {
		margin: 2rem 0 1.5rem;
		font-size: 12vw;
	}

	.home-coming-soon {
		font-size: 6vw;
	}

	.woocommerce ul.products[class*="columns-"] {
		gap: 1rem;
	}

	.woocommerce ul.products[class*="columns-"] li.product {
		flex-basis: calc((100% - 1rem) / 2);
	}

	.woocommerce ul.products[class*="columns-"] li.product .price {
		top: -0.4rem;
		left: 0.5rem;
		padding: 0.7em;
	}
}

/* Home page: no price badge on the tiles — every product in a section is
   the same price, so it is stated once in the section heading instead
   (typed into the heading text in the Home page editor). */

body.home .woocommerce ul.products[class*="columns-"] li.product .price {
	display: none;
}

/* Footer: photo background with a dark fade at the top, and the copyright
   line (inc/footer-copyright.php) between the logo and the contact rows.
   Colors, logo, sizes and rows come from Theme Options → Footer. */

.site-footer {
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%), url('assets/images/footer-bg.jpg');
	background-size: cover;
	background-position: bottom center;
}

.site-footer__main {
	padding-bottom: 3rem;
}

.site-footer__copyright {
	color: var(--dfi-footer-text-color, #ffffff);
	font-size: var(--dfi-footer-text-size, 0.95rem);
	font-weight: var(--dfi-footer-text-weight, 400);
	text-align: center;
}

/* Three columns with equal outer tracks, so the copyright sits in the true
   center of the footer however wide the logo and contact rows are (as
   flex items it only centered in the space left between them). */

@media (min-width: 769px) {
	.site-footer__main {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
	}

	.site-footer__logo {
		justify-self: start;
	}

	.site-footer__info {
		justify-self: end;
	}
}

@media (max-width: 768px) {
	.site-footer__copyright {
		font-size: var(--dfi-footer-text-size-mobile, 0.85rem);
	}
}

/* Smooth scrolling for in-page anchor links (the Our Collection / Christian
   Art / Christian Audio menu items), skipped for visitors who ask for
   reduced motion. */

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* WooCommerce (inc/woocommerce.php). WooCommerce's own stylesheets do the
   heavy lifting; this adds the layout wrapper's spacing, the product page
   proportions, and the brand colors. */

.site-main--woocommerce {
	padding: 2em 1rem 3rem;
}

/* Cart, Checkout and My Account are ordinary pages holding a WooCommerce
   shortcode, so they come through .entry-content instead. */
.entry-content > .woocommerce {
	margin-top: 2em;
	margin-bottom: 3rem;
}

/* Shop / category page heading, in the same script as the home sections. */
.woocommerce-products-header__title {
	margin: 0 0 1.5rem;
	font-family: var(--gp-script-font);
	font-size: 5vw;
	font-weight: 400;
	line-height: 1.2;
	color: #281b0a;
	text-align: center;
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	margin-bottom: 2rem;
}

/* Product page */

.woocommerce div.product .product_title {
	margin-top: 0;
	color: #606862;
	text-align: left;
}

/* Product image: fills its column at its own shape, however tall that
   makes it (the taller pieces run past the bottom of the screen). The
   selector carries div.images to outrank WooCommerce's own image rule. */

.woocommerce div.product div.images .woocommerce-product-gallery__image img:not(.zoomImg) {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: 5px;
}

@media (min-width: 769px) {
	.woocommerce div.product div.images {
		width: 50%;
	}

	.woocommerce div.product div.summary {
		width: 40%;
	}
}

/* Buttons: primary actions (Add to cart, Proceed to checkout, Place
   order) in the brand gold. */

.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	background-color: #d9b054;
	color: #ffffff;
}

.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:focus,
.woocommerce a.button.alt:focus,
.woocommerce button.button.alt:focus,
.woocommerce input.button.alt:focus {
	background-color: #f1c55e;
	color: #ffffff;
}

.woocommerce #respond input#submit.alt.disabled,
.woocommerce a.button.alt.disabled,
.woocommerce button.button.alt.disabled,
.woocommerce button.button.alt:disabled,
.woocommerce button.button.alt:disabled[disabled],
.woocommerce input.button.alt.disabled {
	background-color: #d9b054;
	color: #ffffff;
}

/* Form fields */

.woocommerce .quantity .qty,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce table.cart td.actions .coupon .input-text {
	padding: 0.5em 0.75em;
	border: 1px solid #555555;
	border-radius: 3px;
	background: #ffffff;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
	color: #555555;
}

.woocommerce .quantity .qty {
	width: 4.5em;
	padding-right: 0.25em;
}

.woocommerce table.cart td.actions .coupon .input-text {
	width: 10em;
}

/* Notices */

.woocommerce-message,
.woocommerce-info {
	border-top-color: #d9b054;
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: #d9b054;
}

/* Tables and panels sit on the clouds, so give them a solid ground. */

.woocommerce table.shop_table,
.woocommerce-checkout #payment,
.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register,
.woocommerce .woocommerce-MyAccount-navigation ul,
.woocommerce div.product .woocommerce-tabs .panel {
	background-color: rgba(255, 255, 255, 0.85);
}

.woocommerce div.product .woocommerce-tabs .panel {
	margin-bottom: 0;
	padding: 1.5rem;
	border: 1px solid #cfc8d8;
	border-top: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	margin-bottom: 0;
}

.woocommerce .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 1rem 1.5rem;
	list-style: none;
}

.woocommerce .woocommerce-MyAccount-navigation li {
	padding: 0.35em 0;
}

/* Cart link in the primary menu (only present while the cart has items). */

.menu-item-cart__count {
	display: inline-block;
	min-width: 1.6em;
	padding: 0.15em 0.4em;
	border-radius: 1em;
	background: var(--gp-gold-gradient);
	font-size: 0.85em;
	line-height: 1.3;
	color: #5f4518;
	text-align: center;
}

/* Page Title banner: heavier title than the parent's default. Image,
   overlay, size and shadow come from Theme Options → Page Title. */

.dfi-page-title__heading {
	font-weight: 900;
}

@media (max-width: 768px) {
	.woocommerce-products-header__title {
		font-size: 12vw;
	}
}

/* WooCommerce pages put a "woocommerce" class on <body>, and its stylesheet
   sets height: auto on every image under it — which outranks the parent's
   plain .custom-logo rule and let the header logo render at its natural
   size there, ignoring the Logo Height option. Restate the parent's logo
   sizing (desktop and mobile) with enough weight to win. The front page's
   larger logo is a more specific parent rule and is unaffected. */

.site-header .custom-logo {
	height: var(--dfi-logo-height, 70px);
	width: var(--dfi-logo-width, auto);
}

@media (max-width: 768px) {
	.site-header .custom-logo {
		height: var(--dfi-logo-height-mobile, 50px);
		width: var(--dfi-logo-width-mobile, auto);
	}
}

/* Sub-heading within a home section (e.g. English / Spanish under Our
   Collection): the same script as .home-section-title, a step smaller. */

.home-section-subtitle {
	margin: 3vw 0 2vw;
	font-family: var(--gp-script-font);
	font-size: 3.5vw;
	font-weight: 400;
	line-height: 1.2;
	color: #281b0a;
	text-align: center;
}

.home-section-title + .home-section-subtitle {
	margin-top: 0;
}

@media (max-width: 768px) {
	.home-section-subtitle {
		margin: 1.5rem 0 1rem;
		font-size: 9vw;
	}
}

/* Auto-height tiles: add "home-products--auto-height" to a [products]
   shortcode's class (all three home page sections use it) and the tile
   takes the image's own shape instead of a square, with the title bar
   directly beneath it. Tiles in a row align along their top edge, so a
   section with mixed image shapes (Christian Art) has uneven tile heights. */

.woocommerce.home-products--auto-height ul.products[class*="columns-"] {
	align-items: flex-start;
}

.woocommerce.home-products--auto-height ul.products[class*="columns-"] li.product .woocommerce-loop-product__link {
	aspect-ratio: auto;
}

.woocommerce.home-products--auto-height ul.products[class*="columns-"] li.product .woocommerce-loop-product__link img {
	position: static;
	display: block;
	height: auto;
}

.woocommerce.home-products--auto-height ul.products[class*="columns-"] li.product .woocommerce-loop-product__title {
	position: static;
}

/* Product image hover zoom: magnifier cursor, on both the image link and
   the enlarged copy WooCommerce's zoom script lays over it. */

.woocommerce div.product div.images .woocommerce-product-gallery__image a,
.woocommerce div.product div.images .woocommerce-product-gallery__image .zoomImg {
	cursor: zoom-in;
}

/* Contact page (Theme Options → Contact Page Layout / Contact Forms, which
   set the colors): heading in the site's script font, and the submit
   button shaped like the store's buttons.

   The parent only loads contact-page-layout.css and contact-form.css when
   the section renders, i.e. after this stylesheet, so these selectors
   carry an extra class to outrank the parent's single-class rules. */

.dfi-contact-layout .dfi-contact-layout__heading {
	font-family: var(--gp-script-font);
	font-size: 4rem;
	font-weight: 400;
	line-height: 1.1;
}

.dfi-contact-form .dfi-contact-form__submit {
	font-weight: 700;
}

/* Mobile cart button (inc/woocommerce.php): floating, bottom right, phones
   only. Sits above page content but below the slide-out menu panel. */

.mobile-cart-button {
	display: none;
}

@media (max-width: 768px) {
	.mobile-cart-button {
		position: fixed;
		right: 1rem;
		bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
		z-index: 800;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 3.5rem;
		height: 3.5rem;
		border-radius: 50%;
		background: var(--gp-gold-gradient);
		box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
		font-size: 1.4rem;
		color: #5f4518;
		text-decoration: none;
	}

	.mobile-cart-button__count {
		position: absolute;
		top: -0.25rem;
		right: -0.25rem;
		min-width: 1.5rem;
		padding: 0.2rem 0.35rem;
		border-radius: 1rem;
		background: #4b3516;
		font-family: var(--dfi-site-font, inherit);
		font-size: 0.8rem;
		font-weight: 700;
		line-height: 1.1;
		color: #ffffff;
		text-align: center;
	}
}

/* About Us page: the page's content sits in one "about-page" group — a
   white card over the clouds, with "Do it again, Lord!" in the site's
   script font and the ministry name in bold beneath it. */

.entry-content > .about-page {
	max-width: 900px;
	margin: 3rem auto;
	padding: 3rem;
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.85);
	box-shadow: 0 6px 26px rgba(0, 0, 0, 0.18);
	font-size: 1.15rem;
	line-height: 1.8;
	color: #281b0a;
	text-align: center;
}

.about-page p {
	margin: 0;
}

.about-page p + p {
	margin-top: 1.5rem;
}

.about-page__lead {
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.6;
}

.about-page .about-page__closing {
	margin-top: 2.5rem;
	font-family: var(--gp-script-font);
	font-size: 3.25rem;
	line-height: 1.2;
}

.about-page .about-page__signoff {
	margin-top: 1rem;
	font-weight: 900;
}

@media (max-width: 768px) {
	.entry-content > .about-page {
		margin: 1rem;
		padding: 1.5rem 1.25rem;
		font-size: 1rem;
	}

	.about-page__lead {
		font-size: 1.15rem;
	}

	.about-page .about-page__closing {
		font-size: 2.5rem;
	}
}