/*
Theme Name: Hubhom Theme
Text Domain: hubhom
Version: 1.0.0
*/

.hubhom-broken-grid-left {
	padding-left: max(1.5rem, calc(50vw - 570px)) !important;
}

.hubhom-no-gap {
	gap: 0 !important;
}

/* Feature Grid Dividers */
@media (min-width: 782px) {
	.hubhom-feature-column-middle {
		border-left: 1px solid #e0e0e0;
		border-right: 1px solid #e0e0e0;
		padding-left: 2rem !important;
		padding-right: 2rem !important;
	}
}

@media (max-width: 781px) {
	.hubhom-feature-column-middle {
		border-top: 1px solid #e0e0e0;
		border-bottom: 1px solid #e0e0e0;
		padding-top: 2rem !important;
		padding-bottom: 2rem !important;
		margin-top: 2rem;
		margin-bottom: 2rem;
	}
}

.hubhom-fse-card {
	overflow: hidden !important;
	height: 100% !important;
	flex-grow: 1 !important;
}

.hubhom-fse-card>.wp-block-group {
	flex-grow: 1 !important;
}

.is-position-sticky,
header.wp-block-template-part {
	position: sticky !important;
	top: 0 !important;
	z-index: 50 !important;
}



/* Force equal heights inside the Gutenberg Editor and Frontend */
.hubhom-fse-column {
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
}

/* Solutions Package - Grid layout for icon + text */
.hubhom-icon-text-row {
	display: grid !important;
	grid-template-columns: 64px 1fr !important;
	gap: 1rem !important;
	align-items: start !important;
}

.hubhom-icon-text-row .wp-block-image {
	width: 64px !important;
	height: 64px !important;
	min-width: 64px !important;
	max-width: 64px !important;
	flex-shrink: 0 !important;
}

.hubhom-icon-text-row .wp-block-image img {
	width: 64px !important;
	height: 64px !important;
	object-fit: contain !important;
}

.hubhom-fse-column .block-editor-block-list__block,
.hubhom-fse-column .block-editor-inner-blocks,
.hubhom-fse-column .block-editor-block-list__layout {
	display: flex !important;
	flex-direction: column !important;
	flex-grow: 1 !important;
	height: 100% !important;
}

.hubhom-z-10 {
	position: relative !important;
	z-index: 10 !important;
}

.hubhom-showcase-img img {
	object-fit: cover !important;
	object-position: right center !important;
	height: 100% !important;
	width: 100% !important;
	max-height: 500px;
}

.hubhom-short-divider {
	position: relative;
}

.hubhom-short-divider::after {
	content: '';
	position: absolute;
	right: 0;
	top: 15%;
	bottom: 15%;
	width: 1px;
	background-color: #e2e8f0;
}

@media (max-width: 781px) {
	.hubhom-short-divider::after {
		right: 15%;
		left: 15%;
		bottom: 0;
		top: auto;
		height: 1px;
		width: 70%;
	}
}

/* How It Works (Step List) Pattern */
.hubhom-step-container {
	align-items: flex-start !important;
}

.hubhom-step-column {
	position: relative;
}

.hubhom-step-number {
	background-color: #3fa39c;
	color: #ffffff;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.85rem;
	margin: 0 !important;
}

.hubhom-step-icon-wrapper {
	background-color: #e8f5f4;
	border: 1px solid #e8f5f4;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	margin: 0 auto;
}

@media (min-width: 782px) {
	.hubhom-step-column:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 106px;
		/* 28px (number) + 1.5rem (24px gap) + 48px (half of 96px icon) + small offset = ~100px */
		left: 50%;
		width: 100%;
		border-top: 2px dashed #3fa39c;
		z-index: -1;
	}
}

/* All in One (Solutions Package) Pattern */
.hubhom-aio-wrapper {
	border: 1px solid #e8f5f4;
	border-radius: 20px;
	background-color: #ffffff;
}

.hubhom-aio-content-area {
	position: relative;
	padding-bottom: 2rem;
}

.hubhom-aio-left-card {
	border: 1px solid #ffebee;
	background: linear-gradient(135deg, #fffafa 0%, #ffffff 100%);
	border-radius: 16px;
	position: relative;
	z-index: 1;
}

.hubhom-aio-right-card {
	border: 1px solid #e8f5f4;
	background: linear-gradient(135deg, #e8f5f4 0%, #ffffff 100%);
	border-radius: 16px;
	position: relative;
	z-index: 1;
}

.hubhom-aio-center-circle {
	background: radial-gradient(circle, #e8f5f4 0%, rgba(255, 255, 255, 0.9) 70%);
	border: 2px solid #e8f5f4;
	border-radius: 50%;
	width: 280px;
	height: 280px;
	padding: 2rem;
	box-shadow: 0 10px 30px rgba(16, 94, 142, 0.05);
	margin: 2rem auto;
	position: relative;
	z-index: 5;
}

/* Arrows */
.hubhom-aio-arrows {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 100%;
	transform: translateY(-50%);
	pointer-events: none;
}

.hubhom-aio-arrows::before,
.hubhom-aio-arrows::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 60px;
	height: 4px;
	transform: translateY(-50%);
}

.hubhom-aio-arrows::before {
	right: 100%;
	background: linear-gradient(to left, rgba(229, 57, 53, 0) 0%, #e53935 100%);
}

.hubhom-aio-arrows::after {
	left: 100%;
	background: linear-gradient(to right, rgba(0, 131, 143, 0) 0%, #3fa39c 100%);
}

.hubhom-aio-center-circle::before,
.hubhom-aio-center-circle::after {
	content: "";
	position: absolute;
	top: 50%;
	border-style: solid;
	transform: translateY(-50%);
}

.hubhom-aio-center-circle::before {
	right: 100%;
	margin-right: 50px;
	border-width: 10px 14px 10px 0;
	border-color: transparent #e53935 transparent transparent;
}

.hubhom-aio-center-circle::after {
	left: 100%;
	margin-left: 50px;
	border-width: 10px 0 10px 14px;
	border-color: transparent transparent transparent #3fa39c;
}

/* Desktop positioning */
@media (min-width: 782px) {
	.hubhom-aio-center-circle {
		position: absolute !important;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		margin: 0;
	}

	.hubhom-aio-left-card {
		padding-right: 160px !important;
	}

	.hubhom-aio-right-card {
		padding-left: 160px !important;
	}
}

@media (max-width: 781px) {

	.hubhom-aio-arrows,
	.hubhom-aio-center-circle::before,
	.hubhom-aio-center-circle::after {
		display: none;
	}
}

/* SOS Alert Pattern CSS */
.hubhom-sos-step-number {
	background-color: #d32f2f !important;
	color: #ffffff !important;
	border-color: #d32f2f !important;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	font-size: 1rem;
	margin: -24px auto 0 auto !important;
	/* Pull up to overlap image, center horizontally */
	position: relative;
	z-index: 5;
}

@media (min-width: 782px) {

	.hubhom-sos-col-1,
	.hubhom-sos-col-2 {
		position: relative;
	}

	/* Removed overengineered connectors for SOS pattern */
}

/* Wellbeing Pattern CSS */
@media (min-width: 782px) {
	.hubhom-wellbeing-banner-left {
		border-right: 1px solid rgba(255, 255, 255, 0.3);
		padding-right: 2rem !important;
	}
}

/* Button Icon Block Extension CSS */
.wp-block-button.with-icon .wp-block-button__link {
	align-items: center;
	display: flex;
	justify-content: center;
	gap: 0.5rem;
}

.wp-block-button.with-icon .wp-block-button__link svg {
	/* Removed fill to support stroke-based SVGs like email and phone */
}

.wp-block-button.with-icon-right .wp-block-button__link {
	flex-direction: row-reverse;
}

.wp-block-button.with-icon .button-icon,
.button-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-right: 8px;
	vertical-align: middle;
	transform: translateY(-1px);
}
.icon-right .button-icon {
	margin-right: 0;
	margin-left: 8px;
}

.wp-block-button.with-icon .button-icon img,
.button-icon img {
	width: 1.25em;
	height: 1.25em;
	object-fit: contain;
}

/* Editor Preview Icon Styles */
.editor-styles-wrapper .hubhom-editor-button-icon .wp-block-button__link,
.editor-styles-wrapper .hubhom-editor-button-icon .wp-element-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.editor-styles-wrapper .hubhom-editor-button-icon.icon-right .wp-block-button__link,
.editor-styles-wrapper .hubhom-editor-button-icon.icon-right .wp-element-button {
	flex-direction: row-reverse;
}

.editor-styles-wrapper .hubhom-editor-button-icon .wp-block-button__link::before,
.editor-styles-wrapper .hubhom-editor-button-icon .wp-element-button::before {
	content: '';
	display: flex;
	width: 1.25em;
	height: 1.25em;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	flex-shrink: 0;
}

.editor-styles-wrapper .hubhom-editor-button-icon.is-custom-icon .wp-block-button__link::before,
.editor-styles-wrapper .hubhom-editor-button-icon.is-custom-icon .wp-element-button::before {
	background-image: var(--hubhom-icon-url);
}

.editor-styles-wrapper .hubhom-editor-button-icon.is-predefined-icon .wp-block-button__link::before,
.editor-styles-wrapper .hubhom-editor-button-icon.is-predefined-icon .wp-element-button::before {
	background-color: currentColor;
	-webkit-mask-image: var(--hubhom-icon-url);
	mask-image: var(--hubhom-icon-url);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

/* Custom Text Hack for WooCommerce Button in Editor */
.editor-styles-wrapper .hubhom-editor-button-icon.has-custom-text .wp-element-button,
.editor-styles-wrapper .hubhom-editor-button-icon.has-custom-text .wp-block-button__link {
	font-size: 0 !important;
}
.editor-styles-wrapper .hubhom-editor-button-icon.has-custom-text .wp-element-button::after,
.editor-styles-wrapper .hubhom-editor-button-icon.has-custom-text .wp-block-button__link::after {
	content: var(--hubhom-custom-text);
	font-size: 14px;
	font-weight: 600;
}
.editor-styles-wrapper .hubhom-editor-button-icon.has-custom-text .wp-element-button::before,
.editor-styles-wrapper .hubhom-editor-button-icon.has-custom-text .wp-block-button__link::before {
	width: 20px;
	height: 20px;
}

/* TechCare Devices Grid */

.hubhom-device-card {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	background: #ffffff;
	height: 100%;
	display: flex;
	flex-direction: column;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 24px;
}

.hubhom-device-card>.wp-block-buttons {
	margin-top: auto;
	justify-content: flex-start;
}

.open-spec-modal .wp-block-button__link {
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	color: #3fa39c !important;
	background-color: transparent !important;
	font-size: 14px;
	font-weight: 600;
	text-align: left;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.hubhom-device-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}



/*
 * Modal content is hidden by default so it never shows on the live page; the
 * JS in theme-scripts.js copies it into a <dialog> when the button is clicked.
 * The block editor loads this same stylesheet via add_editor_style(), so the
 * .editor-styles-wrapper override below brings it back inside the editor
 * canvas, where the user needs to be able to see and edit the text.
 * (The previous .is-editing selector matched nothing: WordPress never adds
 * that class, so the content was hidden in the editor too.)
 */
.hubhom-modal-content {
	display: none;
}

/* Editor canvas: show the content, flagged so it is clearly not a live block. */
.editor-styles-wrapper .hubhom-modal-content {
	display: block;
	padding: 10px;
	background: #f2f2f2;
	border: 1px dashed #cbd5e1;
	margin-top: 20px;
	border-radius: 8px;
}

.editor-styles-wrapper .hubhom-modal-content::before {
	content: "Modal Content (Hidden on Live Site)";
	display: block;
	font-size: 12px;
	color: #64748b;
	margin-bottom: 10px;
	font-weight: 600;
}

/* Global Modal Styles */
.hubhom-global-modal {
	border: none;
	border-radius: 12px;
	padding: 0;
	max-width: 600px;
	width: 90%;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	background: #ffffff;
}

.hubhom-global-modal::backdrop {
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(4px);
}

.hubhom-modal-inner {
	padding: 30px;
	position: relative;
}

.hubhom-modal-close {
	position: absolute;
	top: 15px;
	right: 15px;
	background: transparent;
	border: none;
	font-size: 24px;
	cursor: pointer;
	color: #64748b;
	line-height: 1;
}

.hubhom-modal-close:hover {
	color: #0f172a;
}

/* Services Hero Pattern CSS */
.hubhom-services-hero-image {
	height: 100%;
}

.hubhom-services-hero-image img {
	height: 100% !important;
	object-fit: cover !important;
}

@media (min-width: 782px) {
	.hubhom-services-hero-image img {
		border-radius: 60px 0 0 60px !important;
	}
}

@media (max-width: 781px) {
	.hubhom-services-hero-image img {
		border-radius: 40px 40px 0 0 !important;
	}
}

/* Overlap Utilities for Hero */
.hubhom-overlap-right {
	position: relative;
	z-index: 10;
}

.hubhom-overlap-right-target {
	margin-left: -10% !important;
	z-index: 1;
}

@media (max-width: 781px) {
	.hubhom-overlap-right-target {
		margin-left: 0 !important;
	}
}

/* Professional Setup Pattern */
.hubhom-setup-container {
	border: 1px solid #eaedf3;
	border-radius: 12px;
}

.hubhom-number-badge {
	background-color: #3fa39c;
	color: #ffffff !important;
	border-radius: 8px;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	font-weight: 700;
}

.hubhom-pill {
	background-color: #e8f5f4;
	color: #3fa39c !important;
	padding: 6px 14px;
	border-radius: 20px;
	font-size: 0.85rem;
	font-weight: 700;
	white-space: nowrap;
}

.hubhom-step-card {
	border: 1px solid #eaedf3;
	border-radius: 12px;
	padding: 1.5rem;
	background-color: #ffffff;
}

.hubhom-step-arrow-container {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
}

.hubhom-step-arrow {
	color: #3fa39c;
	font-size: 1.5rem;
	font-weight: 700;
}

.hubhom-pricing-box {
	background-color: #f2f2f2;
	border-radius: 12px;
	padding: 1.5rem;
}

.hubhom-pricing-divider {
	align-self: stretch !important;
	align-items: center !important;
	display: flex;
	border-right: 1.5px solid #c9d1e1;
}

@media (max-width: 781px) {
	.hubhom-step-arrow-container {
		transform: rotate(90deg);
		margin: 1rem 0;
	}

	.hubhom-pricing-divider {
		border-right: none;
		border-bottom: 1px solid #eaedf3;
		padding-bottom: 1rem;
		margin-bottom: 1rem;
	}
}

/* Care Plans Pattern */
.hubhom-care-card {
	background-color: #ffffff;
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
	padding: 2rem 1.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	position: relative;
	overflow: hidden;
}

.hubhom-care-icon-circle {
	width: 80px;
	height: 80px;
	background-color: #e8f5f4;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.5rem;
}

.hubhom-care-card-graphic {
	margin-top: 2rem;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	flex-grow: 1;
}

.hubhom-care-footer-banner {
	background-color: #f2f2f2;
	border-radius: 12px;
	padding: 1.5rem 2rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 3rem;
}

@media (max-width: 781px) {
	.hubhom-care-footer-banner {
		flex-direction: column;
		text-align: center;
		gap: 1.5rem;
	}

	.hubhom-care-footer-banner .wp-block-button {
		width: 100%;
	}

	.hubhom-care-footer-banner .wp-block-button__link {
		width: 100%;
		justify-content: center;
	}
}

/* Default Color for Custom Icon Block */
.hubhom-custom-icon-wrapper:not(.has-text-color) {
	color: var(--wp--preset--color--primary);
}
.hubhom-custom-icon-wrapper.has-background:not(.has-text-color) {
	color: var(--wp--preset--color--base);
}
/* Ensure icon wrapper has no default margin/padding to match expected behavior */
.hubhom-custom-icon-wrapper {
	margin: 0;
	padding: 0;
}

/* Icon Link Block */
.wp-block-hubhom-icon-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	transition: opacity 0.2s ease;
}
.wp-block-hubhom-icon-link:hover {
	opacity: 0.8;
}
.wp-block-hubhom-icon-link.icon-right {
	flex-direction: row-reverse;
}
.wp-block-hubhom-icon-link-editor {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* Post Grid & Term Pill Styles */
.hubhom-post-term-pill {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
}
.hubhom-post-term-pill a {
	display: inline-block;
	background-color: #ebf6f6;
	color: #2b828d;
	padding: 4px 14px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 600;
	text-decoration: none;
	line-height: 1.5;
	transition: background-color 0.2s ease;
}
.hubhom-post-term-pill a:hover {
	background-color: #dbeeee;
}
/* Adjust post title hover */
.hubhom-post-grid-title a {
	text-decoration: none;
	transition: color 0.2s ease;
}
.hubhom-post-grid-title a:hover {
	color: var(--wp--preset--color--secondary);
}

/* Active Navigation Menu Item Indicator */
.wp-block-navigation-item.current-menu-item > a,
.wp-block-navigation-item.current-menu-ancestor > a,
.home .wp-block-navigation-item:first-child > a {
	position: relative;
}
.wp-block-navigation-item.current-menu-item > a::after,
.wp-block-navigation-item.current-menu-ancestor > a::after,
.home .wp-block-navigation-item:first-child > a::after {
	content: '';
	position: absolute;
	bottom: -28px;
	left: 10%;
	width: 80%;
	height: 3px;
	background-color: var(--wp--preset--color--primary);
	border-radius: 2px;
}

/* Footer Links */
.hubhom-footer-wrapper a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}
.hubhom-footer-wrapper a:hover {
	color: var(--wp--preset--color--primary);
}

/* Price blocks that sit next to a standalone "SGD" design heading.
   Woo wraps the symbol in its own <span>, so hiding it here leaves the
   number intact and does not touch cart, checkout or order emails.

   Apply via the "Hubhom Price (no symbol)" block style in the editor, or by
   adding the class "hubhom-price-no-symbol" manually. The descendant rule
   covers the block itself and the wrapper Woo sometimes copies the class to. */
.hubhom-price-no-symbol .woocommerce-Price-currencySymbol,
.hubhom-price-no-symbol.woocommerce-Price-amount .woocommerce-Price-currencySymbol,
.is-style-hubhom-price-no-symbol .woocommerce-Price-currencySymbol,
.is-style-hubhom-price-no-symbol.woocommerce-Price-amount .woocommerce-Price-currencySymbol {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Hide on live site
 *
 * A block toggled off in the editor is dropped from the front-end HTML by
 * hubhom_render_hidden_block(), for every visitor including logged-in editors.
 * These rules are therefore editor-only: they mark the block in the canvas so
 * nobody mistakes a hidden block for a live one.
 * ------------------------------------------------------------------------- */

/* Editor canvas: dim the block and flag it, without changing its layout. */
.editor-styles-wrapper .hubhom-is-hidden-block {
	position: relative;
	opacity: 0.45;
	outline: 1px dashed #d97706;
	outline-offset: 4px;
}

.editor-styles-wrapper .hubhom-is-hidden-block::after {
	content: "Hidden on live site";
	position: absolute;
	top: 0;
	right: 0;
	z-index: 10;
	padding: 3px 10px;
	background: #d97706;
	color: #ffffff;
	font-family: Inter, sans-serif;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: 0.02em;
	border-radius: 0 0 0 6px;
	pointer-events: none;
}

/* In-page anchor links (the hero's "Find Your Solution" jumps to #solutions).
   The header is sticky at top:0, so without scroll-padding the browser lands
   with the section's heading tucked underneath it. Smooth scrolling is left to
   the user's motion preference. */
html {
	scroll-padding-top: 7rem;
}

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

/* ===========================================================================
 * MOBILE RESPONSIVE (<= 781px)
 *
 * Every rule below lives inside a max-width media query, so desktop rendering
 * is untouched: browsers wider than 781px never evaluate any of it. The
 * approved desktop design is therefore safe by construction, not by promise.
 *
 * Why these rules need !important: the layouts they correct come from
 * WordPress's own generated `wp-container-*` classes, which ship as
 * stylesheet rules of equal specificity emitted after the theme's CSS.
 * Matching that weight is the only way a theme override can win. We target
 * the stable semantic classes (.is-nowrap, .is-layout-grid) rather than the
 * generated container hashes, which are content-derived and change whenever
 * a pattern is re-extracted from the editor.
 *
 * Breakpoint 781px matches the existing mobile rules throughout this file.
 * ------------------------------------------------------------------------- */

/* ---- 1. Overflow safety net -------------------------------------------
 * Backstop only. The real causes are fixed in section 2; this guarantees the
 * page can never be swiped sideways into empty space, including in sections
 * added later.
 *
 * The clip lives on `body`, NOT on `html`. Setting overflow-x on the root
 * element makes the browser compute overflow-y as something other than
 * `visible` too, which on iOS Safari breaks touch delivery inside a
 * `position: fixed` overlay - the mobile menu is exactly that. The menu
 * would open, but tapping an item registered as a tap on the page behind
 * it: the overlay closed and no navigation happened. Chrome and the
 * device simulators tolerate the same markup, which is why this only
 * showed up on a real iPhone.
 *
 * `body` alone still contains the page, because the offending children are
 * inside it; nothing here relies on the root clipping.
 * --------------------------------------------------------------------- */
@media (max-width: 781px) {

	body {
		overflow-x: clip;
		max-width: 100%;
	}

	/* Belt and braces for the menu overlay: while it is open, nothing in the
	   page behind it may clip or scroll-trap the fixed layer, and the overlay
	   itself must own the touch. `clip` above already avoids creating a
	   scroll container, but an ancestor with a transform, filter or
	   containment would still re-root `position: fixed`, so the overlay is
	   pinned to the viewport explicitly. */
	.wp-block-navigation__responsive-container.is-menu-open {
		position: fixed !important;
		inset: 0 !important;
		z-index: 100000 !important;
		touch-action: manipulation;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
	}

	/* The tappable row must receive the touch itself. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		position: relative;
		z-index: 1;
		touch-action: manipulation;
	}

	/* Media must never exceed its column. */
	img,
	video,
	iframe,
	svg,
	figure,
	.wp-block-image,
	.wp-block-image img,
	.wp-block-embed,
	.wp-block-video {
		max-width: 100%;
		height: auto;
	}

	/* A wide table or pre scrolls inside its own box rather than the page. */
	.wp-block-table,
	.wp-block-preformatted,
	.wp-block-code {
		overflow-x: auto;
		max-width: 100%;
	}
}

/* ---- 2. Let nowrap rows wrap ------------------------------------------
 * `flexWrap:"nowrap"` is what keeps rows on one line on desktop, and exactly
 * what forces 700px+ of content through a 324px phone screen. Allowing these
 * rows to wrap is the single highest-impact fix: it resolves Professional
 * Setup (727px of cards), the SOS caregiver row, and several icon rows.
 * --------------------------------------------------------------------- */
@media (max-width: 781px) {

	.wp-site-blocks .wp-block-group.is-nowrap,
	.wp-site-blocks .wp-block-columns.is-nowrap {
		flex-wrap: wrap !important;
	}

	/* Columns stack instead of dividing an already narrow screen. */
	.wp-site-blocks .wp-block-columns:not(.is-not-stacked-on-mobile) {
		flex-wrap: wrap !important;
	}

	.wp-site-blocks .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
		flex-basis: 100% !important;
		min-width: 0 !important;
	}

	/* A flex child may not refuse to shrink below its content width; without
	   this, long unbroken words still push a wrapped row past the edge. */
	.wp-site-blocks .wp-block-group>*,
	.wp-site-blocks .wp-block-column>* {
		min-width: 0;
	}
}

/* ---- 3. Grids: 2 columns for product cards, 1 for text ----------------
 * Card grids stay 2-up so devices can be compared at a glance without making
 * the page enormously long. Text/support grids go full width to stay
 * readable. Desktop column counts are untouched.
 * --------------------------------------------------------------------- */
@media (max-width: 781px) {

	/* Product / device card grids: 2 columns. */
	.wp-site-blocks .wp-block-group.alignwide.is-layout-grid,
	.wp-site-blocks .wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 1rem !important;
	}

	/* Support / contact cards read better one per row. */
	.hubhom-support-grid.is-layout-grid,
	.wp-site-blocks .wp-block-group.is-layout-grid:not(.alignwide) {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 1rem !important;
	}

	/* Grid children must be allowed to shrink inside their track. */
	.wp-site-blocks .is-layout-grid>* {
		min-width: 0 !important;
		max-width: 100% !important;
	}
}

/* ---- 4. Section-specific corrections ---------------------------------- */
@media (max-width: 781px) {

	/* Professional Setup: the worst offender at 727px of content in a 324px
	   box. Cards stack; the arrow between them already rotates 90deg above. */
	.hubhom-setup-container {
		overflow: hidden;
	}

	.hubhom-setup-container .wp-block-group.is-nowrap {
		flex-wrap: wrap !important;
	}

	.hubhom-step-card {
		width: 100% !important;
		flex: 1 1 100% !important;
		min-width: 0 !important;
	}

	/* The pricing row sits side by side on desktop; stack it here. */
	.hubhom-pricing-box {
		padding: 1.25rem !important;
	}

	/* Device cards: keep their internals from forcing the 2-col track wider. */
	.hubhom-device-card {
		min-width: 0 !important;
		max-width: 100% !important;
		padding: 16px !important;
	}

	.hubhom-device-card img {
		max-width: 100%;
		height: auto;
	}

	/* The 64px icon + text row keeps its icon but lets the text shrink. */
	.hubhom-icon-text-row {
		grid-template-columns: 48px minmax(0, 1fr) !important;
		gap: 0.75rem !important;
	}

	.hubhom-icon-text-row .wp-block-image,
	.hubhom-icon-text-row .wp-block-image img {
		width: 48px !important;
		height: 48px !important;
		min-width: 48px !important;
		max-width: 48px !important;
	}

	/* The all-in-one circle is 280px wide with 2rem padding; on a 390px screen
	   minus page gutters that is a tight fit. Scale it to the space available. */
	.hubhom-aio-center-circle {
		width: min(280px, 72vw) !important;
		height: min(280px, 72vw) !important;
		padding: 1.25rem !important;
		margin: 1.5rem auto !important;
	}

	/* Free-standing icon wrappers were being pushed outside the viewport. */
	.hubhom-custom-icon-wrapper {
		max-width: 100%;
	}

	/* Care-plan and setup cards: trim desktop padding that eats a phone's
	   limited width, without changing their colours or radius. */
	.hubhom-care-card {
		padding: 1.5rem 1rem !important;
	}

	.hubhom-care-footer-banner {
		padding: 1.25rem !important;
	}
}

/* ---- 5. Navigation ----------------------------------------------------
 * The hamburger measured 24x24px, well under the 44x44px minimum for a
 * reliable finger tap. The icon keeps its size; the *touch area* grows via
 * padding, so the header's look is unchanged while the button becomes easy
 * to hit. The open menu gets full-width rows with clear separation.
 * --------------------------------------------------------------------- */
@media (max-width: 781px) {

	/* Size the toggles without touching their visibility.
	 *
	 * `display: flex !important` here was forcing BOTH toggles to paint: the
	 * hamburger, which the navigation block hides once the inline menu fits,
	 * and the close button, which it hides until the menu is actually open.
	 * On a Galaxy Fold's inner screen all three states rendered at once - a
	 * hamburger, a stray close cross, and the full desktop menu row stacked
	 * under them.
	 *
	 * Only apply the flex centring while the button is genuinely on screen,
	 * so the block keeps full control of when each toggle appears. The 44px
	 * tap target is unchanged. */
	/* The hamburger must stay visible up to this breakpoint. WordPress hides
	 * it from 600px up, but between 600px and 781px the seven inline items
	 * do not fit: they overlap the logo and wrap onto a second row. So the
	 * OPEN toggle is deliberately shown here.
	 *
	 * The CLOSE toggle is a different matter and must NOT be forced: the
	 * block hides it until the menu is actually open. A previous version of
	 * this rule set `display: flex !important` on BOTH, so a stray close
	 * cross painted next to the hamburger - on a Galaxy Fold's inner screen
	 * that produced a hamburger, a cross and the desktop menu row all at
	 * once. */
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}

	.wp-block-navigation__responsive-container-open,
	.wp-block-navigation__responsive-container-close {
		min-width: 44px;
		min-height: 44px;
		align-items: center;
		justify-content: center;
		padding: 10px !important;
		border-radius: 8px;
		color: var(--wp--preset--color--contrast, #2f2f2f) !important;
	}

	/* Below this breakpoint the inline list is replaced by the overlay, so
	 * it must not also paint behind the hamburger. */
	.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
		display: none;
	}

	.wp-block-navigation__responsive-container-open:hover,
	.wp-block-navigation__responsive-container-open:focus-visible {
		background-color: var(--wp--preset--color--secondary, #e8f5f4);
	}

	/* Keep the icon itself at its original visual size. */
	.wp-block-navigation__responsive-container-open svg,
	.wp-block-navigation__responsive-container-close svg {
		width: 24px;
		height: 24px;
	}

	/* The opened overlay: comfortable, clearly readable rows. */
	.wp-block-navigation__responsive-container.is-menu-open {
		padding: 1.5rem !important;
		background-color: #ffffff !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		padding-top: 1rem;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container .wp-block-navigation-item {
		width: 100% !important;
		align-items: flex-start !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		display: flex !important;
		align-items: center !important;
		width: 100% !important;
		min-height: 48px !important;
		padding: 0.5rem 0 !important;
		font-size: 1.05rem !important;
		border-bottom: 1px solid #eef2f2;
	}

	/* The nav block inherits a large flex gap from the desktop header row;
	   in the stacked overlay that gap doubles the spacing already provided by
	   each row's padding, leaving the list adrift. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		gap: 0 !important;
	}

	/* The active-page underline is positioned for the desktop header bar
	   (bottom:-28px); inside the stacked menu that lands on the next item. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current-menu-item>a::after,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current-menu-ancestor>a::after,
	.home .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:first-child>a::after {
		bottom: 6px;
		left: 0;
		width: 28px;
	}

	/* Header: keep the logo from crowding the menu button. */
	.wp-site-blocks header.wp-block-template-part .wp-block-site-logo img {
		max-width: 150px;
		height: auto;
	}
}

/* ---- 6. Tap targets ---------------------------------------------------
 * Blog-card and footer links measured 20-25px tall. Padding brings the
 * touch area up without moving the text or changing its size.
 * --------------------------------------------------------------------- */
@media (max-width: 781px) {

	.hubhom-post-grid-title a,
	.hubhom-footer-wrapper a,
	.wp-block-post-title a {
		display: inline-block;
		padding-block: 6px;
	}

	/* Buttons span the width they are given rather than sitting cramped. */
	.wp-block-button__link,
	.wp-element-button {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/* A lone button in a stacked layout reads better full width. */
	.wp-block-buttons:not(.is-content-justification-left):not(.is-content-justification-right)>.wp-block-button {
		width: 100%;
	}

	.wp-block-buttons:not(.is-content-justification-left):not(.is-content-justification-right)>.wp-block-button>.wp-block-button__link {
		width: 100%;
	}

	/* Category pills stay legible and tappable. */
	.hubhom-post-term-pill a {
		padding: 6px 14px;
		font-size: 12px;
	}
}

/* ---- 7. Negative-margin overlaps --------------------------------------
 * Some blocks carry a negative margin to overlap a neighbour on desktop
 * (an image tucked under an adjacent column, an icon pulled over a card
 * edge). Once those blocks stack there is nothing left to overlap, so the
 * pull simply drags them off the left edge. Reset it only where the offset
 * is inline-styled negative; positive spacing set in the editor is kept.
 * --------------------------------------------------------------------- */
@media (max-width: 781px) {

	.wp-site-blocks .wp-block-image[style*="margin-left:-"],
	.wp-site-blocks .wp-block-image[style*="margin-left: -"],
	.wp-site-blocks .wp-block-group[style*="margin-left:-"],
	.wp-site-blocks .wp-block-group[style*="margin-left: -"],
	.wp-site-blocks .wp-block-hubhom-icon[style*="margin-left:-"],
	.wp-site-blocks .wp-block-hubhom-icon[style*="margin-left: -"],
	.wp-site-blocks .wp-block-column[style*="margin-left:-"],
	.wp-site-blocks .wp-block-column[style*="margin-left: -"] {
		margin-left: 0 !important;
	}

	.wp-site-blocks .wp-block-image[style*="margin-right:-"],
	.wp-site-blocks .wp-block-image[style*="margin-right: -"],
	.wp-site-blocks .wp-block-group[style*="margin-right:-"],
	.wp-site-blocks .wp-block-group[style*="margin-right: -"],
	.wp-site-blocks .wp-block-column[style*="margin-right:-"],
	.wp-site-blocks .wp-block-column[style*="margin-right: -"] {
		margin-right: 0 !important;
	}

	/* A few icons carry `margin-left:-40px !important` inline. An inline
	   !important declaration outranks every stylesheet rule, so the margin
	   itself cannot be overridden from here. Translating the element back by
	   the same amount cancels the visual pull without touching the block
	   markup, which the editor would flag as an invalid-content error. */
	.wp-site-blocks .wp-block-hubhom-icon[style*="margin-left:-40px"] {
		transform: translateX(40px);
	}
}

/* ---- 8. Long words in narrow columns ----------------------------------
 * In a 2-up card grid a column is ~153px wide, narrower than some product
 * names ("MovementGuard"). A single unbreakable word cannot wrap, so it was
 * being clipped at the card edge. Allow headings and copy to break mid-word
 * as a last resort; normal wrapping at spaces is still preferred.
 * --------------------------------------------------------------------- */
@media (max-width: 781px) {

	/* `overflow-wrap: anywhere` breaks a word ONLY when it genuinely cannot
	   fit its container; unlike `break-word` combined with `hyphens: auto`,
	   it never splits ordinary words that would have wrapped fine at a space.
	   Hyphenation is explicitly off: it was splitting "elderly" into
	   "elder-/ly" and "Technology" into "Technolog-/y" across the site. */
	.wp-site-blocks h1,
	.wp-site-blocks h2,
	.wp-site-blocks h3,
	.wp-site-blocks h4,
	.wp-site-blocks h5,
	.wp-site-blocks h6,
	.wp-site-blocks p,
	.wp-site-blocks li,
	.wp-site-blocks .wp-block-button__link,
	.wp-site-blocks .woocommerce-loop-product__title {
		overflow-wrap: break-word;
		hyphens: none !important;
		-webkit-hyphens: none !important;
	}

	/* Headings are the large type most likely to strand a long product name
	   in a narrow card, so they alone may break inside a word as a last
	   resort - and only when nothing else fits. */
	.wp-site-blocks h1,
	.wp-site-blocks h2,
	.wp-site-blocks h3,
	.wp-site-blocks h4,
	.wp-site-blocks h5,
	.wp-site-blocks h6 {
		overflow-wrap: anywhere;
	}

	/* Very long unbroken strings (URLs, emails, order refs) get a harder
	   break so they can never widen their container. */
	.wp-site-blocks a[href^="mailto:"],
	.wp-site-blocks a[href^="tel:"],
	.wp-site-blocks .wp-block-code,
	.wp-site-blocks code {
		word-break: break-word;
	}
}

/* ---- 9. Step connector arrows -----------------------------------------
 * The chevrons between Professional Setup steps point right, which reads
 * correctly while the cards sit in a row. Once the cards stack vertically
 * the flow runs top-to-bottom, so the chevron is rotated to match and
 * centred over the gap. (The older .hubhom-step-arrow-container rule above
 * targets a class this pattern no longer renders; these arrows are
 * core `.wp-block-icon` blocks.)
 * --------------------------------------------------------------------- */
@media (max-width: 781px) {

	/* Rotate the chevron ONLY. An earlier, broader rule caught the tick icon
	   in the same container and stood it on its side. `:has()` keys the rule
	   to the chevron's own path data, so other icons are left alone. */
	.hubhom-setup-container .wp-block-icon:has(path[d^="M10.6 6L9.4 7"]),
	.wp-site-blocks .wp-block-group.is-nowrap>.wp-block-icon:has(path[d^="M10.6 6L9.4 7"]) {
		transform: rotate(90deg);
		margin-inline: auto;
	}

	/* The SOS steps use a long right-arrow between cards. Stacked, it was
	   left stranded at the bottom-left of a card pointing at nothing; turned
	   down and centred it reads as the step-to-step connector it is. */
	.wp-site-blocks .wp-block-icon:has(path[d^="m14.5 6.5-1 1"]),
	.wp-site-blocks .icon-container:has(path[d^="m14.5 6.5-1 1"]) {
		transform: rotate(90deg);
		margin-inline: auto !important;
		display: block;
	}

	/* The icon's own flex row should fill the width so the rotated chevron
	   centres over the gap between cards rather than hugging the left edge. */
	.hubhom-setup-container .wp-block-group.is-nowrap>.wp-block-icon {
		align-self: center;
	}
}

/* ---- 10. Desktop-only connector arrows --------------------------------
 * The all-in-one section links its two side cards to the centre circle with
 * long horizontal arrows. Stacked on mobile they point at nothing, and the
 * left-hand red one hangs half off the screen edge (measured at x=-1). The
 * matching ::before/::after connectors are already hidden above; these are
 * the icon blocks that sit alongside them.
 * --------------------------------------------------------------------- */
@media (max-width: 781px) {

	.hubhom-aio-wrapper .icon-container.has-vivid-red-color,
	.hubhom-aio-wrapper .wp-block-icon:has(path[d^="M20 11.2H6.8"]),
	.wp-site-blocks .icon-container:has(path[d^="M20 11.2H6.8"]) {
		display: none !important;
	}

	/* Its teal counterpart points right into empty space once stacked. */
	.hubhom-aio-wrapper .icon-container.has-primary-color:has(path[d^="m14.5 6.5-1 1"]) {
		display: none !important;
	}
}

/* ---- 11. Cards in a grid row share a height ---------------------------
 * Grid items default to stretching, but these cards are wrapped in groups
 * that size to their own content, so a shorter description left one card
 * visibly stubbier than its neighbour (30-49px apart when measured).
 * Stretching the wrapper and letting the card fill it squares off the row.
 * --------------------------------------------------------------------- */
@media (max-width: 781px) {

	.wp-site-blocks .is-layout-grid {
		align-items: stretch !important;
	}

	.wp-site-blocks .is-layout-grid>*,
	.wp-site-blocks .is-layout-grid>.wp-block-group {
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	/* The card itself fills the stretched track. */
	.wp-site-blocks .is-layout-grid .hubhom-device-card,
	.wp-site-blocks .is-layout-grid .hubhom-fse-card,
	.wp-site-blocks .is-layout-grid>.wp-block-group>.wp-block-group {
		height: 100%;
		flex: 1 1 auto;
	}

	/* Post cards: keep the meta line pinned to the bottom so titles of
	   different lengths still leave the dates aligned across the row. */
	.wp-site-blocks .wp-block-post-template>li {
		display: flex;
		flex-direction: column;
		height: 100%;
	}
}

/* ---- 12. Button labels ------------------------------------------------
 * Buttons sit in narrower columns on a phone, so a label that fits one line
 * on desktop can wrap awkwardly ("Get Your Package / Now") or, with an icon
 * beside it, spill onto a third line. Trimming the horizontal padding and
 * allowing the label to sit on one line where it reasonably can keeps the
 * button a clean pill. Font size is unchanged.
 * --------------------------------------------------------------------- */
@media (max-width: 781px) {

	.wp-site-blocks .wp-block-button__link,
	.wp-site-blocks .wp-element-button {
		padding-left: 1.1rem !important;
		padding-right: 1.1rem !important;
		text-align: center;
		line-height: 1.3;
	}

	/* An icon inside a button must not be squeezed by the label. */
	.wp-site-blocks .wp-block-button__link .button-icon,
	.wp-site-blocks .wp-block-button__link svg,
	.wp-site-blocks .wp-element-button svg {
		flex-shrink: 0;
	}

	/* Small "Technical specifications"-style buttons inside 2-up cards read
	   better centred over two lines than crammed with side padding. */
	.hubhom-device-card .wp-block-button__link,
	.hubhom-device-card .wp-element-button {
		padding-left: 0.65rem !important;
		padding-right: 0.65rem !important;
		width: 100%;
		text-align: center;
		justify-content: center;
	}
}

/* ---- 13. Oversized hero headings --------------------------------------
 * The hero H1 renders at 54px. At that size the single word "Technology"
 * measures 326px against a 302px column, so it cannot fit however the text
 * wraps - the browser has no choice but to split it mid-word
 * ("Technolog/y"). No wrapping rule can fix a word wider than its box; the
 * type has to come down to where the longest word fits.
 *
 * clamp() keeps this proportional: it scales with the viewport and never
 * exceeds the desktop size, so the design is preserved as closely as the
 * screen allows. Desktop is untouched - this whole block is mobile-only.
 * --------------------------------------------------------------------- */
@media (max-width: 781px) {

	.wp-site-blocks h1,
	.wp-site-blocks .wp-block-post-title {
		font-size: clamp(1.9rem, 8.2vw, 2.6rem) !important;
		line-height: 1.18 !important;
		overflow-wrap: break-word;
	}

	.wp-site-blocks h2 {
		font-size: clamp(1.5rem, 6.4vw, 2rem) !important;
		line-height: 1.25 !important;
	}

	/* h3-h6 are already close to a comfortable mobile size; only cap the
	   ones that were set unusually large in the editor. */
	.wp-site-blocks h3 {
		font-size: clamp(1.25rem, 5.2vw, 1.6rem) !important;
		line-height: 1.3 !important;
	}
}

/* ---- 14. Headings inside two-up cards ---------------------------------
 * A card in a 2-column grid is only ~118-166px wide. Product names such as
 * "MovementGuard" and post titles like "Understanding" are single words
 * wider than that at their inherited size, so they would still be split
 * mid-word. Scaling the type inside these narrow cards lets the whole word
 * land on one line. Card headings only - section headings keep their size.
 * --------------------------------------------------------------------- */
@media (max-width: 781px) {

	.hubhom-device-card h1,
	.hubhom-device-card h2,
	.hubhom-device-card h3,
	.hubhom-device-card h4,
	.hubhom-device-card h5 {
		font-size: clamp(0.95rem, 4vw, 1.15rem) !important;
		line-height: 1.25 !important;
	}

	/* Post-grid titles render around 30px, far too large for a 2-up card. */
	/* Sized so the longest single word in a post title ("Understanding",
	   measured at 127px) fits the ~118px track a 2-up card now has after
	   the page gutter was added, instead of splitting mid-word. */
	.wp-site-blocks .wp-block-post-template .wp-block-post-title,
	.wp-site-blocks .wp-block-post-template .wp-block-post-title a,
	.hubhom-post-grid-title,
	.hubhom-post-grid-title a {
		font-size: clamp(0.9rem, 3.7vw, 1.05rem) !important;
		line-height: 1.3 !important;
	}

	/* Excerpt and meta scale with it so the card stays balanced. */
	.wp-site-blocks .wp-block-post-template .wp-block-post-excerpt__excerpt,
	.wp-site-blocks .wp-block-post-template .wp-block-post-date {
		font-size: 0.875rem !important;
		line-height: 1.45 !important;
	}
}

/* ---- 15. Very narrow screens (<= 360px) -------------------------------
 * On a 320px device a 2-up card track is only ~118px. Long product names
 * ("MovementGuard") cannot fit even at reduced type, and shrinking the text
 * further would hurt readability for an audience of caregivers and older
 * users. One card per row is the better trade at this width; 361px and up
 * keep the 2-up grid.
 * --------------------------------------------------------------------- */
@media (max-width: 360px) {

	.wp-site-blocks .wp-block-group.alignwide.is-layout-grid,
	.wp-site-blocks .wp-block-post-template.is-layout-grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	/* With a full-width card the heading can return to a comfortable size. */
	.hubhom-device-card h1,
	.hubhom-device-card h2,
	.hubhom-device-card h3,
	.hubhom-device-card h4,
	.hubhom-device-card h5 {
		font-size: 1.15rem !important;
	}

	.wp-site-blocks .wp-block-post-template .wp-block-post-title,
	.wp-site-blocks .wp-block-post-template .wp-block-post-title a {
		font-size: 1.2rem !important;
	}
}

/* ---- 16. Product card titles (shop) -----------------------------------
 * WooCommerce product cards render their title as .wp-block-post-title at
 * ~32px. In a 2-up grid the card is ~180px wide, so "Fall Pendant" was
 * splitting into "Fall Pendan/t" and titles ran to three lines, leaving the
 * cards in a row visibly different heights. An earlier rule only covered
 * titles inside .wp-block-post-template, which these sit outside of.
 * --------------------------------------------------------------------- */
@media (max-width: 781px) {

	.wp-site-blocks .wp-block-post-title,
	.wp-site-blocks .woocommerce-loop-product__title,
	.wp-site-blocks .wc-block-grid__product-title {
		font-size: clamp(1rem, 4.2vw, 1.25rem) !important;
		line-height: 1.3 !important;
		overflow-wrap: break-word;
	}

	/* Price and the add-to-cart row keep a steady rhythm under the title. */
	.wp-site-blocks .woocommerce-Price-amount,
	.wp-site-blocks .wc-block-grid__product-price {
		font-size: 1rem !important;
	}

	/* Product cards in a row line their buttons up at the bottom. */
	.wp-site-blocks .wc-block-grid__product,
	.wp-site-blocks .product.type-product {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.wp-site-blocks .wc-block-grid__product .wp-block-button,
	.wp-site-blocks .product.type-product .wp-block-button,
	.wp-site-blocks .product.type-product .add_to_cart_button {
		margin-top: auto;
	}
}

/* ---- 17. Page gutters: header and hero --------------------------------
 * Two measured asymmetries on mobile:
 *
 * 1. The header group sets only top/bottom padding, so on a phone the logo
 *    sat at x=0, flush against the screen edge, while the menu button sat
 *    flush against the right. Desktop never showed this because the
 *    constrained layout centres the row inside a max-width well short of
 *    the window edges.
 *
 * 2. The hero text column carries padding-right: 4rem (64px) from the
 *    editor - it reserves room for the image that sits beside it on
 *    desktop - against a 24px left gutter from .hubhom-broken-grid-left.
 *    Once the image stacks below, that 64px is just dead space pushing the
 *    text off-centre (measured L=24 R=64).
 *
 * Both are given the same 24px gutter the rest of the page already uses.
 * --------------------------------------------------------------------- */
@media (max-width: 781px) {

	/* Header: give the row the gutter it never had. */
	.wp-site-blocks header.wp-block-template-part>.wp-block-group,
	.wp-site-blocks header.wp-block-template-part .wp-block-group.alignwide {
		padding-left: 1.5rem !important;
		padding-right: 1.5rem !important;
	}

	/* The inner row already sits inside the padded parent, so it must not
	   add a second gutter of its own. */
	.wp-site-blocks header.wp-block-template-part>.wp-block-group>.wp-block-group.alignwide {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Hero: match the right gutter to the left one. The 4rem is a
	   desktop-only allowance for the adjacent image. */
	.hubhom-broken-grid-left {
		padding-left: 1.5rem !important;
		padding-right: 1.5rem !important;
	}
}

/* ---- 18. One-sided padding on stacked columns -------------------------
 * Several columns carry padding on one side only - padding-right on a left
 * column, padding-left on a right one - to open a gutter between the pair
 * on desktop. Once the pair stacks, that padding survives on a single
 * column and shifts its text off-centre (measured L=24 R=48, L=48 R=24).
 * The gap between stacked blocks is provided by the layout's own row gap,
 * so the side padding has no job left to do here.
 *
 * Scoped to columns that are full width (i.e. actually stacked). Columns in
 * a deliberate side-by-side pair keep their padding, which is why
 * .is-not-stacked-on-mobile is excluded.
 * --------------------------------------------------------------------- */
@media (max-width: 781px) {

	/* Equalise rather than remove. Zeroing the padding outright (an earlier
	   attempt) stripped the only gutter some columns had and left 14 text
	   blocks flush against the screen edge at x=0. Setting both sides to the
	   same 1.5rem keeps the text off the edge AND makes the two sides match. */
	.wp-site-blocks .wp-block-columns.alignfull:not(.is-not-stacked-on-mobile)>.wp-block-column,
	.wp-site-blocks .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column[style*="padding"] {
		padding-left: 1.5rem !important;
		padding-right: 1.5rem !important;
	}

	/* Columns nested inside an already-padded parent must not double the
	   gutter; only the outermost full-bleed column supplies it. */
	.wp-site-blocks .wp-block-column .wp-block-columns>.wp-block-column,
	.wp-site-blocks .wp-block-group[style*="padding"] .wp-block-columns>.wp-block-column {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* A nowrap row carried padding-right to clear the element that used to
	   sit beside it. Only strip that when the block has no background or
	   border of its own - on a card, the padding IS the card's inner inset,
	   and removing it pushed the text flush against the card edge. */
	.wp-site-blocks .wp-block-group.is-vertical.is-nowrap:not(.has-background):not(.has-border-color):not([class*="card"]),
	.wp-site-blocks .wp-block-group.is-nowrap.is-layout-flex:not(.has-background):not(.has-border-color):not([class*="card"]) {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* ---- 19. Full-bleed sections need a gutter ----------------------------
 * `alignfull` groups span the viewport edge to edge by design, which is
 * right for a background or an image but leaves their TEXT touching the
 * screen edge on a phone (measured at x=0 for 14 blocks). Desktop hides
 * this because the constrained inner layout is far narrower than the
 * window, so the text never reaches the edge.
 *
 * The gutter goes on the text children, not the section, so full-bleed
 * backgrounds and images keep running edge to edge as intended.
 * --------------------------------------------------------------------- */
@media (max-width: 781px) {

	.wp-site-blocks .wp-block-group.alignfull>.wp-block-heading,
	.wp-site-blocks .wp-block-group.alignfull>p,
	.wp-site-blocks .wp-block-group.alignwide>.wp-block-heading,
	.wp-site-blocks .wp-block-group.alignwide>p,
	.wp-site-blocks .wp-block-columns.alignfull>.wp-block-column>.wp-block-heading,
	.wp-site-blocks .wp-block-columns.alignfull>.wp-block-column>p,
	.wp-site-blocks .wp-block-columns.alignfull>.wp-block-column>.wp-block-buttons,
	.wp-site-blocks .wp-block-columns.alignfull>.wp-block-column>ul,
	.wp-site-blocks .wp-block-columns.alignfull>.wp-block-column>ol {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}

	/* Where a parent already supplies the gutter, don't add a second one. */
	.hubhom-broken-grid-left>.wp-block-heading,
	.hubhom-broken-grid-left>p,
	.hubhom-broken-grid-left>.wp-block-buttons,
	.wp-site-blocks .wp-block-column[style*="padding-left"]>.wp-block-heading,
	.wp-site-blocks .wp-block-column[style*="padding-left"]>p {
		padding-left: 0;
		padding-right: 0;
	}
}

/* ---- 20. Card inner padding and leftover dividers ---------------------
 * Two follow-ups from balancing the gutters above:
 *
 * 1. A card whose only inset came from its own padding must keep it, or
 *    its text sits on the border. Restore a floor for backgrounded and
 *    bordered groups.
 * 2. .hubhom-short-divider draws a vertical rule down the right edge to
 *    separate two side-by-side items. Stacked, it hangs beside the content
 *    dividing nothing. The existing mobile rule turns it horizontal, which
 *    suits a two-up row but not a full-width stack.
 * --------------------------------------------------------------------- */
@media (max-width: 781px) {

	.wp-site-blocks .wp-block-group.has-background.is-nowrap,
	.wp-site-blocks .wp-block-group.has-border-color.is-nowrap,
	.wp-site-blocks .hubhom-care-plans-container {
		padding-left: 1.25rem !important;
		padding-right: 1.25rem !important;
	}

	/* A full-width stacked block has nothing beside it to divide. */
	.wp-site-blocks .hubhom-short-divider::after {
		display: none;
	}
}

/* ---- 21. Cards must not touch the screen edge -------------------------
 * Sixteen bordered/rounded cards were measured at L=0 R=0 - their border
 * and corner radius ran flush into both screen edges, so the rounded
 * corners were cut off and the card looked broken while the text inside
 * sat inset. Other cards in the same page already had a gutter (L=17,
 * L=33), so the page read as inconsistent.
 *
 * Desktop is unaffected: there the constrained layout centres these cards
 * inside a max-width well short of the window, so they never reach an edge
 * and this rule changes nothing above the breakpoint.
 *
 * Targets only boxes that actually draw a card (a radius plus a border or
 * background). A plain full-bleed section keeps spanning the full width.
 * --------------------------------------------------------------------- */
@media (max-width: 781px) {

	.wp-site-blocks .wp-block-column.has-border-color,
	.wp-site-blocks .wp-block-group.has-border-color,
	.wp-site-blocks .wp-block-group.has-background[style*="border-top-left-radius"],
	.wp-site-blocks .wp-block-group.has-background[style*="border-radius"],
	.wp-site-blocks .wp-block-group.has-base-background-color[style*="border-radius"],
	.wp-site-blocks .hubhom-setup-container,
	.wp-site-blocks .hubhom-aio-wrapper,
	.wp-site-blocks .hubhom-fse-card {
		margin-left: 1.5rem !important;
		margin-right: 1.5rem !important;
		width: auto !important;
		max-width: calc(100% - 3rem) !important;
	}

	/* A card nested inside another card already sits within that gutter. */
	.wp-site-blocks .has-border-color .wp-block-column.has-border-color,
	.wp-site-blocks .hubhom-setup-container .has-border-color,
	.wp-site-blocks .hubhom-aio-wrapper .has-border-color {
		margin-left: 0 !important;
		margin-right: 0 !important;
		max-width: 100% !important;
	}
}

/* ---- 22. Side dividers on stacked feature columns ---------------------
 * The middle column of the "Hubhom TechCare Elderly Solutions" list carries
 * inline border-left / border-right (#e0e0e0, 1px) to separate the three
 * items while they sit side by side on desktop. Stacked on a phone those
 * rules draw two vertical lines flanking item 2 alone, dividing nothing.
 *
 * The borders are inline styles, so an !important override is the only way
 * a stylesheet rule can win. The separation between stacked items comes
 * from the layout's own spacing, so nothing replaces them here.
 *
 * Note this is a different pattern from .hubhom-feature-column-middle
 * above, which applies its dividers by class and already swaps them to
 * horizontal rules on mobile.
 * --------------------------------------------------------------------- */
@media (max-width: 781px) {

	.wp-site-blocks .wp-block-column[style*="border-left-width"],
	.wp-site-blocks .wp-block-column[style*="border-right-width"] {
		border-left: 0 !important;
		border-right: 0 !important;
	}
}

/* ---- 23. Essential Package price block --------------------------------
 * Three faults measured in the "TechCare Elderly Essential Package" card:
 *
 * 1. The price column carries an inline border-left plus padding-left:1.5rem
 *    to separate it from the copy beside it on desktop. Stacked, the border
 *    is cleared by rule 22 but the padding remained, leaving the price
 *    indented while everything above it was not.
 *
 * 2. The "ONLY" label has an inline margin-bottom:-10px that tucks it over
 *    the price on desktop. On a phone the price wraps to a bigger box and
 *    the pull made "ONLY" collide with "SGD 200" (measured 60x20px of
 *    overlap - the two strings were drawn on top of each other).
 *
 * 3. The CTA wrapped to two lines. Full width gives the label one line.
 * --------------------------------------------------------------------- */
@media (max-width: 781px) {

	/* Drop the desktop divider's indent along with its border. */
	.wp-site-blocks .wp-block-column[style*="border-left-width"] {
		padding-left: 0 !important;
	}

	/* Let the label sit above the price instead of on top of it. Two inline
	   pulls stack here: the "ONLY" paragraph has margin-bottom:-10px and the
	   "SGD 200" group that follows has margin-top:-20px, so the price was
	   dragged 30px up into the label. Both are desktop tuning for a wider,
	   shorter price row. */
	.wp-site-blocks .wp-block-column p[style*="margin-bottom:-"],
	.wp-site-blocks .wp-block-column p[style*="margin-bottom: -"] {
		margin-bottom: 0.25rem !important;
	}

	.wp-site-blocks .wp-block-group[style*="margin-top:-"],
	.wp-site-blocks .wp-block-group[style*="margin-top: -"] {
		margin-top: 0 !important;
	}

	/* The price row ("SGD" heading + amount) keeps its baseline alignment
	   but is allowed to wrap rather than overlap when space runs out. */
	.wp-site-blocks .wp-block-columns.are-vertically-aligned-center>.wp-block-column[style*="flex-basis"] {
		flex-basis: 100% !important;
	}
}

/* ---- 24. Full-width CTA buttons ---------------------------------------
 * Measured labels that did not fit their button: "Get Your Package Now"
 * (needs 160px, had 132px) and "Add Package to Cart" (needs 166px, had
 * 145px), each wrapping to two lines and leaving the button oddly tall.
 * Spanning the available width gives the label a single line.
 * --------------------------------------------------------------------- */
@media (max-width: 781px) {

	.wp-site-blocks .wp-block-buttons>.wp-block-button {
		width: 100%;
		max-width: 100%;
	}

	.wp-site-blocks .wp-block-buttons>.wp-block-button>.wp-block-button__link,
	.wp-site-blocks .wp-block-buttons>.wp-block-button>.wp-element-button {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
	}

	/* No `white-space: nowrap` here. Forcing one line made the button wider
	   than its card and clipped the last word ("...Package No|w"). The label
	   is kept on one line by giving the button the full width and trimming
	   its side padding instead, and it is still free to wrap if a label is
	   genuinely too long for the screen - wrapping beats clipping. */
	.wp-site-blocks .wp-block-buttons>.wp-block-button>.wp-block-button__link,
	.wp-site-blocks .wp-block-buttons>.wp-block-button>.wp-element-button {
		padding-left: 0.75rem !important;
		padding-right: 0.75rem !important;
		text-align: center;
	}

	/* An icon sits beside the label; it must not be squeezed or wrap away. */
	.wp-site-blocks .wp-block-button__link .button-icon,
	.wp-site-blocks .wp-block-button__link>svg {
		flex-shrink: 0;
	}
}

/* ---- 25. Primary CTA labels on one line -------------------------------
 * "Get Your Package Now" needed 207px against 190px of usable width (the
 * cart icon takes 31px), so it wrapped to two lines. Dropping the label
 * from 18px to 16px clears it with room to spare, which is a small enough
 * change to leave the button's presence intact.
 *
 * Deliberately NOT applied to small in-card buttons: "Technical
 * specifications" would need to drop to ~10.5px to fit one line, far too
 * small to read comfortably for this audience, so it is left to wrap.
 * --------------------------------------------------------------------- */
@media (max-width: 781px) {

	.wp-site-blocks .wp-block-buttons>.wp-block-button>.wp-block-button__link,
	.wp-site-blocks .wp-block-buttons>.wp-block-button>.wp-element-button {
		font-size: clamp(0.9rem, 4vw, 1rem) !important;
	}

	/* Small buttons inside a 2-up card keep their own smaller size. The
	   selector mirrors the .wp-block-buttons > .wp-block-button chain above
	   so it is specific enough to win; the shorter form lost to it and the
	   label was rendering at 15.6px in a 153px card. */
	.wp-site-blocks .hubhom-device-card .wp-block-buttons>.wp-block-button>.wp-block-button__link,
	.wp-site-blocks .hubhom-device-card .wp-block-buttons>.wp-block-button>.wp-element-button,
	.wp-site-blocks .hubhom-device-card .wp-block-button__link,
	.wp-site-blocks .hubhom-device-card .wp-element-button {
		font-size: 0.8125rem !important;
		padding-left: 0.5rem !important;
		padding-right: 0.5rem !important;
		line-height: 1.25;
	}
}

/* ---- 26. Foldables and small tablets (782px - 1024px) -----------------
 * A Galaxy Fold's inner screen reports around 866px wide, which clears the
 * 781px mobile breakpoint and therefore gets the full desktop header - seven
 * inline menu items, desktop logo and desktop padding - on a screen that is
 * physically much narrower than a laptop. The row fits, but only just, and
 * it reads as cramped.
 *
 * This is a gentle tightening for that band only: nothing here changes the
 * layout, only the breathing room. Above 1024px the approved desktop design
 * is untouched.
 * --------------------------------------------------------------------- */
@media (min-width: 782px) and (max-width: 1024px) {

	/* Give the menu row a little more room by trimming the gap rather than
	   shrinking the text, which would hurt legibility. */
	.wp-site-blocks header.wp-block-template-part .wp-block-navigation__container {
		gap: 1rem;
	}

	.wp-site-blocks header.wp-block-template-part .wp-block-navigation-item__content {
		font-size: 0.9375rem;
		white-space: nowrap;
	}

	/* The logo does not need its full desktop width at this size. */
	.wp-site-blocks header.wp-block-template-part .wp-block-site-logo img {
		max-width: 150px;
		height: auto;
	}

	/* Keep a comfortable page gutter so the header does not touch the edges. */
	.wp-site-blocks header.wp-block-template-part > .wp-block-group {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
}