/* Mobile fixes: Free SEO Tools (page 4147), Subscribe (4143), Privacy Policy
   (3) and every other plain WordPress page (body.sh-plain-page: Terms,
   Cookie Policy, Disclaimer, Thank you, Newsletter confirmation, Round Cut
   waitlist, the two free tools). No mobile Figma frames exist for these, so they are brought onto the
   system verified on the homepage (Figma 109:3). Terms & Conditions (211) is
   an empty Elementor Canvas page with no content to style. Privacy Policy's
   footer is the theme footer template 197, styled in single-post.css.
   Mobile-only; desktop is untouched. */

@media (max-width: 767px) {

	/* ── Header on light backgrounds ─────────────────────────────────────
	   The site-wide mobile header is cream, which all but disappears on the
	   sand (Free SEO Tools), pink (Subscribe) and white (Privacy) tops. Figma's
	   light-background frames draw it in #462222 with the dark wordmark. */
	body.page-id-4147 .sh-nav,
	body.page-id-4143 .sh-nav,
	body.page-id-3 .sh-nav,
	body.sh-plain-page .sh-nav {
		border-bottom-color: #462222 !important;
	}
	body.page-id-4147 .sh-nav .sh-nav-toggle,
	body.page-id-4143 .sh-nav .sh-nav-toggle,
	body.page-id-3 .sh-nav .sh-nav-toggle,
	body.sh-plain-page .sh-nav .sh-nav-toggle {
		color: #462222 !important;
	}
	body.page-id-4147 .sh-nav > .e-flexbox-base:not(.sh-nav-links):not(.sh-mobile-menu) img,
	body.page-id-4143 .sh-nav > .e-flexbox-base:not(.sh-nav-links):not(.sh-mobile-menu) img,
	body.page-id-3 .sh-nav > .e-flexbox-base:not(.sh-nav-links):not(.sh-mobile-menu) img,
	body.sh-plain-page .sh-nav > .e-flexbox-base:not(.sh-nav-links):not(.sh-mobile-menu) img {
		content: url('../../img/socialhart-nav-logo-mobile-dark.svg') !important;
		filter: none !important;
	}
	/* Subscribe's header sits on the white page background above a pink
	   hero; give the bar the hero's pink so the page top reads as one band. */
	body.page-id-4143 .elementor-element-2ef291b {
		background-color: #EAC8C6 !important;
	}

	/* ── Collapsed section backdrops (Free SEO Tools) ────────────────────
	   The grain (293px of an 846px hero), the olive diamonds (203px of the
	   753px coal band) and the pink paper (76px of the 455px newsletter band)
	   were squashed by the generic mobile image height:auto rule, leaving the
	   coal band washed out and its copy nearly invisible. */
	body.page-id-4147 .e-98b8e61-5bef14.e-98b8e61-5bef14,
	body.page-id-4147 .e-444b8bf-83028c.e-444b8bf-83028c,
	body.page-id-4147 .e-c0f421b-2f8283.e-c0f421b-2f8283 {
		height: 100% !important;
	}

	/* ── Column insets ───────────────────────────────────────────────────
	   The system column is 384px at x=28; these ran 24px (tools list) and
	   40px (subscribe). */
	body.page-id-4147 .elementor-element-cbac121 {
		padding-left: 28px !important;
		padding-right: 28px !important;
	}
	body.page-id-4143 .elementor-element-239090a,
	body.page-id-4143 .elementor-element-1cc4500 {
		padding-left: 28px !important;
		padding-right: 28px !important;
	}
	/* Headlines onto the mobile frames' 45/38 Cepelin size (were 56 and 50). */
	body.page-id-4143 .e-ee9b3ee-c76e3e,
	body.page-id-4143 .e-b768aa8-237a92 {
		font-size: 45px !important;
		line-height: 38px !important;
	}

	/* ── Coal band (Free SEO Tools): homepage rhythm ─────────────────────
	   copy 40px under the heading, 238x51 CTA 43px under the copy. */
	body.page-id-4147 .elementor-element-23a119e > p {
		margin: 40px 0 43px !important;
	}
	body.page-id-4147 .elementor-element-23a119e > a.e-button-base {
		min-width: 238px !important;
		width: 238px !important;
	}

	/* ── Newsletter forms (Free SEO Tools band, Subscribe hero) ──────────
	   Homepage geometry: 383x55 outlined fields 13px apart, 20px Source Serif
	   placeholders in the ink colour, a 281x51 button 27px under the last
	   field. The build ran Roboto grey placeholders and a full-width 44px
	   button. The Subscribe hero is centred, so its button is too. */
	body.page-id-4147 .elementor-element-027b42f {
		border-top: 1px solid #3B1919;
		border-bottom: 1px solid #3B1919;
	}
	body.page-id-4147 .elementor-element-aeb97c4 {
		padding: 58px 28px 69px !important;
	}
	body.page-id-4147 .sh-newsletter-form {
		margin-top: 49px !important;
	}
	body.page-id-4147 .sh-newsletter-form .elementor-form-fields-wrapper,
	body.page-id-4143 .sh-newsletter-form .elementor-form-fields-wrapper {
		margin-bottom: 0 !important;
	}
	body.page-id-4147 .sh-newsletter-form .elementor-field-group,
	body.page-id-4143 .sh-newsletter-form .elementor-field-group {
		margin-bottom: 13px !important;
	}
	body.page-id-4147 .sh-newsletter-form .elementor-field-group.e-form__buttons {
		margin: 14px 0 0 !important;
		justify-content: flex-start !important;
	}
	body.page-id-4143 .sh-newsletter-form .elementor-field-group.e-form__buttons {
		margin: 14px 0 0 !important;
		justify-content: center !important;
	}
	body.page-id-4147 .sh-newsletter-form input.elementor-field-textual,
	body.page-id-4143 .sh-newsletter-form input.elementor-field-textual {
		height: 55px !important;
		min-height: 55px !important;
		padding: 0 19px !important;
		border: 1px solid #3B1919 !important;
		border-radius: 0 !important;
		background: transparent !important;
		font-family: 'Source Serif Pro', Georgia, serif !important;
		font-size: 20px !important;
		letter-spacing: -0.6px !important;
		color: #3B1919 !important;
	}
	body.page-id-4147 .sh-newsletter-form input.elementor-field-textual::placeholder,
	body.page-id-4143 .sh-newsletter-form input.elementor-field-textual::placeholder {
		color: #3B1919 !important;
		opacity: 1 !important;
	}
	body.page-id-4147 .sh-newsletter-form .e-form__buttons .elementor-button,
	body.page-id-4143 .sh-newsletter-form .e-form__buttons .elementor-button {
		flex: 0 0 auto !important;
		min-width: 281px !important;
		width: 281px !important;
		min-height: 51px !important;
		height: 51px !important;
		padding: 0 20px !important;
		white-space: nowrap !important;
	}

	/* ── Footers (Free SEO Tools, Subscribe): homepage geometry ──────────
	   No blurb; NAVIGATION x=60 / CONNECT x=275, 70px under the band above;
	   20px links on a 28px pitch; stacked dark wordmark 376x173 91px under
	   the links; one 89px legal row. Subscribe also ran 47px insets. */
	body.page-id-4147 .elementor-element-ba94904,
	body.page-id-4143 .elementor-element-4e51e69 {
		padding: 70px 28px 0 !important;
	}
	body.page-id-4147 .elementor-element-86d3bed,
	body.page-id-4143 .elementor-element-6280504 {
		display: none !important;
	}
	body.page-id-4147 .elementor-element-764dad4,
	body.page-id-4143 .elementor-element-ee0c51b {
		margin-left: 32px !important;
		gap: 0 !important;
		flex-wrap: nowrap !important;
	}
	body.page-id-4147 .elementor-element-1548b7c,
	body.page-id-4143 .elementor-element-5175777 {
		flex: 0 0 215px !important;
		width: 215px !important;
	}
	body.page-id-4147 .elementor-element-764dad4 p:not(:first-child),
	body.page-id-4147 .elementor-element-764dad4 .e-paragraph-link-base,
	body.page-id-4143 .elementor-element-ee0c51b p:not(:first-child),
	body.page-id-4143 .elementor-element-ee0c51b .e-paragraph-link-base {
		font-size: 20px !important;
		letter-spacing: -0.6px !important;
	}
	body.page-id-4147 .elementor-element-764dad4 .e-paragraph-link-base,
	body.page-id-4143 .elementor-element-ee0c51b .e-paragraph-link-base {
		min-height: 28px !important;
		line-height: 28px !important;
	}
	body.page-id-4147 .elementor-element-1548b7c > p:not(:first-child),
	body.page-id-4143 .elementor-element-5175777 > p:not(:first-child) {
		padding-left: 4px !important;
	}
	body.page-id-4147 .elementor-element-02d2d49,
	body.page-id-4143 .elementor-element-05fbd82 {
		padding: 91px 28px 27px !important;
	}
	body.page-id-4147 .elementor-element-02d2d49 > img,
	body.page-id-4143 .elementor-element-05fbd82 > img {
		content: url('../../img/socialhart-wordmark-2line-dark.png');
		width: 376px !important;
		max-width: 100% !important;
		height: 173px !important;
		object-fit: contain !important;
		margin: 0 !important;
	}
	body.page-id-4147 .elementor-element-6cd03d0,
	body.page-id-4143 .elementor-element-c009c13 {
		padding: 23px 26px 22px !important;
		flex-wrap: nowrap !important;
		justify-content: flex-start !important;
		column-gap: 12px !important;
	}
	body.page-id-4147 .elementor-element-c7722ab,
	body.page-id-4143 .elementor-element-969b9c7 {
		flex: 0 0 auto !important;
		width: auto !important;
		flex-wrap: nowrap !important;
		column-gap: 12px !important;
	}
	body.page-id-4147 .elementor-element-bb149d3,
	body.page-id-4143 .elementor-element-8cce91a {
		flex: 0 0 auto !important;
		width: auto !important;
		min-width: 0 !important;
		justify-content: flex-start !important;
	}

	/* ── Privacy Policy (default theme template) ─────────────────────────
	   It rendered in the parent theme's system sans on white with 10px
	   insets. Brought onto the site's type system: cream ground, 28px
	   column, Cepelin headings, Source Serif 22/22 copy in the ink colour. */
	body.page-id-3,
	body.sh-plain-page {
		background-color: #EAE4D8 !important;
	}
	body.page-id-3 main.site-main,
	body.sh-plain-page main.site-main {
		padding: 0 28px 78px !important;
		color: #462222;
	}
	body.page-id-3 .page-header .entry-title,
	body.sh-plain-page .page-header .entry-title {
		margin: 53px 0 36px !important;
		padding: 0 !important;
		font-family: Cepelin, serif !important;
		font-size: 45px !important;
		font-weight: 400 !important;
		line-height: 38px !important;
		text-transform: uppercase !important;
		color: #462222 !important;
	}
	body.page-id-3 .page-content h2,
	body.sh-plain-page .page-content h2 {
		margin: 50px 0 20px !important;
		font-family: Cepelin, serif !important;
		font-size: 40px !important;
		font-weight: 400 !important;
		line-height: 36px !important;
		letter-spacing: -0.4px !important;
		text-transform: uppercase !important;
		color: #462222 !important;
	}
	body.page-id-3 .page-content p,
	body.sh-plain-page .page-content p,
	body.page-id-3 .page-content li,
	body.sh-plain-page .page-content li {
		margin: 0 0 22px !important;
		font-family: 'Source Serif Pro', Georgia, serif !important;
		font-size: 22px !important;
		line-height: 22px !important;
		letter-spacing: -0.66px !important;
		color: #462222 !important;
	}
	body.page-id-3 .page-content a,
	body.sh-plain-page .page-content a {
		color: #462222 !important;
		text-decoration: underline;
		overflow-wrap: anywhere;
	}
	/* Footer 197's coal band on this page: restore the olive backdrop
	   (collapsed to 203px) and the homepage's light olive tint, instead of
	   the 85% brown wash that custom.css adds when the image is missing. */
	body.page-id-3 .e-343c47e-7b070a.e-343c47e-7b070a,
	body.sh-plain-page .e-343c47e-7b070a.e-343c47e-7b070a {
		height: 100% !important;
	}
	body.page-id-3 .elementor-197 .elementor-element-151b1d1,
	body.sh-plain-page .elementor-197 .elementor-element-151b1d1 {
		background-color: rgba(119, 105, 52, 0.35) !important;
		padding: 110px 28px 160px !important;
	}
	body.page-id-3 .elementor-197 .elementor-element-151b1d1 > p,
	body.sh-plain-page .elementor-197 .elementor-element-151b1d1 > p {
		margin: 40px 0 43px !important;
	}
	body.page-id-3 .elementor-197 .elementor-element-151b1d1 > a.e-button-base,
	body.sh-plain-page .elementor-197 .elementor-element-151b1d1 > a.e-button-base {
		min-width: 238px !important;
		width: 238px !important;
	}
}
@media (max-width: 439px) {
	body.page-id-4147 .elementor-element-6cd03d0,
	body.page-id-4147 .elementor-element-c7722ab,
	body.page-id-4143 .elementor-element-c009c13,
	body.page-id-4143 .elementor-element-969b9c7 {
		flex-wrap: wrap !important;
	}
}

/* Plain pages: Termly policies and the free-tool iframes fill the column. */
@media (max-width: 767px) {
	body.sh-plain-page .sh-termly-policy,
	body.sh-plain-page .sh-termly-policy iframe,
	body.sh-plain-page iframe.sh-free-tool {
		width: 100% !important;
		max-width: 100% !important;
	}
	body.sh-plain-page .page-content h3 {
		margin: 40px 0 16px !important;
		font-family: Cepelin, serif !important;
		font-size: 30px !important;
		font-weight: 400 !important;
		line-height: 28px !important;
		text-transform: uppercase !important;
		color: #462222 !important;
	}
	body.sh-plain-page .page-content h2 a,
	body.sh-plain-page .page-content h3 a {
		color: inherit !important;
		text-decoration: none !important;
	}
}