/* Small site-wide fixes from the 2026-10-05 pre-review sweep. This folder's
   files load at every width, so each rule carries its own media query. */

/* ── Review carousel arrows: removed (client feedback 2026-10-12, "this
   looks bad"). The row still drifts on its own and takes a swipe, a
   trackpad or a mouse drag (mobile-nav.js); the 72px strip that held the
   arrows under the row is gone with them. */

/* ── Review cards on phones ────────────────────────────────────────────────
   Only the first card carried the phone type size; the rest rendered small
   and double-spaced. Services, Bubbly and Success Stories were fixed per
   page; this covers every page that carries the carousel. */
@media (max-width: 767px) {
	.sh-testi-track .sh-testi-quote {
		font-size: 30px !important;
		line-height: 27px !important;
	}
}

/* ── Bubbly: placeholder script heading ────────────────────────────────────
   The heading above "Do you show up on Google the way you'd like to?" still
   reads "Subheading", the Figma's own placeholder; the client's live page
   has nothing there. Hidden until she supplies wording (the element stays
   in the page, so adding text and removing this rule restores it). */
body.page-id-35 .e-bd1ccef-c5697a {
	display: none !important;
}

/* ── Success Stories: luggage tag ──────────────────────────────────────────
   The tag is drawn to hang from the ticker into the olive band, as on
   Resources. On this page the logo strip, reviews and founder block were
   added between the two, so it lay across the "Socialhart has worked with"
   label and the logos. It hangs from the top of the olive band instead. */
body.page-id-37 .elementor-element-6e6cfd8::after {
	content: none !important;
}
@media (min-width: 768px) {
	body.page-id-37 .elementor-element-f81aa54::after {
		content: "";
		position: absolute;
		top: -24px;
		left: 1039px;
		width: 274px;
		height: 283px;
		background: url('../../../../../uploads/2026/08/tag_transparent.png') center / contain no-repeat;
		pointer-events: none;
		z-index: 3;
	}
}
@media (min-width: 768px) and (max-width: 1024px) {
	body.page-id-37 .elementor-element-f81aa54::after {
		left: auto;
		right: 40px;
		width: 200px;
		height: 207px;
	}
}
@media (max-width: 767px) {
	body.page-id-37 .elementor-element-f81aa54::after {
		content: "";
		position: absolute;
		top: -64px;
		left: 29.18%;
		width: 65.98%;
		aspect-ratio: 290 / 304;
		background: url('../../../../../uploads/2026/08/tag_transparent.png') center / 100% 100% no-repeat;
		pointer-events: none;
		z-index: 3;
	}
}

/* ── Inquiry form anchor ───────────────────────────────────────────────────
   Booking buttons link to #book, the HoneyBook inquiry form. The nav is
   pinned, so the form stops clear of it rather than underneath. */
#book {
	scroll-margin-top: 120px;
}
html {
	scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* Etched: the inquiry form replaces the old lead form in the same panel. As
   a flex child the shortcode widget shrank to the iframe's default 300px;
   it fills the panel instead, as the form does on the Contact page. */
body.page-id-4146 .elementor-widget-shortcode:has(#book),
body.page-id-4146 .elementor-widget-shortcode:has(#book) .elementor-shortcode,
body.page-id-4146 #book,
body.page-id-4146 #book > div,
body.page-id-4146 #book iframe {
	width: 100% !important;
	max-width: 100% !important;
}
body.page-id-4146 .elementor-widget-shortcode:has(#book) {
	flex: 1 1 100% !important;
}

/* ── Luggage tags on big monitors (client feedback 2026-10-11) ─────────────
   Each tag is placed from the left or the centre for the 1512 design, so on
   a wider screen it slid in toward the middle of its band. Past 1512 each
   keeps its design gap from the right edge instead, as on Home and About
   (measured with build-scripts/wide-zoom-audit/tag_audit.py). */
@media (min-width: 1513px) {
	:is(.page-id-4144, .page-id-4145, .page-id-4146) .elementor > .e-con:nth-child(10)::after,
	body.page-id-37 .elementor-element-f81aa54::after,
	body.page-id-36 .elementor-element-0ecf4f4::after {
		left: auto !important;
		right: 199px !important;
	}
	body.page-id-35 .elementor-element-087285e > img[src*="tag_"] {
		left: auto !important;
		inset-inline-start: auto !important;
		right: 208px !important;
	}
}

/* ── Etched "How it works": steps in line (client feedback 2026-10-11) ────
   Steps 1-5 and 6-9 were two separate columns, each box as tall as its own
   text (147-249px) with an 86px gap under it, so the columns drifted out of
   step and the boxes looked staggered. The columns now dissolve into one
   five-row grid that fills down the left, then the right: same reading
   order, each pair of boxes (1 & 6, 2 & 7 ...) the same height and level. */
@media (min-width: 768px) {
	body.page-id-4146 .elementor-element-01f202f {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: repeat(5, auto);
		grid-auto-flow: column;
		align-items: stretch;
	}
	/* rows keep the design's 86px under each box (its margin, set in
	   sales-variants.css), so the grid adds no row gap of its own; this
	   selector out-ranks the one there that sets gap: 36px */
	body.page-id-4146 .elementor > .e-con:nth-child(3) > .e-con > .e-con {
		row-gap: 0 !important;
	}
	body.page-id-4146 :is(.elementor-element-1dc3ea3, .elementor-element-afef82e) {
		display: contents !important;
	}
	body.page-id-4146 :is(.elementor-element-61ad261, .elementor-element-a6c5bf8,
	                      .elementor-element-05a436b, .elementor-element-1284e5f,
	                      .elementor-element-f9b638b, .elementor-element-9315a90,
	                      .elementor-element-e159c96, .elementor-element-5b56fa5,
	                      .elementor-element-a76b18f) {
		width: auto !important;
		height: auto !important;
	}
}
@media (min-width: 768px) and (max-width: 1024px) {
	body.page-id-4146 .elementor > .e-con:nth-child(3) > .e-con > .e-con {
		row-gap: 64px !important;
	}
	body.page-id-4146 :is(.elementor-element-61ad261, .elementor-element-a6c5bf8,
	                      .elementor-element-05a436b, .elementor-element-1284e5f,
	                      .elementor-element-f9b638b, .elementor-element-9315a90,
	                      .elementor-element-e159c96, .elementor-element-5b56fa5,
	                      .elementor-element-a76b18f) {
		margin: 0 !important;
	}
}

/* ── Etched "How it works": step cards that reveal on hover ────────────────
   (client feedback 2026-10-11: the Growth Rizz breakdown boxes, with the
   About / Bubbly stat-card hover.) At rest each step is its title, centred
   on the step's colour inside a frame 10px in from the edge (an inset
   shadow, so the outline stays free for keyboard focus). On hover, keyboard
   focus, or a tap where there is no hover (mobile-nav.js adds
   .sh-stat-revealed), the pink argyle face of the stat cards fades in with
   the step's copy. The face is the Elementor paragraph itself. With the
   copy off the card every step is one height, so the rows close up from
   the design's 86px to 30px. Applies at every width. */
body.page-id-4146 .elementor > .e-con:nth-child(3) .elementor-element-01f202f > .e-con > .e-con {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	height: 240px !important;
	min-height: 0 !important;
	padding: 0 44px !important;
	overflow: hidden !important;
	box-shadow: inset 0 0 0 10px var(--sh-step), inset 0 0 0 11px var(--sh-step-ink);
	cursor: default;
	outline: none;
}
body.page-id-4146 .elementor > .e-con:nth-child(3) > .e-con > .e-con > .e-con > .e-con {
	margin-bottom: 0 !important;
}
body.page-id-4146 .elementor > .e-con:nth-child(3) .elementor-element-01f202f > .e-con > .e-con > h4 {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	/* the build hangs the step number in the margin (43px indent, -35px
	   first line); centred titles want neither */
	padding-inline: 0 !important;
	text-indent: 0 !important;
	text-align: center !important;
}
body.page-id-4146 .elementor > .e-con:nth-child(3) .elementor-element-01f202f > .e-con > .e-con > p {
	position: absolute !important;
	inset: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 60px !important;
	background: #EAC8C6 url('../../img/stat-card-hover.webp') center / cover no-repeat;
	color: var(--sh-on-light) !important;
	text-align: center !important;
	opacity: 0 !important;
	transition: opacity 0.25s ease !important;
	pointer-events: none;
}
body.page-id-4146 .elementor > .e-con:nth-child(3) .elementor-element-01f202f > .e-con > .e-con:focus-visible {
	outline: 2px solid #462222;
	outline-offset: 4px;
}
body.page-id-4146 .elementor > .e-con:nth-child(3) .elementor-element-01f202f > .e-con > .e-con:is(:focus-visible, .sh-stat-revealed) > p {
	opacity: 1 !important;
}
@media (hover: hover) {
	body.page-id-4146 .elementor > .e-con:nth-child(3) .elementor-element-01f202f > .e-con > .e-con:hover > p {
		opacity: 1 !important;
	}
}
@media (prefers-reduced-motion: reduce) {
	body.page-id-4146 .elementor > .e-con:nth-child(3) .elementor-element-01f202f > .e-con > .e-con > p {
		transition: none !important;
	}
}
@media (min-width: 1025px) {
	body.page-id-4146 .elementor > .e-con:nth-child(3) > .e-con > .e-con {
		row-gap: 30px !important;
	}
}
@media (min-width: 768px) and (max-width: 1024px) {
	body.page-id-4146 .elementor > .e-con:nth-child(3) > .e-con > .e-con {
		row-gap: 24px !important;
	}
	body.page-id-4146 .elementor > .e-con:nth-child(3) .elementor-element-01f202f > .e-con > .e-con {
		height: 230px !important;
		padding: 0 30px !important;
	}
	body.page-id-4146 .elementor > .e-con:nth-child(3) .elementor-element-01f202f > .e-con > .e-con > p {
		padding: 0 34px !important;
	}
}
@media (max-width: 767px) {
	body.page-id-4146 .elementor > .e-con:nth-child(3) > .e-con > .e-con > .e-con > .e-con {
		margin-bottom: 20px !important;
	}
	body.page-id-4146 .elementor > .e-con:nth-child(3) .elementor-element-01f202f > .e-con > .e-con {
		height: 260px !important;
		padding: 0 30px !important;
	}
	body.page-id-4146 .elementor > .e-con:nth-child(3) .elementor-element-01f202f > .e-con > .e-con > p {
		padding: 0 30px !important;
	}
}

/* ── Free SEO Tools: hover-reveal tool cards (user's pick, 2026-10-11/12) ──
   The Etched "How it works" treatment: each tool row (.sh-tool-row) is a
   card on its own colour - olive, then red - with a frame 10px inside its
   edge, showing only the tool's name. (The library heading block and the
   hairline dividers were removed from the page: script 36.) Its copy block (promise,
   description, button) is the face that fades in over it, on the stat
   cards' pink argyle, on hover, keyboard focus, or a tap where there is no
   hover (mobile-nav.js adds .sh-stat-revealed). The face only takes clicks
   while it shows, so the button can't be hit blind. All widths. */
body.page-id-4147 .elementor-element-cbac121 {
	flex-direction: row !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	column-gap: 32px !important;
	row-gap: 0 !important;
}
body.page-id-4147 .elementor-element-cbac121 > .sh-tool-row {
	--sh-tool: var(--sh-card-green);
	--sh-tool-ink: var(--sh-on-dark);
	position: relative !important;
	flex: 1 1 0 !important;
	max-width: 560px !important;
	min-width: 0 !important;
	height: 360px !important;
	box-sizing: border-box !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 !important;
	padding: 0 40px !important;
	border: 0 !important;
	background-color: var(--sh-tool) !important;
	box-shadow: inset 0 0 0 10px var(--sh-tool), inset 0 0 0 11px var(--sh-tool-ink);
	overflow: hidden !important;
	cursor: default;
	outline: none;
}
body.page-id-4147 .elementor-element-cbac121 > .sh-tool-row > :is(h2, h3, h4) {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	font-size: 56px !important;
	line-height: 50px !important;
	text-align: center !important;
	color: var(--sh-tool-ink) !important;
}
body.page-id-4147 .elementor-element-cbac121 > .sh-tool-row > :is(h2, h3, h4) a {
	color: inherit !important;
}
body.page-id-4147 .elementor-element-cbac121 > .elementor-element-ee868af {
	--sh-tool: var(--sh-card-red);
}
body.page-id-4147 .elementor-element-cbac121 > .sh-tool-row > .e-con {
	position: absolute !important;
	inset: 0 !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 16px !important;
	box-sizing: border-box !important;
	padding: 0 56px !important;
	background: #EAC8C6 url('../../img/stat-card-hover.webp') center / cover no-repeat;
	opacity: 0 !important;
	pointer-events: none;
	transition: opacity 0.25s ease !important;
}
body.page-id-4147 .elementor-element-cbac121 > .sh-tool-row > .e-con > * {
	max-width: 100% !important;
	margin: 0 !important;
	text-align: center !important;
}
body.page-id-4147 .elementor-element-cbac121 > .sh-tool-row > .e-con > p {
	color: #462222 !important;
}
body.page-id-4147 .elementor-element-cbac121 > .sh-tool-row:focus-visible {
	outline: 2px solid #462222;
	outline-offset: 4px;
}
body.page-id-4147 .elementor-element-cbac121 > .sh-tool-row:is(:focus-within, .sh-stat-revealed) > .e-con {
	opacity: 1 !important;
	pointer-events: auto;
}
@media (hover: hover) {
	body.page-id-4147 .elementor-element-cbac121 > .sh-tool-row:hover > .e-con {
		opacity: 1 !important;
		pointer-events: auto;
	}
}
@media (prefers-reduced-motion: reduce) {
	body.page-id-4147 .elementor-element-cbac121 > .sh-tool-row > .e-con {
		transition: none !important;
	}
}
@media (min-width: 768px) and (max-width: 1024px) {
	body.page-id-4147 .elementor-element-cbac121 > .sh-tool-row > :is(h2, h3, h4) {
		font-size: 44px !important;
		line-height: 40px !important;
	}
	body.page-id-4147 .elementor-element-cbac121 > .sh-tool-row > .e-con {
		padding: 0 32px !important;
	}
}
@media (max-width: 767px) {
	body.page-id-4147 .elementor-element-cbac121 > .sh-tool-row {
		flex: 0 0 100% !important;
		max-width: 100% !important;
		height: 380px !important;
		margin-top: 24px !important;
		padding: 0 24px !important;
	}
	body.page-id-4147 .elementor-element-cbac121 > .sh-tool-row > :is(h2, h3, h4) {
		font-size: 40px !important;
		line-height: 38px !important;
	}
	body.page-id-4147 .elementor-element-cbac121 > .sh-tool-row > .e-con {
		padding: 0 24px !important;
	}
}

/* ── Shop: sign-up hero (client request 2026-10-12) ───────────────────────
   build-scripts/client-qa/38-shop-signup-hero.php; Figma "Homepage" 83:567
   (1512x840, the menu bar's 70px included). Measured from the frame top:
   deer 66x98 at y119, headline 631px wide at y235 (Cepelin 50/45), two
   360x55 outlined fields 15px apart at y379, a 272x51 cream button at y462
   ("I want the freebie please!"), wordmark 1414px at x49, y608.
   The background is the frame's own layers flattened at 2x by
   compositing Figma renders: #3B1919, the argyle at 50%, a texture in
   overlay at 40% (img/shop-hero-argyle.webp). The sign-up is the site's
   Flodesk newsletter form (the client's choice). The hero runs up under
   the menu bar, as in the frame. */
/* Shop is the one design page on the default template, so the theme printed
   a "Shop" title between the menu and the page (live too); the design has
   none. Same effect as Elementor's "Hide title". */
body.page-id-4187 .page-header {
	display: none !important;
}
body.page-id-4187 .sh-shop-hero {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	height: 840px !important;
	margin-top: -72px !important;
	padding: 119px 40px 0 !important;
	box-sizing: border-box !important;
	overflow: hidden !important;
	background: #3B1919 url('../../img/shop-hero-argyle.webp') center top / cover no-repeat !important;
	text-align: center !important;
}
body.page-id-4187 .sh-shop-hero > .sh-shop-hero-deer {
	position: static !important;
	width: 66px !important;
	height: 98px !important;
	object-fit: contain !important;
	margin: 0 !important;
}
body.page-id-4187 .sh-shop-hero > .sh-shop-hero-title {
	position: static !important;
	width: 631px !important;
	max-width: 100% !important;
	margin: 18px 0 0 !important;
	color: #EAE4D8 !important;
	font-size: 50px !important;
	line-height: 45px !important;
	letter-spacing: -0.5px !important;
	text-align: center !important;
}
body.page-id-4187 .sh-shop-hero > .sh-shop-hero-form {
	width: 735px !important;
	max-width: 100% !important;
	margin: 54px 0 0 !important;
}
body.page-id-4187 .sh-shop-hero .sh-flodesk-form [data-ff-el="fields"] {
	flex-direction: row !important;
	gap: 15px !important;
}
body.page-id-4187 .sh-shop-hero .sh-flodesk-form input.fd-form-control {
	border-color: #EAE4D8 !important;
	color: #EAE4D8 !important;
}
body.page-id-4187 .sh-shop-hero .sh-flodesk-form label.fd-form-label {
	color: #EAE4D8 !important;
	text-transform: capitalize !important;
}
body.page-id-4187 .sh-shop-hero .sh-flodesk-form [data-ff-el="root"] [data-ff-el="footer"] {
	margin: 28px 0 0 !important;
	text-align: center !important;
}
body.page-id-4187 .sh-shop-hero .sh-flodesk-form button.fd-btn {
	width: 272px !important;
	color: #3B1919 !important;
}
body.page-id-4187 .sh-shop-hero .sh-flodesk-form button.fd-btn > span::after {
	content: "I want the freebie please!";
}
body.page-id-4187 .sh-shop-hero .sh-flodesk-form :is([data-ff-el="success"], [data-ff-el="error"]) {
	color: #EAE4D8 !important;
	text-align: center !important;
}
/* Figma's lockup carries the H crossbar running on across the A, as on
   Home (same file). */
body.page-id-4187 .sh-shop-hero > .sh-shop-hero-wordmark {
	content: url('../../img/socialhart-wordmark-hbar.svg');
	position: absolute !important;
	left: calc(50% - 707px) !important;
	top: 608px !important;
	width: 1414px !important;
	max-width: none !important;
	height: 186px !important;
	margin: 0 !important;
}
@media (max-width: 767px) {
	body.page-id-4187 .sh-shop-hero {
		height: auto !important;
		padding: 104px 24px 22px !important;
	}
	body.page-id-4187 .sh-shop-hero > .sh-shop-hero-title {
		font-size: 40px !important;
		line-height: 37px !important;
	}
	body.page-id-4187 .sh-shop-hero > .sh-shop-hero-form {
		margin-top: 32px !important;
	}
	body.page-id-4187 .sh-shop-hero .sh-flodesk-form [data-ff-el="fields"] {
		flex-direction: column !important;
		gap: 13px !important;
	}
	body.page-id-4187 .sh-shop-hero > .sh-shop-hero-wordmark {
		display: block !important;
		position: static !important;
		width: calc(100% + 24px) !important;
		height: auto !important;
		margin: 48px -12px 0 !important;
	}
}

/* ── Contact: collaborations band in plain textured sand ──────────────────
   (client feedback 2026-10-12: "the checkers right next to the checkers" -
   the sand argyle sat directly on the olive argyle coal band.) The argyle
   overlay image goes; the band keeps its sand (#DCC38B, style guide) with
   the site's grain texture laid over it, as on the Bubbly fresco band.
   Contact only: on About this band isn't next to the coal band. */
body.page-id-210 .elementor-element-57c2e2c > img[class*="e-b367ac5"] {
	display: none !important;
}
body.page-id-210 .elementor-element-57c2e2c {
	background:
		url('../../../../../uploads/2026/08/step_grain_overlay.jpg') center / cover no-repeat,
		#DCC38B !important;
	background-blend-mode: soft-light, normal !important;
}

/* ── Contact: "this, or that" as hover-reveal cards (user, 2026-10-12) ────
   Same treatment as the Free SEO Tools cards: two outlined cards showing
   only the heading; the paragraph is the face that fades in on the stat
   cards' pink argyle on hover, keyboard focus, or a tap where there is no
   hover (mobile-nav.js adds .sh-stat-revealed). The "option two" line
   sits under them. */
body.page-id-210 .sh-choice-section {
	background: #EAE4D8 !important;
}
body.page-id-210 .sh-choice-row {
	justify-content: center !important;
	align-items: stretch !important;
	gap: 24px !important;
}
body.page-id-210 .sh-choice-row > [data-id] {
	position: relative !important;
	flex: 1 1 0 !important;
	max-width: 560px !important;
	height: 320px !important;
	box-sizing: border-box !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 48px !important;
	border: 1px solid #462222 !important;
	background: transparent !important;
	overflow: hidden !important;
	cursor: default;
	outline: none;
}
body.page-id-210 .sh-choice-row > [data-id] > :is(h2, h3, h4) {
	width: 100% !important;
	margin: 0 !important;
	font-size: 48px !important;
	line-height: 44px !important;
	text-align: center !important;
	color: #462222 !important;
}
body.page-id-210 .sh-choice-row > [data-id] > p {
	position: absolute !important;
	inset: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 64px !important;
	background: #EAC8C6 url('../../img/stat-card-hover.webp') center / cover no-repeat;
	color: #462222 !important;
	text-align: center !important;
	opacity: 0 !important;
	transition: opacity 0.25s ease !important;
	pointer-events: none;
}
body.page-id-210 .sh-choice-row > [data-id]:focus-visible {
	outline: 2px solid #462222;
	outline-offset: 4px;
}
body.page-id-210 .sh-choice-row > [data-id]:is(:focus-within, .sh-stat-revealed) > p {
	opacity: 1 !important;
}
@media (hover: hover) {
	body.page-id-210 .sh-choice-row > [data-id]:hover > p {
		opacity: 1 !important;
	}
}
@media (prefers-reduced-motion: reduce) {
	body.page-id-210 .sh-choice-row > [data-id] > p {
		transition: none !important;
	}
}
body.page-id-210 .sh-choice-section > [data-id="554af86"] {
	margin-top: 40px !important;
}
@media (max-width: 767px) {
	body.page-id-210 .sh-choice-row {
		flex-direction: column !important;
		gap: 20px !important;
	}
	body.page-id-210 .sh-choice-row > [data-id] {
		flex: 0 0 auto !important;
		max-width: 100% !important;
		height: 340px !important;
		padding: 0 24px !important;
	}
	body.page-id-210 .sh-choice-row > [data-id] > :is(h2, h3, h4) {
		font-size: 38px !important;
		line-height: 36px !important;
	}
	body.page-id-210 .sh-choice-row > [data-id] > p {
		padding: 0 26px !important;
	}
}

/* ── Contact: Meet the Founder with the "sigh of relief" lead (script 42) ──
   The lead takes the copy's 564px measure, and the section absorbs it: the
   photo panel stretches to the section's full height, and the gap under the
   heading tightens from 134px so the section stays near its design height. */
@media (min-width: 768px) {
	body.page-id-210 .sh-founder-section > .sh-founder-frame {
		height: auto !important;
		min-height: 100% !important;
		align-self: stretch !important;
	}
	body.page-id-210 .sh-founder-section .sh-founder-lead {
		width: 564px !important;
		max-width: 100% !important;
	}
	body.page-id-210 .sh-founder-section [class*="e-b230592"] {
		margin-bottom: 56px !important;
	}
}
body.page-id-210 .sh-founder-section .sh-founder-lead {
	margin: 0 0 28px !important;
	padding-bottom: 24px !important;
	border-bottom: 1px solid #462222;
	font-style: italic !important;
	text-align: left !important;
}

/* ── Footer credit: "Site built by TrustTech Digital" (script 43) ─────────
   The old "Site Credit" sat in a box sized to those two words; the longer
   credit stays on one line. */
.e-paragraph-base:has(> a[href*="/acknowledgements/"]),
a[href*="/acknowledgements/"] {
	width: auto !important;
	max-width: none !important;
	white-space: nowrap !important;
}

/* ── Big monitors: newsletter band and footer ───────────────────────────────
   (user, 2026-10-12: "make sure the sections and page is right when viewed
   on a monitor".) Above 1512 these full-width rows pushed their contents to
   the screen edges (newsletter heading far left, form far right; footer
   likewise). (The founder section keeps Home's behaviour - photo centred in
   its half - at the user's request.) Each row gets a transparent border of the extra width on each
   side: it adds to the row's own padding, which differs a little per page,
   so the contents sit exactly where the 1512 design has them, and the
   row's background still paints under the border to the screen edge.
   The newsletter band and footer have different ids on every page; they
   are found by what they hold (the Flodesk form, the Acknowledgements link). */
@media (min-width: 1513px) {
	.elementor > .e-con:has(.sh-newsletter-flodesk):not(.sh-shop-hero) > .e-con,
	.elementor > .e-con:has(a[href*="/acknowledgements/"]) > .e-con {
		box-sizing: border-box !important;
		border-left: calc((100vw - 1512px) / 2) solid transparent !important;
		border-right: calc((100vw - 1512px) / 2) solid transparent !important;
	}
}

/* ── Category / tag / author / search pages (template-parts/archive.php) ───
   Same type as the Blog page: Carta Nueva script eyebrow, Cepelin caps
   title, Source Serif line, the resource cards; cream page. */
body:is(.archive, .search) {
	background: #EAE4D8 !important;
}
main.site-main.sh-archive {
	width: 100% !important;
	max-width: 1386px !important;
	margin: 0 auto;
	padding: 72px 0 120px;
	box-sizing: border-box;
	text-align: center;
	color: #462222;
}
.sh-archive-head {
	margin: 0 auto 72px;
	max-width: 900px;
}
.sh-archive-eyebrow {
	margin: 0 0 8px;
	font-family: 'Carta Nueva Unlicensed Trial', 'Carta Nueva', cursive;
	font-size: 60px;
	line-height: 1;
	letter-spacing: -0.6px;
	color: #462222;
}
.sh-archive-title {
	margin: 0;
	font-family: 'Cepelin', sans-serif;
	font-weight: 400;
	font-size: 70px;
	line-height: 58.8px;
	text-transform: uppercase;
	color: #462222;
}
.sh-archive-desc {
	margin: 24px auto 0;
	max-width: 640px;
	font-family: 'Source Serif Pro', Georgia, serif;
	font-size: 22px;
	line-height: 26px;
	letter-spacing: -0.66px;
}
.sh-archive-cards {
	margin: 0 auto;
}
.sh-archive .pagination,
.sh-archive .navigation {
	margin-top: 64px;
	font-family: 'Sofia Sans Extra Condensed', sans-serif;
	font-size: 22px;
	text-transform: uppercase;
}
.sh-archive .nav-links {
	display: flex;
	justify-content: center;
	gap: 18px;
}
.sh-archive .nav-links a,
.sh-archive .nav-links span {
	color: #462222;
}
.sh-archive-empty {
	font-family: 'Source Serif Pro', Georgia, serif;
	font-size: 22px;
}
@media (max-width: 767px) {
	.sh-archive {
		padding: 48px 24px 80px;
	}
	.sh-archive-eyebrow { font-size: 44px; }
	.sh-archive-title { font-size: 44px; line-height: 40px; }
	.sh-archive-head { margin-bottom: 44px; }
}

/* ── Menu bar on the blog, posts, categories and search (2026-10-13) ───────
   On these cream pages the bar was transparent with dark links, so it
   merged into the page ("the menu colour merges into the blogs"). It is now
   a solid dark band (#462222) with the cream links, cream wordmark and the
   cream cell rules it has on the dark-topped pages; pinned or not. */
html body:is(.page-id-36, .single-post, .archive, .search) .sh-nav,
html body:is(.page-id-36, .single-post, .archive, .search) .sh-nav.sh-nav-stuck {
	background-color: #462222 !important;
	border-bottom-color: #EAE4D8 !important;
}
html body:is(.page-id-36, .single-post, .archive, .search) .sh-nav-links .e-paragraph-base,
html body:is(.page-id-36, .single-post, .archive, .search) .sh-nav-links a,
html body:is(.page-id-36, .single-post, .archive, .search) .sh-nav-toggle {
	color: #EAE4D8 !important;
}
html body:is(.page-id-36, .single-post, .archive, .search) .sh-nav > .e-flexbox-base,
html body:is(.page-id-36, .single-post, .archive, .search) .sh-nav-links > .e-flexbox-base {
	border-color: #EAE4D8 !important;
}
html body:is(.page-id-36, .single-post, .archive, .search) .sh-nav > .e-flexbox-base:not(.sh-nav-links):not(.sh-mobile-menu) img {
	content: url('../../img/socialhart-nav-logo-bar.svg') !important;
	filter: none !important;
}
@media (max-width: 767px) {
	html body:is(.page-id-36, .single-post, .archive, .search) .sh-nav > .e-flexbox-base:not(.sh-nav-links):not(.sh-mobile-menu) img {
		content: url('../../img/socialhart-nav-logo-mobile.svg') !important;
	}
}

/* ── Newsletter pop-up on phones (client 2026-10-13: "needs to be longer,
   currently have to scroll inside the box") ───────────────────────────────
   The card was capped at 100vh - 48px with its own scrollbar; on an iPhone
   with Safari's toolbars (and larger text settings) that cap fell well
   short of the content. On phones the card now takes its content's full
   height, a little tighter, and never scrolls inside; on a screen too short
   for it, the whole overlay scrolls instead. */
@media (max-width: 767px) {
	.sh-popup {
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch;
		grid-template-columns: minmax(0, 1fr) !important;
		place-items: start stretch !important;
		align-content: center;
		padding: 16px !important;
		z-index: 10000 !important;      /* above the cookie banner (9999) */
	}
	.sh-popup-card {
		max-height: none !important;
		min-height: 0 !important;
		height: auto !important;
		overflow: visible !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: auto 0;
		padding: 52px 22px 32px !important;
	}
	.sh-popup-deer { width: 40px !important; margin-bottom: 12px !important; }
	.sh-popup-card .sh-popup-title { font-size: 40px !important; line-height: 37px !important; margin-bottom: 12px !important; }
	.sh-popup-card .sh-popup-copy { font-size: 17px !important; line-height: 21px !important; margin-bottom: 18px !important; }
}

@media (max-width: 767px) {
	.sh-popup-card .sh-flodesk-form,
	.sh-popup-card .sh-flodesk-form :is([data-ff-el="root"], form, [data-ff-el="content"], [data-ff-el="fields"], .fd-form-group, input.fd-form-control, button.fd-btn) {
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
	}
}

/* ── Shop: the pinned menu (client 2026-10-13) ─────────────────────────────
   The menu takes the colour behind it when it pins (mobile-nav.js). On Shop
   it sits above the sign-up hero, over the cream page, so the bar turned
   cream under its cream links. Pinned, it now takes the hero's #3B1919. */
html body.page-id-4187 .sh-nav.sh-nav-stuck {
	background-color: #3B1919 !important;
}