/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/

/* =====================================================================
   1. UNIFORM PRODUCT IMAGE BOXES
   ---------------------------------------------------------------------
   The catalogue photography is wildly inconsistent: featured-image aspect
   ratios run from 0.479 (upright tower cases) to 2.4 (wide rack servers).
   WooCommerce is set to "uncropped", so every thumbnail was rendered at
   its own native ratio -- on /shop/ that meant a uniform 430px width but
   heights anywhere between 191px and 430px, which is what makes some
   products look far bigger than their neighbours.

   Each thumbnail is boxed into a square and letterboxed with
   `object-fit: contain`. Contain rather than cover deliberately: hard
   cropping to 1:1 would slice the top and bottom off the tower and
   rack-server photos. Every card is now the same height and the whole
   product stays visible.
   ===================================================================== */

.wd-product .wd-product-img-link,
.wd-product .product-image-link {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background-color: #fff;
}

.wd-product .wd-product-img-link > img,
.wd-product .product-image-link > img,
.wd-product .wd-product-img-hover > img {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 10px;          /* keeps the product off the card edge */
	object-fit: contain;
	object-position: center;
}

/* The rollover image is absolutely inset inside the same square box. */
.wd-product .wd-product-img-hover {
	aspect-ratio: auto;
	background-color: #fff;
}

/* Category thumbnails in the shop sidebar / category grids get the same
   treatment so the two never disagree. */
.wd-product-category .wd-entity-image img {
	box-sizing: border-box;
	width: 100%;
	aspect-ratio: 1 / 1;
	padding: 10px;
	object-fit: contain;
	background-color: #fff;
}

/* =====================================================================
   2. HOMEPAGE HERO SLIDER
   ---------------------------------------------------------------------
   The three slides use different stock backgrounds -- one dark navy, one
   mid-blue, one bright blue -- so no single text colour was safe on all
   of them, and the widget shipped with an empty colour scheme (dark text
   over dark navy). A left-weighted scrim normalises the three slides into
   one consistent, legible set and guarantees contrast for the white text
   regardless of which background sits behind it.
   ===================================================================== */

.elementor-widget-wd_banner_carousel .promo-banner .banner-image {
	position: relative;
}

.elementor-widget-wd_banner_carousel .promo-banner .banner-image::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		90deg,
		rgba(0, 52, 104, 0.86) 0%,
		rgba(0, 52, 104, 0.70) 40%,
		rgba(0, 52, 104, 0.26) 70%,
		rgba(0, 52, 104, 0.08) 100%
	);
}

/* Hold the copy to a readable measure instead of letting it run the full
   1540px. */
.elementor-widget-wd_banner_carousel .promo-banner .content-banner {
	max-width: 620px;
}

.elementor-widget-wd_banner_carousel .promo-banner .banner-title {
	font-size: clamp(26px, 2.6vw, 42px);
	line-height: 1.18;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.elementor-widget-wd_banner_carousel .promo-banner .banner-subtitle {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	opacity: 0.92;
}

.elementor-widget-wd_banner_carousel .promo-banner .banner-inner {
	font-size: 16px;
	line-height: 1.55;
	opacity: 0.95;
}

.elementor-widget-wd_banner_carousel .promo-banner .banner-btn-wrapper {
	margin-top: 22px;
}

/* On narrow screens the scrim goes top-to-bottom, because the copy sits
   over the middle of the image rather than to one side. */
@media (max-width: 768.98px) {
	.elementor-widget-wd_banner_carousel .promo-banner .banner-image::after {
		background: linear-gradient(
			180deg,
			rgba(0, 52, 104, 0.58) 0%,
			rgba(0, 52, 104, 0.82) 100%
		);
	}

	.elementor-widget-wd_banner_carousel .promo-banner .content-banner {
		max-width: 100%;
	}
}

/* =====================================================================
   3. PROMO / CATEGORY BANNERS
   ---------------------------------------------------------------------
   Same legibility problem in miniature: the category tiles and the
   pricelist banner put light text straight onto photographs.
   ===================================================================== */

.elementor-widget-wd_banner .promo-banner .banner-image {
	position: relative;
}

.elementor-widget-wd_banner .promo-banner .banner-image::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba(0, 52, 104, 0.05) 0%,
		rgba(0, 52, 104, 0.32) 52%,
		rgba(0, 52, 104, 0.78) 100%
	);
}

.elementor-widget-wd_banner .promo-banner .banner-title {
	text-shadow: 0 1px 12px rgba(0, 52, 104, 0.40);
}

/* A quiet lift on hover so the tiles read as clickable. */
.elementor-widget-wd_banner .promo-banner {
	transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.elementor-widget-wd_banner .promo-banner:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 30px rgba(0, 52, 104, 0.18);
}

/* =====================================================================
   4. HOMEPAGE RHYTHM SAFETY NET
   ---------------------------------------------------------------------
   Section padding is set properly on the Elementor containers themselves
   (migration/steps/81-home.php). These two rules only tidy the gap
   between a section heading and the grid beneath it, which the widget
   does not control.
   ===================================================================== */

.home .wd-title-wrapp {
	margin-bottom: 0;
}

.home .elementor-widget-wd_title + .elementor-widget {
	margin-top: 4px;
}

/* ---------------------------------------------------------------------
   Hero deal slides
   The live site leads each deal with the machine's specs, then the price
   in large type, then the trust line. The banner widget gives one content
   field, so those three parts ship as spans and are laid out here.
   --------------------------------------------------------------------- */

.pps-hero-specs,
.pps-hero-price,
.pps-hero-trust {
	display: block;
}

.pps-hero-specs {
	font-size: 15px;
	line-height: 1.5;
	opacity: 0.95;
}

.pps-hero-price {
	margin-top: 12px;
	font-size: 17px;
	line-height: 1.2;
	letter-spacing: 0.01em;
}

.pps-hero-price strong {
	font-size: clamp(30px, 3vw, 42px);
	font-weight: 700;
	line-height: 1;
	vertical-align: -2px;
	margin: 0 4px;
}

.pps-hero-trust {
	margin-top: 12px;
	font-size: 13px;
	letter-spacing: 0.02em;
	opacity: 0.85;
}

@media (max-width: 768.98px) {
	/* The composed plates put the product on the right; on a phone the copy
	   sits over it, so drop the spec line and keep price + trust. */
	.pps-hero-specs {
		display: none;
	}

	.pps-hero-price {
		margin-top: 6px;
	}
}

/* ---------------------------------------------------------------------
   Category tiles - the live site sets these in caps.
   Scoped to the tiles so the pricelist banner keeps sentence case.
   --------------------------------------------------------------------- */

.pps-cat-tile .banner-title {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 700;
}

.pps-cat-tile .banner-subtitle {
	letter-spacing: 0.02em;
	opacity: 0.9;
}

/* =====================================================================
   5. MONTHLY MAILER BRAND FURNITURE
   ---------------------------------------------------------------------
   The September mailer has a strong, specific visual language, and the theme
   settings can only carry part of it (palette and typography). The rest is the
   furniture: navy price pills, a "Save R…" starburst instead of a flat
   percentage tag, and bright-blue rules under section headings.

   Colours are the five brand colours supplied from the logo file (they
   supersede the mailer-sampled navy/cyan/red):
     blue    #0152a3   primary: buttons, links, the Save starburst
     navy    #003468   headings, price pills, top bar, dark strips
     bright  #1787f3   accents: section rules, link hover
     sky     #a1bedc   borders, dividers
     paper   #fcfdfe   footer, light sections
     tint    #e8eff7   sky at ~25% over paper -- section washes

   Theme options (migration/steps/40-theme-options.php) carry the same values.
   These tokens are also consumed by assets/css/upgrades.css, which is printed
   inline inside the Quick View modal -- so every var() there carries a fallback.
   ===================================================================== */

:root {
	--pps-blue: #0152a3;
	--pps-navy: #003468;
	--pps-bright: #1787f3;
	--pps-sky: #a1bedc;
	--pps-paper: #fcfdfe;
	--pps-tint: #e8eff7;
}

/* ---------------------------------------------------------------------
   5.1 "Save R…" starburst
   The pamphlet never quotes a percentage -- it quotes the rand saved, inside a
   spiked seal. The text swap happens in inc/brand.php; the seal is a
   44-vertex clip-path here, because a real starburst as an image would need one
   asset per size and would not scale with the label.
   --------------------------------------------------------------------- */

.product-labels .product-label.pps-save,
.pps-save {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 74px;
	height: 74px;
	padding: 0;
	border-radius: 0;
	background-color: var(--pps-blue);
	color: #fff;
	line-height: 1.05;
	text-align: center;
	text-transform: none;
	clip-path: polygon(
		50.0% 0.0%, 55.7% 10.4%, 64.1% 2.0%, 66.6% 13.6%, 77.0% 7.9%, 76.2%
		19.8%, 87.8% 17.3%, 83.7% 28.4%, 95.5% 29.2%, 88.4% 38.7%, 99.5% 42.9%,
		90.0% 50.0%, 99.5% 57.1%, 88.4% 61.3%, 95.5% 70.8%, 83.7% 71.6%, 87.8%
		82.7%, 76.2% 80.2%, 77.0% 92.1%, 66.6% 86.4%, 64.1% 98.0%, 55.7% 89.6%,
		50.0% 100.0%, 44.3% 89.6%, 35.9% 98.0%, 33.4% 86.4%, 23.0% 92.1%, 23.8%
		80.2%, 12.2% 82.7%, 16.3% 71.6%, 4.5% 70.8%, 11.6% 61.3%, 0.5% 57.1%,
		10.0% 50.0%, 0.5% 42.9%, 11.6% 38.7%, 4.5% 29.2%, 16.3% 28.4%, 12.2%
		17.3%, 23.8% 19.8%, 23.0% 7.9%, 33.4% 13.6%, 35.9% 2.0%, 44.3% 10.4%
	);
}

.pps-save__word {
	font-size: 9px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.pps-save__amount {
	font-size: 15px;
	font-weight: 700;
}

.pps-save__suffix {
	font-size: 8px;
	letter-spacing: .04em;
	text-transform: uppercase;
	opacity: .9;
}

/* ---------------------------------------------------------------------
   5.2 Price treatment
   The mailer sets the old price struck through in a muted pill and the new price
   large and navy. Product cards get the typographic version; the single product
   page gets the full pill, where there is room for it.
   --------------------------------------------------------------------- */

.wd-product .price del,
.wd-product .price del .amount {
	color: #8a94a6;
	font-weight: 400;
	text-decoration-thickness: 2px;
}

.wd-product .price ins,
.wd-product .price ins .amount,
.wd-product .price > .amount {
	color: var(--pps-navy);
	font-weight: 700;
	text-decoration: none;
}

.woocommerce-price-suffix {
	display: inline-block;
	margin-left: 4px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #8a94a6;
}

/* The single product page has room for the mailer's actual price badge.
   NB: WoodMart wraps the summary contents in .summary-inner, so the price is a
   grandchild of .summary, not a child. */
.single-product .summary-inner > .price {
	display: inline-flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 18px;
	padding: 10px 20px;
	border-radius: 999px;
	background: var(--pps-navy);
}

.single-product .summary-inner > .price,
.single-product .summary-inner > .price ins,
.single-product .summary-inner > .price ins .amount,
.single-product .summary-inner > .price > .amount,
.single-product .summary-inner > .price bdi {
	color: #fff;
}

.single-product .summary-inner > .price ins .amount,
.single-product .summary-inner > .price > .amount {
	font-size: 30px;
	font-weight: 700;
	line-height: 1;
}

.single-product .summary-inner > .price del,
.single-product .summary-inner > .price del .amount,
.single-product .summary-inner > .price del bdi {
	color: rgba(255, 255, 255, .6);
	font-size: 17px;
}

.single-product .summary-inner > .price .woocommerce-price-suffix {
	color: rgba(255, 255, 255, .75);
}

/* ---------------------------------------------------------------------
   5.3 Section rules
   Every product block in the pamphlet is separated by a short rule. Section
   titles get the same treatment so the pages read as one family.
   --------------------------------------------------------------------- */

.wd-title-wrapp .liner-continer::after,
.widget-title::after,
.wd-widget-title::after {
	background-color: var(--pps-bright);
}

.wd-title-wrapp.text-left .title::after,
.wd-el-title::after {
	background-color: var(--pps-bright);
}

/* ---------------------------------------------------------------------
   5.4 Category header for the promo archive
   A tint wash and a bright-blue rule, so the September Specials archive announces
   itself the way the mailer's cover page does.
   --------------------------------------------------------------------- */

.tax-product_cat.term-september-specials .page-title,
.tax-product_cat.term-accessories .page-title {
	padding: 26px 0 22px;
	border-bottom: 3px solid var(--pps-bright);
	background: linear-gradient(180deg, var(--pps-tint), #fff);
}

.tax-product_cat.term-september-specials .page-title .entry-title,
.tax-product_cat.term-accessories .page-title .entry-title {
	color: var(--pps-navy);
}

/* ---------------------------------------------------------------------
   5.5 "Select options" on upgradeable products
   Products carrying upgrades link to their own page instead of adding straight
   to the cart (see inc/upgrades/frontend.php). Give that button the outlined
   treatment so it reads as "there is a choice to make here", not as a
   second-class add-to-cart.
   --------------------------------------------------------------------- */

.wd-product .wd-add-btn > a.product_type_simple:not(.add_to_cart_button) {
	border: 2px solid var(--pps-navy);
	background-color: transparent;
	color: var(--pps-navy);
}

.wd-product .wd-add-btn > a.product_type_simple:not(.add_to_cart_button):hover {
	background-color: var(--pps-navy);
	color: #fff;
}

/* =====================================================================
   6. SEPTEMBER MONTHLY MAILER PAGE
   ---------------------------------------------------------------------
   Layout for /monthly-mailer/. The deal grids are stock WoodMart product
   grids and pick up the brand furniture from section 5; what is left is the
   pamphlet's own scaffolding -- the navy contact strip, the cover block, the
   upgrade price list and the closing call to action.

   Containers carry their classes via Elementor's 'css_classes', widgets via
   '_css_classes'; see migration/steps/82-mailer-page.php.
   ===================================================================== */

.pps-mailer-strip {
	color: #fff;
	text-align: center;
}

.pps-mailer-strip p {
	margin: 0;
}

.pps-mailer-strip__terms {
	font-size: 14px;
	letter-spacing: .02em;
	opacity: .9;
}

.pps-mailer-strip__contact {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 26px;
	margin-top: 8px !important;
	font-size: 14px;
	font-weight: 600;
}

.pps-mailer-strip__contact a,
.pps-mailer-cta a {
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, .35);
}

.pps-mailer-strip__contact a:hover,
.pps-mailer-cta a:hover {
	color: var(--pps-bright);
	border-bottom-color: var(--pps-bright);
}

/* --- cover ---------------------------------------------------------- */

.pps-mailer-hero {
	text-align: center;
}

.pps-mailer-eyebrow .elementor-heading-title {
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--pps-bright);
}

.pps-mailer-title .elementor-heading-title {
	margin: 0;
	/* clamp() rather than breakpoints: the headline is the one element that has
	   to stay on two lines from 360px to 1600px, and steps would leave it
	   awkwardly large just under each breakpoint. */
	font-size: clamp(30px, 5vw, 54px);
	line-height: 1.08;
	color: var(--pps-navy);
}

.pps-mailer-sub {
	max-width: 62ch;
	margin: 14px auto 0;
	font-size: 16px;
}

/* --- upgrade price list --------------------------------------------- */

.pps-mailer-table-wrap {
	max-width: 760px;
	margin: 0 auto;
}

/* The table is the one element that genuinely cannot reflow below ~420px, so it
   scrolls inside its own box rather than forcing the page to scroll sideways. */
.pps-mailer-table {
	display: block;
	overflow-x: auto;
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border: 1px solid var(--pps-tint);
	border-radius: 10px;
}

.pps-mailer-table thead th {
	padding: 12px 18px;
	background: var(--pps-navy);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-align: left;
}

.pps-mailer-table td,
.pps-mailer-table th {
	padding: 10px 18px;
	border-bottom: 1px solid var(--pps-tint);
	text-align: left;
}

.pps-mailer-table tr:last-child td {
	border-bottom: 0;
}

.pps-mailer-table__group th {
	padding-top: 16px;
	background: var(--pps-paper);
	color: var(--pps-navy);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.pps-mailer-table__price {
	width: 130px;
	text-align: right !important;
	font-weight: 700;
	white-space: nowrap;
	color: var(--pps-navy);
}

.pps-mailer-table__por {
	color: var(--pps-blue);
	font-size: 12px;
	letter-spacing: .06em;
}

.pps-mailer-note {
	max-width: 760px;
	margin: 16px auto 0;
	font-size: 14px;
	line-height: 1.6;
	color: #4a5568;
}

/* --- closing call to action ----------------------------------------- */

.pps-mailer-cta {
	text-align: center;
	color: #fff;
}

.pps-mailer-cta-title .elementor-heading-title {
	margin: 0;
	font-size: clamp(24px, 3.4vw, 34px);
	color: #fff;
}

.pps-mailer-cta-text {
	max-width: 62ch;
	margin: 0 auto;
	color: rgba(255, 255, 255, .85);
}

@media (max-width: 767px) {
	.pps-mailer-strip__contact {
		flex-direction: column;
		gap: 4px;
	}
}

/* =====================================================================
   7. HEADER
   ---------------------------------------------------------------------
   The header rows get an opaque white background in the header builder
   (migration/steps/71-header.php) so the sticky header is no longer
   see-through once content scrolls beneath it. These rules cover the rest.
   ===================================================================== */

/* "Track your order" sat in a narrow column and wrapped onto two lines. */
.whb-header .pps-track,
.whb-header .pps-track a {
	white-space: nowrap;
}

.whb-header .pps-track a {
	font-weight: 600;
	color: var(--pps-blue);
}

.whb-header .pps-track a:hover {
	color: var(--pps-bright);
}

/* Top bar links on navy: paper white, bright blue on hover. */
.whb-top-bar a {
	color: var(--pps-paper);
}

.whb-top-bar a:hover {
	color: var(--pps-sky);
}

/* Top-level nav in brand navy; active / hovered item in the brand blue. */
.whb-header .wd-nav-main > li > a {
	color: var(--pps-navy);
}

.whb-header .wd-nav-main > li:hover > a,
.whb-header .wd-nav-main > li.current-menu-item > a,
.whb-header .wd-nav-main > li.current-menu-ancestor > a {
	color: var(--pps-blue);
}

/* Mega-menu links stay on one line; the columns size to their content. */
.wd-dropdown-menu.wd-design-sized .wd-sub-menu a {
	white-space: nowrap;
}

/* Mega-menu column headings (New … / Refurbished …). */
.wd-dropdown-menu.wd-design-sized .wd-sub-menu > li > a {
	color: var(--pps-navy);
}

.wd-dropdown-menu.wd-design-sized .wd-sub-menu > li > a:hover,
.wd-dropdown-menu .wd-sub-menu li li > a:hover {
	color: var(--pps-bright);
}

/* =====================================================================
   8. FOOTER
   ---------------------------------------------------------------------
   The footer carries the full-colour header logo on the brand paper
   background, with a brand-blue rule across the top so it reads as its
   own band. Section padding is set on the Elementor containers
   (migration/steps/72-footer.php).
   ===================================================================== */

.wd-footer {
	border-top: 4px solid var(--pps-blue);
	background-color: var(--pps-paper);
}

.wd-footer .elementor-heading-title {
	color: var(--pps-navy);
}

.wd-footer a {
	color: var(--pps-blue);
}

.wd-footer a:hover {
	color: var(--pps-bright);
}

.pps-footer-links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pps-footer-links li {
	margin-bottom: 8px;
}

.pps-footer-links li::before {
	content: none;
}

.pps-footer-bar {
	border-top: 1px solid var(--pps-sky);
}

/* =====================================================================
   9. BRAND LOGO GRID
   ---------------------------------------------------------------------
   The logos have very different shapes (the Dell roundel is square, the
   Lenovo wordmark is 5:1), so a fixed height alone makes Lenovo dominate.
   Cap both dimensions and let each logo sit inside that box.
   ===================================================================== */

.wd-brands .wd-brand-item img {
	width: auto;
	max-width: 140px;
	height: auto;
	max-height: 56px;
	object-fit: contain;
}

.wd-brands.wd-style-bordered .wd-brand-item {
	padding-block: 18px;
}

/* =====================================================================
   10. CONTACT PAGE
   ---------------------------------------------------------------------
   The Contact Form 7 markup (54-contact.php) wraps each field in
   .pps-cf7__field: two up on desktop, one column on phones. Everything
   else on the page is styled on its Elementor widgets.
   ===================================================================== */

.pps-cf7 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 20px;
}

.pps-cf7 p {
	margin: 0;
}

.pps-cf7__field--full {
	grid-column: 1 / -1;
}

.pps-cf7 label {
	display: block;
	margin: 0;
	font-weight: 600;
	font-size: 14px;
	color: var(--pps-navy);
}

.pps-cf7 label > span:not(.wpcf7-form-control-wrap) {
	color: var(--pps-bright);
}

.pps-cf7 .wpcf7-form-control-wrap {
	display: block;
	margin-top: 6px;
}

.pps-cf7 input:not([type="submit"]),
.pps-cf7 select,
.pps-cf7 textarea {
	width: 100%;
	border: 1px solid #d5e0ec;
	border-radius: 8px;
	background-color: var(--pps-paper);
	font-weight: 400;
	transition: border-color .2s, box-shadow .2s;
}

.pps-cf7 input:not([type="submit"]),
.pps-cf7 select {
	height: 48px;
}

.pps-cf7 textarea {
	min-height: 290px;
	resize: vertical;
}

.pps-cf7 input:not([type="submit"]):focus,
.pps-cf7 select:focus,
.pps-cf7 textarea:focus {
	border-color: var(--pps-bright);
	box-shadow: 0 0 0 3px rgba(23, 135, 243, .15);
	background-color: #fff;
}

.pps-cf7__submit,
.pps-cf7__submit > p {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
}

.pps-cf7__submit .wpcf7-submit {
	min-height: 50px;
	padding-inline: 34px;
}

.pps-cf7__submit small {
	font-size: 13px;
	color: #6b7a8c;
}

.pps-contact-map .wd-osm-map-wrapper {
	overflow: hidden;
	border-radius: 10px;
}

/* Contact-method cards lift slightly on hover, since the whole card links. */
.pps-contact-method {
	transition: transform .2s, box-shadow .2s;
}

.pps-contact-method:hover {
	transform: translateY(-4px);
}

.pps-contact-method .elementor-icon-box-description {
	overflow-wrap: anywhere;
}

@media (max-width: 767px) {
	.pps-cf7 {
		grid-template-columns: 1fr;
	}

	.pps-cf7 textarea {
		min-height: 170px;
	}
}

/* =====================================================================
   10. BELOW-THE-FOLD RENDERING
   ---------------------------------------------------------------------
   From the third top-level section down (and the footer), the browser
   skips style, layout and paint until a section nears the viewport. On a
   ~2,000-element page this was most of the main-thread work at load.
   `auto` in contain-intrinsic-size makes the browser remember each
   section's real height once it has rendered, so the scrollbar settles.
   The same rule is inlined with the critical CSS
   (migration/tools/critical/generate.mjs).
   ===================================================================== */

.elementor > .e-con.e-parent:nth-child(n+3),
.wd-footer {
	content-visibility: auto;
	contain-intrinsic-size: auto 700px;
}

/* =====================================================================
   11. METRIC-MATCHED FALLBACK FONTS
   ---------------------------------------------------------------------
   Poppins and League Spartan load after first paint. Poppins is far wider
   than Arial, so text re-wrapped when it arrived (layout shift of 0.22 on
   category pages). Each "Fallback" face is Arial scaled to the brand
   font's metrics, so the swap moves nothing.

   Values generated by Capsize (migration/tools/critical/generate.mjs),
   which inlines the same block with the critical CSS. `html:root` outranks
   WoodMart's own :root font variables whatever order the sheets load in.
   ===================================================================== */

@font-face {
	font-family: "Poppins Fallback";
	src: local("Arial"), local("ArialMT");
	ascent-override: 93.6182%;
	descent-override: 31.2061%;
	line-gap-override: 8.916%;
	size-adjust: 112.1577%;
}

@font-face {
	font-family: "League Spartan Fallback";
	src: local("Arial"), local("ArialMT");
	ascent-override: 75.4681%;
	descent-override: 23.7185%;
	line-gap-override: 0%;
	size-adjust: 92.7544%;
}

html:root {
	--wd-text-font: "Poppins", "Poppins Fallback", Arial, Helvetica, sans-serif;
	--wd-alternative-font: "Poppins", "Poppins Fallback", Arial, Helvetica, sans-serif;
	--wd-header-el-font: "Poppins", "Poppins Fallback", Arial, Helvetica, sans-serif;
	--wd-widget-title-font: "Poppins", "Poppins Fallback", Arial, Helvetica, sans-serif;
	--wd-title-font: "League Spartan", "League Spartan Fallback", Arial, Helvetica, sans-serif;
	--wd-entities-title-font: "League Spartan", "League Spartan Fallback", Arial, Helvetica, sans-serif;
}

/* About page counters use the theme title font (and so its fallback). */
.pps-counter .elementor-counter-number-wrapper {
	font-family: var(--wd-title-font);
}