/* Hello Baby Magazine — Phase 4F.
 * Magazine-specific CSS is enqueued only inside Magazine context.
 * Every selector is additionally scoped under .hbm to prevent style leakage.
 */
.hbm,
.hbm-context {
	--hbm-brand: var(--wd-primary-color, #6ccce0);
	--hbm-brand-soft: rgba(108, 204, 224, .13);
	--hbm-text: currentColor;
	--hbm-muted: #6d7480;
	--hbm-line: rgba(24, 39, 58, .12);
	--hbm-surface: #ffffff;
	--hbm-placeholder: #f2f5f6;
}

.hbm {
	background: transparent;
	color: inherit;
}

/* Real Woodmart shell hardening.
 * The live Hello Baby blog has its own blog/sidebar layout rules. Magazine
 * preview must occupy the whole Woodmart content row regardless of those
 * global blog settings. These selectors exist only while body has the
 * hbm-context class, so the webshop remains untouched. */
.hbm-context .main-page-wrapper > .container,
.hbm-context .main-page-wrapper .content-layout-wrapper {
	width: 100% !important;
	max-width: none !important;
}

.hbm-context .main-page-wrapper .content-layout-wrapper {
	display: block !important;
	margin-inline: 0 !important;
}

.hbm-context main.site-content.hbm {
	display: block !important;
	float: none !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	flex: 0 0 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

.hbm-context .hbm-home-hero,
.hbm-context .hbm-latest-grid,
.hbm-context .hbm-category-grid,
.hbm-context .hbm-grid,
.hbm-context .hbm-related__grid {
	width: 100%;
	min-width: 0;
}

.hbm-context .hbm-home-hero > *,
.hbm-context .hbm-latest-grid > *,
.hbm-context .hbm-category-grid > *,
.hbm-context .hbm-grid > *,
.hbm-context .hbm-related__grid > * {
	min-width: 0 !important;
	max-width: none !important;
}

.hbm *,
.hbm *::before,
.hbm *::after {
	box-sizing: border-box;
}

.hbm .hbm__inner {
	width: min(1320px, calc(100% - 40px));
	margin-inline: auto;
	padding-block: 28px 64px;
}

.hbm .hbm__inner--article {
	width: min(1180px, calc(100% - 48px));
}

.hbm a {
	text-decoration-thickness: from-font;
	text-underline-offset: .16em;
}

.hbm .hbm-media-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--hbm-placeholder);
}

.hbm .hbm-badge {
	display: inline-flex;
	align-items: center;
	min-height: 26px;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--hbm-brand);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
}

.hbm .hbm-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 10px;
	color: var(--hbm-muted);
	font-size: 13px;
	line-height: 1.35;
}

.hbm .hbm-meta--small {
	font-size: 12px;
}

/* ---------- Magazine home hero ---------- */
.hbm .hbm-home__inner {
	padding-top: 18px;
}

.hbm .hbm-home-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(300px, .92fr) minmax(310px, .82fr);
	gap: 16px;
	align-items: stretch;
}

.hbm .hbm-home-hero__main,
.hbm .hbm-home-hero__secondary,
.hbm .hbm-home-panel {
	min-width: 0;
}

.hbm .hbm-home-hero__secondary {
	display: grid;
	grid-template-rows: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.hbm .hbm-hero-main,
.hbm .hbm-hero-secondary {
	position: relative;
	min-width: 0;
	overflow: hidden;
	border-radius: 6px;
	background: var(--hbm-surface);
}

.hbm .hbm-hero-main {
	min-height: 560px;
}

.hbm .hbm-hero-main__media {
	position: absolute;
	inset: 0;
	display: block;
}

.hbm .hbm-hero-main__image,
.hbm .hbm-hero-secondary__image,
.hbm .hbm-panel-item__image,
.hbm .hbm-home-card__image,
.hbm .hbm-category-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hbm .hbm-hero-main__shade {
	position: absolute;
	inset: 28% 0 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .72));
}

.hbm .hbm-hero-main__content {
	position: absolute;
	z-index: 2;
	left: 28px;
	right: 28px;
	bottom: 28px;
	color: #fff;
}

.hbm .hbm-hero-main__title {
	max-width: 900px;
	margin: 12px 0 0;
	font: inherit;
	font-size: clamp(30px, 2.6vw, 46px);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -.025em;
}

.hbm .hbm-hero-main__title a {
	color: inherit;
	text-decoration: none;
}

.hbm .hbm-hero-main .hbm-meta {
	color: rgba(255, 255, 255, .88);
}

.hbm .hbm-hero-secondary {
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto;
	border: 1px solid var(--hbm-line);
}

.hbm .hbm-hero-secondary__media {
	display: block;
	min-height: 0;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.hbm .hbm-hero-secondary__body {
	padding: 14px 16px 16px;
}

.hbm .hbm-hero-secondary__title {
	margin: 9px 0 0;
	font: inherit;
	font-size: clamp(18px, 1.45vw, 24px);
	font-weight: 700;
	line-height: 1.16;
}

.hbm .hbm-hero-secondary__title a {
	color: inherit;
	text-decoration: none;
}

/* ---------- Latest / Popular panel ---------- */
.hbm .hbm-home-panel {
	align-self: stretch;
	border: 1px solid var(--hbm-line);
	border-radius: 6px;
	background: var(--hbm-surface);
	overflow: hidden;
}

.hbm .hbm-home-panel__tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-bottom: 1px solid var(--hbm-line);
}

.hbm .hbm-home-panel__tab {
	appearance: none;
	position: relative;
	min-height: 48px;
	padding: 0 12px;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.hbm .hbm-home-panel__tab[aria-selected="true"] {
	color: var(--hbm-brand);
}

.hbm .hbm-home-panel__tab[aria-selected="true"]::after {
	content: "";
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: -1px;
	height: 2px;
	background: var(--hbm-brand);
}

.hbm .hbm-home-panel__content[hidden] {
	display: none;
}

.hbm .hbm-panel-item {
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr);
	gap: 12px;
	padding: 12px 14px;
	border-bottom: 1px solid var(--hbm-line);
}

.hbm .hbm-panel-item:last-child {
	border-bottom: 0;
}

.hbm .hbm-panel-item__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 4px;
	background: var(--hbm-placeholder);
}

.hbm .hbm-panel-item__title {
	margin: 0;
	font: inherit;
	font-size: 15px;
	font-weight: 650;
	line-height: 1.2;
}

.hbm .hbm-panel-item__title a {
	color: inherit;
	text-decoration: none;
}

/* ---------- Home sections ---------- */
.hbm .hbm-section {
	margin-top: 42px;
	padding-top: 26px;
	border-top: 1px solid var(--hbm-line);
}

.hbm .hbm-section__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
}

.hbm .hbm-section__title {
	margin: 0;
	font: inherit;
	font-size: clamp(25px, 2vw, 32px);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.02em;
}

.hbm .hbm-latest-grid,
.hbm .hbm-category-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 26px 18px;
}

.hbm .hbm-home-card,
.hbm .hbm-category-card {
	min-width: 0;
	margin: 0;
}

.hbm .hbm-home-card__media,
.hbm .hbm-category-card__media {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: 5px;
	background: var(--hbm-placeholder);
}

.hbm .hbm-home-card__body,
.hbm .hbm-category-card__body {
	padding-top: 12px;
}

.hbm .hbm-home-card__title,
.hbm .hbm-category-card__title {
	margin: 0;
	font: inherit;
	font-size: clamp(17px, 1.25vw, 21px);
	font-weight: 650;
	line-height: 1.22;
}

.hbm .hbm-home-card__title a,
.hbm .hbm-category-card__title a {
	color: inherit;
	text-decoration: none;
}

.hbm .hbm-category-card .hbm-badge {
	margin-bottom: 9px;
}

/* ---------- Existing Phase 4A archive/single foundation ---------- */
.hbm .hbm-page-header {
	margin: 0 0 28px;
}

.hbm .hbm-page-header__eyebrow,
.hbm .hbm-card__category,
.hbm .hbm-article__category {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--hbm-brand);
}

.hbm .hbm-page-header__title,
.hbm .hbm-article__title {
	margin: 0;
	color: inherit;
}

.hbm .hbm-page-header__description {
	max-width: 760px;
	margin-top: 12px;
	color: var(--hbm-muted);
}

.hbm .hbm-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 28px 20px;
}

.hbm .hbm-card {
	min-width: 0;
	margin: 0;
}

.hbm .hbm-card__media {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--hbm-placeholder);
	text-decoration: none;
}

.hbm .hbm-card__image,
.hbm .hbm-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hbm .hbm-card__body {
	padding-top: 12px;
}

.hbm .hbm-card__category,
.hbm .hbm-article__category {
	display: inline-block;
	text-decoration: none;
}

.hbm .hbm-card__title {
	margin: 0;
	font: inherit;
	font-size: clamp(18px, 1.4vw, 23px);
	font-weight: 650;
	line-height: 1.2;
}

.hbm .hbm-card__title a {
	color: inherit;
	text-decoration: none;
}

.hbm .hbm-card__meta,
.hbm .hbm-article__meta {
	margin-top: 9px;
	font-size: 13px;
	color: var(--hbm-muted);
}

.hbm .hbm-pagination {
	margin-top: 42px;
}

.hbm .hbm-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.hbm .hbm-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: 12px;
	border: 1px solid var(--hbm-line);
	text-decoration: none;
}

.hbm .hbm-pagination .current {
	border-color: var(--hbm-brand);
	color: var(--hbm-brand);
}

.hbm .hbm-article__header {
	max-width: 900px;
	margin: 6px auto 34px;
	text-align: center;
}

.hbm .hbm-article__badge {
	margin-bottom: 14px;
}

.hbm .hbm-article__title {
	max-width: 900px;
	margin-inline: auto;
	font: inherit;
	font-size: clamp(36px, 4.65vw, 66px);
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -.035em;
}

.hbm .hbm-article__lead {
	max-width: 780px;
	margin: 20px auto 0;
	color: var(--hbm-muted);
	font-size: clamp(18px, 1.55vw, 22px);
	line-height: 1.52;
}

.hbm .hbm-article__lead p {
	margin: 0;
}

.hbm .hbm-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 18px;
	color: var(--hbm-muted);
	font-size: 14px;
	line-height: 1.35;
}

.hbm .hbm-article__meta-separator {
	opacity: .7;
}

.hbm .hbm-article__hero {
	margin: 0 auto 46px;
}

.hbm .hbm-article__hero-image {
	display: block;
	width: 100%;
	height: auto;
	max-height: 760px;
	object-fit: cover;
	border-radius: 6px;
}

.hbm .hbm-article__hero-caption {
	max-width: 800px;
	margin: 9px auto 0;
	color: var(--hbm-muted);
	font-size: 12px;
	line-height: 1.45;
	text-align: left;
}

.hbm .hbm-article__content {
	width: min(800px, 100%);
	margin-inline: auto;
	font-size: 18px;
	line-height: 1.72;
}

.hbm .hbm-article__content > :first-child {
	margin-top: 0;
}

.hbm .hbm-article__content > :last-child {
	margin-bottom: 0;
}

.hbm .hbm-article__content > p,
.hbm .hbm-article__content > ul,
.hbm .hbm-article__content > ol,
.hbm .hbm-article__content > blockquote,
.hbm .hbm-article__content > figure,
.hbm .hbm-article__content > table,
.hbm .hbm-article__content > .wp-block-table,
.hbm .hbm-article__content > .wp-block-image,
.hbm .hbm-article__content > .wp-block-gallery,
.hbm .hbm-article__content > .wp-block-quote,
.hbm .hbm-article__content > .wp-block-embed,
.hbm .hbm-article__content > .wp-block-columns {
	margin-top: 0;
	margin-bottom: 1.45em;
}

.hbm .hbm-article__content > h2,
.hbm .hbm-article__content > h3,
.hbm .hbm-article__content > h4,
.hbm .hbm-article__content > h5,
.hbm .hbm-article__content > h6 {
	font: inherit;
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -.02em;
}

.hbm .hbm-article__content > h2 {
	margin: 2.05em 0 .72em;
	font-size: clamp(28px, 2.4vw, 38px);
}

.hbm .hbm-article__content > h3 {
	margin: 1.8em 0 .65em;
	font-size: clamp(23px, 1.85vw, 30px);
}

.hbm .hbm-article__content > h4 {
	margin: 1.55em 0 .55em;
	font-size: 21px;
}

.hbm .hbm-article__content ul,
.hbm .hbm-article__content ol {
	padding-inline-start: 1.35em;
}

.hbm .hbm-article__content li + li {
	margin-top: .36em;
}

.hbm .hbm-article__content a {
	color: inherit;
	font-weight: 600;
	text-decoration-line: underline;
	text-decoration-color: var(--hbm-brand);
	text-decoration-thickness: 2px;
	text-underline-offset: .18em;
}

.hbm .hbm-article__content img {
	max-width: 100%;
	height: auto;
}

.hbm .hbm-article__content figcaption {
	margin-top: 7px;
	color: var(--hbm-muted);
	font-size: 12px;
	line-height: 1.45;
}

.hbm .hbm-article__content blockquote,
.hbm .hbm-article__content .wp-block-quote {
	padding: 2px 0 2px 22px;
	border-left: 3px solid var(--hbm-brand);
	font-size: 1.08em;
	line-height: 1.62;
}

.hbm .hbm-article__content blockquote p:last-child,
.hbm .hbm-article__content .wp-block-quote p:last-child {
	margin-bottom: 0;
}

.hbm .hbm-article__content pre,
.hbm .hbm-article__content table,
.hbm .hbm-article__content .wp-block-table {
	max-width: 100%;
	overflow-x: auto;
}

.hbm .hbm-article__content table {
	width: 100%;
	border-collapse: collapse;
	font-size: .92em;
	line-height: 1.5;
}

.hbm .hbm-article__content th,
.hbm .hbm-article__content td {
	padding: 10px 12px;
	border: 1px solid var(--hbm-line);
	vertical-align: top;
	text-align: left;
}

.hbm .hbm-article__content .alignwide {
	width: min(1100px, calc(100vw - 48px));
	max-width: none;
	margin-left: 50%;
	transform: translateX(-50%);
}

.hbm .hbm-article__content .alignfull {
	width: calc(100vw - 24px);
	max-width: none;
	margin-left: 50%;
	transform: translateX(-50%);
}

.hbm .hbm-article__pages {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 36px;
	padding-top: 20px;
	border-top: 1px solid var(--hbm-line);
}

.hbm .hbm-empty {
	margin: 24px 0 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 1220px) {
	.hbm .hbm-home-hero {
		grid-template-columns: minmax(0, 1.45fr) minmax(300px, 1fr);
	}

	.hbm .hbm-home-panel {
		grid-column: 1 / -1;
	}

	.hbm .hbm-home-panel__content {
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.hbm .hbm-home-panel__content[hidden] {
		display: none;
	}

	.hbm .hbm-panel-item {
		grid-template-columns: 82px minmax(0, 1fr);
		border-right: 1px solid var(--hbm-line);
		border-bottom: 0;
	}

	.hbm .hbm-panel-item:last-child {
		border-right: 0;
	}
}

@media (max-width: 1000px) {
	.hbm .hbm-latest-grid,
	.hbm .hbm-category-grid,
	.hbm .hbm-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hbm .hbm-home-panel__content {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hbm .hbm-panel-item {
		border-right: 0;
		border-bottom: 1px solid var(--hbm-line);
	}
}

@media (max-width: 820px) {
	.hbm .hbm-home-hero {
		grid-template-columns: 1fr;
	}

	.hbm .hbm-home-hero__secondary {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: none;
	}

	.hbm .hbm-hero-main {
		min-height: 0;
		aspect-ratio: 4 / 3;
	}
}

@media (max-width: 640px) {
	.hbm .hbm__inner,
	.hbm .hbm__inner--article {
		width: min(100% - 28px, 680px);
		padding-block: 18px 42px;
	}

	.hbm .hbm-home-hero__secondary {
		grid-template-columns: 1fr;
	}

	.hbm .hbm-hero-main {
		aspect-ratio: 4 / 5;
	}

	.hbm .hbm-hero-main__content {
		left: 18px;
		right: 18px;
		bottom: 20px;
	}

	.hbm .hbm-hero-main__title {
		font-size: clamp(28px, 8.5vw, 38px);
	}

	.hbm .hbm-home-panel__content {
		grid-template-columns: 1fr;
	}

	.hbm .hbm-panel-item {
		grid-template-columns: 100px minmax(0, 1fr);
	}

	.hbm .hbm-section {
		margin-top: 34px;
		padding-top: 22px;
	}

	.hbm .hbm-latest-grid,
	.hbm .hbm-category-grid,
	.hbm .hbm-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.hbm .hbm-latest-grid .hbm-home-card:not(:first-child),
	.hbm .hbm-category-grid .hbm-category-card {
		display: grid;
		grid-template-columns: 120px minmax(0, 1fr);
		gap: 14px;
		align-items: start;
	}

	.hbm .hbm-latest-grid .hbm-home-card:not(:first-child) .hbm-home-card__media,
	.hbm .hbm-category-grid .hbm-category-card__media {
		aspect-ratio: 3 / 2;
	}

	.hbm .hbm-latest-grid .hbm-home-card:not(:first-child) .hbm-home-card__body,
	.hbm .hbm-category-grid .hbm-category-card__body {
		padding-top: 0;
	}

	.hbm .hbm-category-card .hbm-badge {
		margin-bottom: 7px;
	}

	.hbm .hbm-article__header {
		margin-bottom: 24px;
	}

	.hbm .hbm-article__title {
		font-size: clamp(32px, 9vw, 46px);
		line-height: 1.07;
	}

	.hbm .hbm-article__lead {
		margin-top: 16px;
		font-size: 18px;
	}

	.hbm .hbm-article__hero {
		margin-bottom: 32px;
	}

	.hbm .hbm-article__hero-image {
		border-radius: 4px;
	}

	.hbm .hbm-article__content {
		font-size: 17px;
		line-height: 1.68;
	}

	.hbm .hbm-article__content .alignwide,
	.hbm .hbm-article__content .alignfull {
		width: calc(100vw - 28px);
	}

	.hbm .hbm-home-card__title,
	.hbm .hbm-category-card__title {
		font-size: 17px;
	}

	.hbm .hbm-card {
		display: grid;
		grid-template-columns: 128px minmax(0, 1fr);
		gap: 14px;
		align-items: start;
	}

	.hbm .hbm-card:first-child {
		display: block;
	}

	.hbm .hbm-card__body {
		padding-top: 0;
	}

	.hbm .hbm-card:first-child .hbm-card__body {
		padding-top: 12px;
	}

}

/* ---------- Phase 4C category archive ---------- */
.hbm .hbm-category__inner {
	padding-top: 22px;
}

.hbm .hbm-category-header {
	padding-bottom: 22px;
	border-bottom: 1px solid var(--hbm-line);
}

.hbm .hbm-category-header .hbm-page-header__title {
	font-size: clamp(34px, 3.5vw, 52px);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -.025em;
}

.hbm .hbm-archive-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 34px 20px;
}

.hbm .hbm-archive-card {
	min-width: 0;
	margin: 0;
}

.hbm .hbm-archive-card__media {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: 5px;
	background: var(--hbm-placeholder);
	text-decoration: none;
}

.hbm .hbm-archive-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .24s ease;
}

@media (hover: hover) and (pointer: fine) {
	.hbm .hbm-archive-card__media:hover .hbm-archive-card__image {
		transform: scale(1.018);
	}
}

.hbm .hbm-archive-card__body {
	padding-top: 12px;
}

.hbm .hbm-archive-card__category {
	display: inline-block;
	margin-bottom: 7px;
	color: var(--hbm-brand);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}

.hbm .hbm-archive-card__title {
	margin: 0;
	font: inherit;
	font-size: clamp(17px, 1.25vw, 21px);
	font-weight: 650;
	line-height: 1.22;
}

.hbm .hbm-archive-card__title a {
	color: inherit;
	text-decoration: none;
}

.hbm .hbm-pagination {
	display: flex;
	justify-content: center;
	margin-top: 52px;
}

.hbm .hbm-pagination .navigation,
.hbm .hbm-pagination .nav-links {
	width: auto;
}

.hbm .hbm-pagination .nav-links {
	justify-content: center;
}

.hbm .hbm-pagination .page-numbers {
	border-radius: 4px;
	background: var(--hbm-surface);
}

.hbm .hbm-pagination a.page-numbers:hover,
.hbm .hbm-pagination a.page-numbers:focus-visible {
	border-color: var(--hbm-brand);
	color: var(--hbm-brand);
}

@media (max-width: 1000px) {
	.hbm .hbm-archive-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.hbm .hbm-category-header {
		margin-bottom: 22px;
		padding-bottom: 18px;
	}

	.hbm .hbm-category-header .hbm-page-header__title {
		font-size: clamp(32px, 10vw, 42px);
	}

	.hbm .hbm-archive-grid {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.hbm .hbm-archive-card {
		display: grid;
		grid-template-columns: 128px minmax(0, 1fr);
		gap: 14px;
		align-items: start;
		padding: 14px 0;
		border-bottom: 1px solid var(--hbm-line);
	}

	.hbm .hbm-archive-card:first-child {
		display: block;
		padding-top: 0;
		padding-bottom: 22px;
	}

	.hbm .hbm-archive-card__media {
		aspect-ratio: 3 / 2;
		border-radius: 4px;
	}

	.hbm .hbm-archive-card:first-child .hbm-archive-card__media {
		aspect-ratio: 16 / 9;
		border-radius: 5px;
	}

	.hbm .hbm-archive-card__body {
		padding-top: 0;
	}

	.hbm .hbm-archive-card:first-child .hbm-archive-card__body {
		padding-top: 12px;
	}

	.hbm .hbm-archive-card__category {
		margin-bottom: 5px;
	}

	.hbm .hbm-archive-card__title {
		font-size: 17px;
		line-height: 1.2;
	}

	.hbm .hbm-archive-card:first-child .hbm-archive-card__title {
		font-size: clamp(23px, 7vw, 30px);
		line-height: 1.12;
	}

	.hbm .hbm-archive-card .hbm-meta {
		margin-top: 7px;
		font-size: 11px;
	}

	.hbm .hbm-pagination {
		margin-top: 34px;
	}

	.hbm .hbm-pagination .nav-links {
		gap: 6px;
	}

	.hbm .hbm-pagination .page-numbers {
		min-width: 36px;
		height: 36px;
		padding-inline: 9px;
	}
}

/* ---------- Phase 4E related articles ---------- */
.hbm .hbm-related {
	width: min(1180px, 100%);
	margin: 54px auto 0;
	padding-top: 28px;
	border-top: 1px solid var(--hbm-line);
}

.hbm .hbm-related__header {
	margin-bottom: 18px;
}

.hbm .hbm-related__title {
	margin: 0;
	font: inherit;
	font-size: clamp(25px, 2vw, 32px);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.02em;
}

.hbm .hbm-related__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px 20px;
}

.hbm .hbm-related-card {
	min-width: 0;
	margin: 0;
}

.hbm .hbm-related-card__media {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: 5px;
	background: var(--hbm-placeholder);
	text-decoration: none;
}

.hbm .hbm-related-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hbm .hbm-related-card__body {
	padding-top: 12px;
}

.hbm .hbm-related-card__category {
	display: inline-block;
	margin-bottom: 7px;
	color: var(--hbm-brand);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}

.hbm .hbm-related-card__title {
	margin: 0;
	font: inherit;
	font-size: clamp(18px, 1.35vw, 22px);
	font-weight: 650;
	line-height: 1.22;
}

.hbm .hbm-related-card__title a {
	color: inherit;
	text-decoration: none;
}

@media (max-width: 820px) {
	.hbm .hbm-related__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.hbm .hbm-related {
		margin-top: 40px;
		padding-top: 22px;
	}

	.hbm .hbm-related__grid {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.hbm .hbm-related-card {
		display: grid;
		grid-template-columns: 120px minmax(0, 1fr);
		gap: 14px;
		align-items: start;
		padding: 14px 0;
		border-bottom: 1px solid var(--hbm-line);
	}

	.hbm .hbm-related-card:last-child {
		border-bottom: 0;
	}

	.hbm .hbm-related-card__body {
		padding-top: 0;
	}

	.hbm .hbm-related-card__title {
		font-size: 17px;
	}
}

/* ---------- Phase 4F responsive / interaction polish ---------- */
.hbm .hbm-hero-main__title,
.hbm .hbm-hero-secondary__title,
.hbm .hbm-panel-item__title,
.hbm .hbm-home-card__title,
.hbm .hbm-category-card__title,
.hbm .hbm-archive-card__title,
.hbm .hbm-related-card__title,
.hbm .hbm-article__title {
	overflow-wrap: anywhere;
}

.hbm a:focus-visible,
.hbm button:focus-visible {
	outline: 3px solid var(--hbm-brand);
	outline-offset: 3px;
}

.hbm .hbm-home-card__media,
.hbm .hbm-category-card__media,
.hbm .hbm-related-card__media {
	background: var(--hbm-placeholder);
}

@media (hover: hover) and (pointer: fine) {
	.hbm .hbm-home-card__image,
	.hbm .hbm-category-card__image,
	.hbm .hbm-related-card__image,
	.hbm .hbm-hero-secondary__image {
		transition: transform .24s ease;
	}

	.hbm .hbm-home-card__media:hover .hbm-home-card__image,
	.hbm .hbm-category-card__media:hover .hbm-category-card__image,
	.hbm .hbm-related-card__media:hover .hbm-related-card__image,
	.hbm .hbm-hero-secondary__media:hover .hbm-hero-secondary__image {
		transform: scale(1.018);
	}
}

@media (max-width: 1220px) {
	.hbm .hbm-home-panel__content {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.hbm .hbm-panel-item:nth-child(n + 4) {
		border-top: 1px solid var(--hbm-line);
	}
}

@media (max-width: 1000px) {
	.hbm .hbm-home-panel__content {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hbm .hbm-panel-item:nth-child(n + 3) {
		border-top: 1px solid var(--hbm-line);
	}

	.hbm .hbm-article__hero {
		margin-bottom: 38px;
	}
}

@media (max-width: 820px) {
	.hbm .hbm-home-hero {
		gap: 18px;
	}

	.hbm .hbm-home-panel__content {
		grid-template-columns: 1fr;
	}

	.hbm .hbm-panel-item,
	.hbm .hbm-panel-item:nth-child(n + 2) {
		border-top: 0;
		border-bottom: 1px solid var(--hbm-line);
	}

	.hbm .hbm-panel-item:last-child {
		border-bottom: 0;
	}
}

@media (max-width: 640px) {
	.hbm .hbm-home__inner {
		padding-top: 12px;
	}

	.hbm .hbm-hero-main {
		aspect-ratio: 5 / 4;
	}

	.hbm .hbm-home-hero__secondary {
		gap: 0;
		border-top: 1px solid var(--hbm-line);
	}

	.hbm .hbm-hero-secondary {
		display: grid;
		grid-template-columns: 124px minmax(0, 1fr);
		grid-template-rows: none;
		gap: 14px;
		padding: 14px 0;
		border: 0;
		border-bottom: 1px solid var(--hbm-line);
		border-radius: 0;
	}

	.hbm .hbm-hero-secondary__media {
		aspect-ratio: 3 / 2;
		border-radius: 4px;
	}

	.hbm .hbm-hero-secondary__body {
		padding: 0;
	}

	.hbm .hbm-hero-secondary__title {
		margin-top: 7px;
		font-size: 17px;
		line-height: 1.2;
	}

	.hbm .hbm-hero-secondary .hbm-badge {
		min-height: 22px;
		padding: 3px 8px;
		font-size: 10px;
	}

	.hbm .hbm-hero-secondary .hbm-meta {
		margin-top: 7px;
		font-size: 11px;
	}

	.hbm .hbm-home-panel {
		border-radius: 4px;
	}

	.hbm .hbm-section__header {
		margin-bottom: 15px;
	}

	.hbm .hbm-section__title,
	.hbm .hbm-related__title {
		font-size: 25px;
	}

	.hbm .hbm-pagination {
		overflow-x: auto;
		justify-content: flex-start;
		padding-bottom: 4px;
	}

	.hbm .hbm-pagination .nav-links {
		flex-wrap: nowrap;
		justify-content: flex-start;
	}
}

@media (max-width: 390px) {
	.hbm .hbm__inner,
	.hbm .hbm__inner--article {
		width: calc(100% - 24px);
	}

	.hbm .hbm-hero-main__content {
		left: 15px;
		right: 15px;
		bottom: 17px;
	}

	.hbm .hbm-hero-main__title {
		font-size: 28px;
	}

	.hbm .hbm-hero-secondary,
	.hbm .hbm-latest-grid .hbm-home-card:not(:first-child),
	.hbm .hbm-category-grid .hbm-category-card,
	.hbm .hbm-archive-card,
	.hbm .hbm-related-card {
		grid-template-columns: 108px minmax(0, 1fr);
		gap: 12px;
	}

	.hbm .hbm-panel-item {
		grid-template-columns: 88px minmax(0, 1fr);
	}

	.hbm .hbm-article__title {
		font-size: 31px;
	}
}

/* ---------- Magazine search ---------- */
.hbm .hbm-search-header {
	margin-bottom: 26px;
}

/* Header category navigation shortcode. */
.hbm-context .hbm-magazine-nav {
	max-width: 100%;
}

.hbm-context .hbm-magazine-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(14px, 1.5vw, 24px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hbm-context .hbm-magazine-nav__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	color: #222;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
}

.hbm-context .hbm-magazine-nav__link::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 2px;
	left: 0;
	height: 2px;
	background: var(--hbm-brand);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 160ms ease;
}

.hbm-context .hbm-magazine-nav__link:hover::after,
.hbm-context .hbm-magazine-nav__link.is-current::after {
	transform: scaleX(1);
}

.hbm-context .hbm-magazine-nav__link:focus-visible {
	outline: 2px solid var(--hbm-brand);
	outline-offset: 3px;
}

@media (max-width: 820px) {
	.hbm-context .hbm-magazine-nav {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.hbm-context .hbm-magazine-nav::-webkit-scrollbar {
		display: none;
	}

	.hbm-context .hbm-magazine-nav__list {
		width: max-content;
		gap: 18px;
	}
}

.hbm-context .hbm-header-search {
	display: flex;
	align-items: stretch;
	gap: 8px;
	width: min(420px, 100%);
}

.hbm-context .hbm-header-search__label {
	display: block;
	min-width: 0;
	flex: 1 1 auto;
	margin: 0;
}

.hbm-context .hbm-header-search__input {
	min-width: 0;
	flex: 1 1 auto;
	min-height: 40px;
	padding: 8px 12px;
	border: 1px solid var(--hbm-line);
	border-radius: 5px;
	background: #fff;
	color: inherit;
	font: inherit;
}

.hbm-context .hbm-header-search__submit {
	min-height: 40px;
	padding: 8px 14px;
	border: 1px solid var(--hbm-brand);
	border-radius: 5px;
	background: var(--hbm-brand);
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.hbm-context .hbm-header-search__input:focus-visible,
.hbm-context .hbm-header-search__submit:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Woodmart page shell compatibility: Magazine main is the full-width content
 * column inside Woodmart's existing .container > .row wrapper. */
.hbm.site-content {
	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
	flex: 0 0 100% !important;
}

/* ---------- Dedicated Woodmart Magazine header/footer ---------- */
.hbm-context .hbm-header-kicker,
.hbm-context .hbm-header-links,
.hbm-context .hbm-header-nav-slot,
.hbm-context .hbm-header-search-slot {
	font-family: Lato, sans-serif;
}

.hbm-context .hbm-header-kicker {
	font-size: 15px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.hbm-context .hbm-header-kicker a,
.hbm-context .hbm-header-links a {
	color: #222;
	text-decoration: none;
}

.hbm-context .hbm-header-links {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 18px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.hbm-context .hbm-header-links .hbm-header-shop-link {
	padding: 9px 15px;
	border-radius: 5px;
	background: var(--hbm-brand);
	color: #fff;
}

.hbm-context .hbm-header-nav-slot {
	width: 100%;
}

.hbm-context .hbm-header-search-slot {
	display: flex;
	justify-content: flex-end;
	width: 100%;
}

.hbm-context .hbm-mag-footer {
	margin-top: 72px;
	border-top: 1px solid var(--hbm-line);
	background: #fff;
	color: #333;
}

.hbm-context .hbm-mag-footer__inner,
.hbm-context .hbm-mag-footer__bottom {
	width: min(1320px, calc(100% - 40px));
	margin-inline: auto;
}

.hbm-context .hbm-mag-footer__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 48px;
	padding: 44px 0 34px;
}

.hbm-context .hbm-mag-footer__brand-column {
	max-width: 440px;
}

.hbm-context .hbm-mag-footer__logo-link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.hbm-context .hbm-mag-footer__logo {
	display: block;
	width: auto;
	max-width: 104px;
	height: auto;
}

.hbm-context .hbm-mag-footer__brand {
	font-size: 24px;
	font-weight: 800;
	color: var(--hbm-brand);
}

.hbm-context .hbm-mag-footer__kicker {
	margin: 13px 0 5px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.hbm-context .hbm-mag-footer__tagline {
	margin: 0;
	color: #666;
	font-size: 14px;
}

.hbm-context .hbm-mag-footer__nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 12px 24px;
}

.hbm-context .hbm-mag-footer__nav a {
	color: #333;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

.hbm-context .hbm-mag-footer__nav a:hover,
.hbm-context .hbm-mag-footer__nav a:focus-visible {
	color: var(--hbm-brand);
}

.hbm-context .hbm-mag-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 0 24px;
	border-top: 1px solid var(--hbm-line);
	color: #777;
	font-size: 12px;
}

@media (max-width: 820px) {
	.hbm-context .hbm-header-kicker {
		font-size: 12px;
		letter-spacing: .11em;
	}

	.hbm-context .hbm-header-links {
		gap: 8px;
		font-size: 11px;
	}

	.hbm-context .hbm-header-links .hbm-header-home-link {
		display: none;
	}

	.hbm-context .hbm-header-links .hbm-header-shop-link {
		padding: 7px 10px;
	}

	.hbm-context .hbm-header-nav-slot,
	.hbm-context .hbm-header-search-slot {
		justify-content: flex-start;
	}

	.hbm-context .hbm-header-search {
		width: 100%;
	}

	.hbm-context .hbm-header-search__input,
	.hbm-context .hbm-header-search__submit {
		min-height: 38px;
	}

	.hbm-context .hbm-mag-footer {
		margin-top: 52px;
	}

	.hbm-context .hbm-mag-footer__inner,
	.hbm-context .hbm-mag-footer__bottom {
		width: min(100% - 28px, 1320px);
	}

	.hbm-context .hbm-mag-footer__inner {
		grid-template-columns: 1fr;
		gap: 28px;
		padding: 36px 0 28px;
	}

	.hbm-context .hbm-mag-footer__nav {
		justify-content: flex-start;
	}

	.hbm-context .hbm-mag-footer__bottom {
		align-items: flex-start;
		flex-direction: column;
		gap: 5px;
	}
}

/* ========================================================================
 * dev.6 — approved live UI polish
 * Header branding, desktop category bar, mobile controls and home alignment.
 * All rules remain isolated to Magazine context.
 * ======================================================================== */

/* --- Dedicated Hello Magazin brand asset --- */
.hbm-context .hbm-header-brand-host,
.hbm-context .hbm-header-actions-host {
	font-family: Lato, sans-serif;
}

.hbm-context .hbm-header-brand {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	text-decoration: none;
}

.hbm-context .hbm-header-brand__image {
	display: block;
	width: clamp(220px, 20vw, 286px);
	max-width: 100%;
	height: auto;
}

.hbm-context .hbm-header-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
}

.hbm-context .hbm-header-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 8px 15px;
	border: 1px solid var(--hbm-brand);
	border-radius: 5px;
	background: var(--hbm-brand);
	color: #fff !important;
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: .04em;
	text-decoration: none !important;
	text-transform: uppercase;
	white-space: nowrap;
	transition: opacity 160ms ease, transform 160ms ease;
}

.hbm-context .hbm-header-action:hover,
.hbm-context .hbm-header-action:focus-visible {
	color: #fff !important;
	opacity: .88;
}

/* --- Desktop category bar: one defined HB strip, no loose columns --- */
.hbm-context .hbm-header-bar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(250px, 330px);
	align-items: center;
	gap: 22px;
	width: min(1320px, calc(100vw - 40px));
	margin-inline: auto;
}

.hbm-context .hbm-header-bar__nav,
.hbm-context .hbm-header-bar__search {
	min-width: 0;
}

.hbm-context .hbm-header-bar .hbm-magazine-nav {
	overflow: hidden;
}

.hbm-context .hbm-header-bar .hbm-magazine-nav__list {
	justify-content: flex-start;
	gap: clamp(12px, 1.35vw, 21px);
	width: 100%;
}

.hbm-context .hbm-header-bar .hbm-magazine-nav__link {
	min-height: 50px;
	color: #fff;
	font-size: clamp(12px, .9vw, 14px);
	font-weight: 700;
}

.hbm-context .hbm-header-bar .hbm-magazine-nav__link::after {
	bottom: 6px;
	background: #fff;
}

.hbm-context .hbm-header-bar .hbm-magazine-nav__link:hover,
.hbm-context .hbm-header-bar .hbm-magazine-nav__link:focus-visible,
.hbm-context .hbm-header-bar .hbm-magazine-nav__link.is-current {
	color: #fff;
}

.hbm-context .hbm-header-bar .hbm-header-search {
	width: 100%;
	gap: 6px;
}

.hbm-context .hbm-header-bar .hbm-header-search__input {
	min-height: 36px;
	border-color: rgba(255,255,255,.72);
	border-radius: 4px;
	font-size: 13px;
}

.hbm-context .hbm-header-bar .hbm-header-search__submit {
	min-height: 36px;
	padding: 7px 11px;
	border-color: #fff;
	background: #fff;
	color: var(--hbm-brand);
	font-size: 11px;
	text-transform: uppercase;
}

/* --- Mobile header: logo + compact controls in one top row. --- */
.hbm-context .hbm-mobile-tools {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
}

.hbm-context .hbm-mobile-tool {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 5px;
	background: transparent;
	color: #222;
	cursor: pointer;
}

.hbm-context .hbm-mobile-tool svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
}

.hbm-context .hbm-mobile-tool:hover,
.hbm-context .hbm-mobile-tool:focus-visible,
.hbm-context .hbm-mobile-tool[aria-expanded="true"] {
	background: var(--hbm-brand-soft);
	color: var(--hbm-brand);
}

.hbm-context .hbm-mobile-popover[hidden] {
	display: none !important;
}

.hbm-context .hbm-mobile-popover {
	position: fixed;
	z-index: 100000;
	top: calc(var(--wd-admin-bar-h, 0px) + 68px);
	right: 10px;
	left: 10px;
	max-height: calc(100vh - var(--wd-admin-bar-h, 0px) - 82px);
	overflow: auto;
	padding: 18px;
	border: 1px solid var(--hbm-line);
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 14px 42px rgba(24,39,58,.16);
	color: #222;
}

.hbm-context .hbm-mobile-popover__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
	font-size: 15px;
}

.hbm-context .hbm-mobile-popover__close {
	appearance: none;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #222;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

.hbm-context .hbm-mobile-popover .hbm-header-search {
	width: 100%;
}

.hbm-context .hbm-mobile-popover .hbm-header-search__input,
.hbm-context .hbm-mobile-popover .hbm-header-search__submit {
	min-height: 42px;
}

.hbm-context .hbm-mobile-popover--menu .hbm-magazine-nav {
	overflow: visible;
}

.hbm-context .hbm-mobile-popover--menu .hbm-magazine-nav__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	width: 100%;
}

.hbm-context .hbm-mobile-popover--menu .hbm-magazine-nav__item {
	border-bottom: 1px solid var(--hbm-line);
}

.hbm-context .hbm-mobile-popover--menu .hbm-magazine-nav__link {
	display: flex;
	min-height: 46px;
	color: #222;
	font-size: 15px;
	font-weight: 700;
}

.hbm-context .hbm-mobile-popover--menu .hbm-magazine-nav__link::after {
	display: none;
}

.hbm-context .hbm-mobile-popover__actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: 18px;
}

/* --- Home hero: all three desktop columns lock to the same height. --- */
@media (min-width: 1221px) {
	.hbm .hbm-home-hero {
		height: 560px;
		min-height: 560px;
	}

	.hbm .hbm-home-hero__main,
	.hbm .hbm-home-hero__secondary,
	.hbm .hbm-home-panel,
	.hbm .hbm-hero-main {
		height: 560px;
		min-height: 0;
	}

	.hbm .hbm-home-panel {
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	.hbm .hbm-home-panel__content {
		flex: 1 1 auto;
		min-height: 0;
		display: grid;
		grid-template-rows: repeat(5, minmax(0, 1fr));
	}

	.hbm .hbm-home-panel__content[hidden] {
		display: none;
	}

	.hbm .hbm-panel-item {
		min-height: 0;
		grid-template-columns: 78px minmax(0, 1fr);
		align-items: center;
		gap: 10px;
		padding: 9px 12px;
	}

	.hbm .hbm-panel-item__title {
		display: -webkit-box;
		overflow: hidden;
		font-size: 14px;
		line-height: 1.18;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
	}

	.hbm .hbm-panel-item .hbm-meta {
		margin-top: 5px;
		font-size: 10px;
	}
}

/* Secondary hero stories become clean image-led blocks with overlay copy. */
.hbm .hbm-hero-secondary {
	position: relative;
	display: block;
	min-height: 0;
	border: 0;
	background: #222;
}

.hbm .hbm-hero-secondary__media {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
}

.hbm .hbm-hero-secondary::after {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 28% 0 0;
	background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.76));
	pointer-events: none;
}

.hbm .hbm-hero-secondary__body {
	position: absolute;
	z-index: 2;
	right: 16px;
	bottom: 15px;
	left: 16px;
	padding: 0;
	color: #fff;
}

.hbm .hbm-hero-secondary__title {
	display: -webkit-box;
	overflow: hidden;
	margin-top: 8px;
	font-size: clamp(16px, 1.2vw, 19px);
	line-height: 1.16;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.hbm .hbm-hero-secondary__title a,
.hbm .hbm-hero-secondary .hbm-meta {
	color: #fff;
}

.hbm .hbm-hero-secondary .hbm-meta {
	margin-top: 7px;
	font-size: 11px;
}

.hbm .hbm-hero-secondary .hbm-badge {
	min-height: 22px;
	padding: 3px 8px;
	font-size: 10px;
}

/* --- Consistent home cards; category badge sits on image bottom-left. --- */
.hbm .hbm-home-card,
.hbm .hbm-category-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.hbm .hbm-home-card__media-wrap,
.hbm .hbm-category-card__media-wrap {
	position: relative;
}

.hbm .hbm-card-badge-overlay {
	position: absolute;
	z-index: 2;
	left: 10px;
	bottom: 10px;
	margin: 0 !important;
	box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

.hbm .hbm-home-card__body,
.hbm .hbm-category-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

.hbm .hbm-home-card__title,
.hbm .hbm-category-card__title {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.hbm .hbm-home-card__body .hbm-meta,
.hbm .hbm-category-card__body .hbm-meta {
	margin-top: auto;
	padding-top: 10px;
}

/* --- Responsive adjustments after desktop polish. --- */
@media (max-width: 1220px) and (min-width: 821px) {
	.hbm-context .hbm-header-bar {
		grid-template-columns: minmax(0, 1fr) minmax(220px, 270px);
		gap: 14px;
	}

	.hbm-context .hbm-header-bar .hbm-magazine-nav__list {
		gap: 11px;
	}

	.hbm-context .hbm-header-bar .hbm-magazine-nav__link {
		font-size: 12px;
	}

	.hbm .hbm-hero-secondary {
		min-height: 250px;
	}
}

@media (max-width: 820px) {
	.hbm-context .hbm-header-brand__image {
		width: clamp(158px, 45vw, 205px);
	}

	.hbm-context .hbm-header-actions,
	.hbm-context .hbm-header-bar {
		display: none;
	}

	.hbm .hbm-home-hero__secondary {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		gap: 0;
		border-top: 1px solid var(--hbm-line);
	}

	.hbm .hbm-hero-secondary {
		display: grid;
		grid-template-columns: 124px minmax(0, 1fr);
		gap: 14px;
		min-height: 0;
		padding: 14px 0;
		border-bottom: 1px solid var(--hbm-line);
		background: transparent;
	}

	.hbm .hbm-hero-secondary::after {
		display: none;
	}

	.hbm .hbm-hero-secondary__media {
		position: relative;
		inset: auto;
		aspect-ratio: 3 / 2;
		border-radius: 4px;
	}

	.hbm .hbm-hero-secondary__body {
		position: relative;
		inset: auto;
		padding: 0;
		color: inherit;
	}

	.hbm .hbm-hero-secondary__title {
		margin-top: 7px;
		font-size: 17px;
	}

	.hbm .hbm-hero-secondary__title a {
		color: inherit;
	}

	.hbm .hbm-hero-secondary .hbm-meta {
		color: var(--hbm-muted);
	}
}

@media (max-width: 640px) {
	.hbm .hbm-latest-grid .hbm-home-card:not(:first-child),
	.hbm .hbm-category-grid .hbm-category-card {
		display: grid;
		grid-template-columns: 120px minmax(0, 1fr);
		height: auto;
	}

	.hbm .hbm-latest-grid .hbm-home-card:not(:first-child) .hbm-home-card__body,
	.hbm .hbm-category-grid .hbm-category-card__body {
		min-height: 100%;
	}

	.hbm .hbm-card-badge-overlay {
		left: 7px;
		bottom: 7px;
		min-height: 20px;
		padding: 3px 7px;
		font-size: 9px;
	}
}

/* ========================================================================
 * dev.7 — archive/header/article polish + curated shop rail
 * ======================================================================== */

/* Force the dedicated desktop Magazine category strip to read as one HB bar
 * even when Woodmart's imported row background CSS is stale/cached. */
@media (min-width: 821px) {
	.hbm-context .whb-header-bottom,
	.hbm-context .whb-header-bottom .whb-header-bottom-inner {
		background: var(--hbm-brand) !important;
	}

	.hbm-context .whb-header-bottom .whb-column,
	.hbm-context .hbm-header-bar-host {
		width: 100%;
		max-width: 100%;
	}
}

/* Mobile drawer: Magazine links first, then visually distinct shop exits. */
.hbm-context .hbm-mobile-popover__actions .hbm-header-action {
	width: 100%;
	min-height: 44px;
	background: var(--hbm-brand);
	border-color: var(--hbm-brand);
	color: #fff !important;
}

/* Category archive: compact Klix-like trail instead of a large repeated intro. */
.hbm .hbm-category__inner {
	padding-top: 18px;
}

.hbm .hbm-category-trail {
	display: flex;
	align-items: center;
	gap: 11px;
	min-height: 46px;
	margin-bottom: 22px;
	padding: 0 4px;
	border-top: 1px solid var(--hbm-line);
	border-bottom: 1px solid var(--hbm-line);
	font-size: 14px;
	line-height: 1.2;
}

.hbm .hbm-category-trail__home {
	color: var(--hbm-brand);
	font-weight: 800;
	text-decoration: none;
}

.hbm .hbm-category-trail__home:hover,
.hbm .hbm-category-trail__home:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hbm .hbm-category-trail__separator {
	color: var(--hbm-muted);
	font-size: 18px;
}

.hbm .hbm-category-trail__title {
	margin: 0;
	font: inherit;
	font-weight: 800;
	color: #333;
}

/* Category context is already explicit in the trail; don't repeat it on every card. */
.hbm .hbm-archive-card__body {
	padding-top: 10px;
}

/* Single article: closer to a magazine/news title scale, not a landing-page H1. */
.hbm .hbm-article__header {
	max-width: 1040px;
	margin-bottom: 30px;
}

.hbm .hbm-article__title {
	max-width: 1040px;
	font-size: clamp(36px, 3.6vw, 52px);
	line-height: 1.08;
	letter-spacing: -.025em;
}

.hbm .hbm-article__lead {
	max-width: 850px;
	font-size: clamp(18px, 1.4vw, 21px);
}

/* Desktop article + sticky curated-product rail. */
.hbm .hbm-article-layout {
	width: 100%;
	max-width: 1240px;
	margin-inline: auto;
}

.hbm .hbm-article-layout.has-products {
	display: grid;
	grid-template-columns: minmax(0, 860px) minmax(280px, 320px);
	gap: 46px;
	align-items: start;
}

.hbm .hbm-article-main {
	min-width: 0;
}

.hbm .hbm-article-layout:not(.has-products) .hbm-article-main {
	max-width: 900px;
	margin-inline: auto;
}

.hbm .hbm-article__hero {
	margin-bottom: 34px;
}

.hbm .hbm-article__hero-caption,
.hbm .hbm-article__content {
	width: 100%;
	max-width: 800px;
	margin-inline: auto;
}

.hbm .hbm-product-rail {
	min-width: 0;
}

.hbm .hbm-product-rail__sticky {
	position: sticky;
	top: 86px;
	padding: 0 0 4px 20px;
	border-left: 1px solid var(--hbm-line);
}

.hbm .hbm-product-rail__title {
	margin: 0 0 12px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--hbm-brand);
	font: inherit;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.2;
	color: #333;
}

.hbm .hbm-product-rail__list {
	display: grid;
	gap: 0;
}

.hbm .hbm-product-card {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	margin: 0;
	padding: 13px 0;
	border-bottom: 1px solid var(--hbm-line);
}

.hbm .hbm-product-card:last-child {
	border-bottom: 0;
}

.hbm .hbm-product-card__media {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 5px;
	background: var(--hbm-placeholder);
	text-decoration: none;
}

.hbm .hbm-product-card__image,
.hbm .hbm-product-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hbm .hbm-product-card__title {
	margin: 0;
	font: inherit;
	font-size: 14px;
	font-weight: 800;
	line-height: 1.22;
}

.hbm .hbm-product-card__title a {
	color: #333;
	text-decoration: none;
}

.hbm .hbm-product-card__title a:hover,
.hbm .hbm-product-card__title a:focus-visible {
	color: var(--hbm-brand);
}

.hbm .hbm-product-card__description {
	display: -webkit-box;
	overflow: hidden;
	margin: 6px 0 0;
	color: var(--hbm-muted);
	font-size: 12px;
	line-height: 1.38;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

@media (max-width: 1050px) {
	.hbm .hbm-article-layout.has-products {
		display: block;
	}

	.hbm .hbm-article-main {
		max-width: 860px;
		margin-inline: auto;
	}

	.hbm .hbm-product-rail {
		max-width: 860px;
		margin: 42px auto 0;
		padding-top: 26px;
		border-top: 1px solid var(--hbm-line);
	}

	.hbm .hbm-product-rail__sticky {
		position: static;
		padding-left: 0;
		border-left: 0;
	}

	.hbm .hbm-product-rail__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 24px;
	}
}

@media (max-width: 640px) {
	.hbm .hbm-category__inner {
		padding-top: 10px;
	}

	.hbm .hbm-category-trail {
		min-height: 42px;
		margin-bottom: 14px;
		font-size: 13px;
	}

	.hbm .hbm-article__header {
		margin: 2px auto 24px;
	}

	.hbm .hbm-article__title {
		font-size: clamp(29px, 9vw, 34px);
		line-height: 1.08;
	}

	.hbm .hbm-article__lead {
		margin-top: 15px;
		font-size: 17px;
	}

	.hbm .hbm-product-rail {
		margin-top: 34px;
		padding-top: 22px;
	}

	.hbm .hbm-product-rail__title {
		font-size: 17px;
	}

	.hbm .hbm-product-rail__list {
		grid-template-columns: 1fr;
	}

	.hbm .hbm-product-card {
		grid-template-columns: 92px minmax(0, 1fr);
	}
}

/* ========================================================================
 * dev.8 — live header fidelity, preview Popular truthfulness, mobile cleanup
 * ======================================================================== */

/* Never impose a plugin font on the Woodmart header. Typography comes from
 * the active Woodmart header/text settings just like the shop header. */
.hbm-context .hbm-header-brand-host,
.hbm-context .hbm-header-actions-host,
.hbm-context .hbm-header-search-host,
.hbm-context .hbm-header-action,
.hbm-context .hbm-header-bar,
.hbm-context .hbm-header-bar .hbm-magazine-nav__link,
.hbm-context .hbm-header-search,
.hbm-context .hbm-header-search__input,
.hbm-context .hbm-header-search__submit,
.hbm-context .hbm-mobile-popover {
	font-family: inherit !important;
}

/* Desktop general row now mirrors the shop header rhythm: brand left,
 * Magazine search in the middle, two exit buttons on the right. */
.hbm-context .hbm-header-search-host {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-width: 0;
}

.hbm-context .hbm-header-search-host .hbm-header-search {
	position: relative;
	display: block;
	width: min(380px, 100%);
	margin: 0;
}

.hbm-context .hbm-header-search-host .hbm-header-search__label {
	display: block;
	width: 100%;
}

.hbm-context .hbm-header-search-host .hbm-header-search__input {
	width: 100%;
	min-height: 44px;
	padding: 8px 48px 8px 16px;
	border: 1px solid #d9e1e4;
	border-radius: 24px;
	background: #fff;
	box-shadow: none;
}

.hbm-context .hbm-header-search-host .hbm-header-search__input:focus {
	border-color: var(--hbm-brand);
}

.hbm-context .hbm-header-search-host .hbm-header-search__submit {
	position: absolute;
	top: 50%;
	right: 7px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #333;
}

.hbm-context .hbm-header-search__submit svg {
	display: block;
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
}

.hbm-context .hbm-header-search-host .hbm-header-search__submit:hover,
.hbm-context .hbm-header-search-host .hbm-header-search__submit:focus-visible {
	background: var(--hbm-brand-soft);
	color: var(--hbm-brand);
}

/* The lower desktop row is now categories only. This prevents the old search
 * field from cutting a white hole out of the HB-blue category strip. */
@media (min-width: 821px) {
	.hbm-context .whb-header-bottom,
	.hbm-context .whb-header-bottom .whb-header-bottom-inner {
		background: var(--hbm-brand) !important;
	}

	.hbm-context .whb-header-bottom .container {
		width: min(1320px, calc(100% - 40px)) !important;
		max-width: 1320px !important;
	}

	.hbm-context .hbm-header-bar {
		display: block;
		width: 100%;
		max-width: none;
		margin: 0;
	}

	.hbm-context .hbm-header-bar__nav {
		width: 100%;
	}

	.hbm-context .hbm-header-bar .hbm-magazine-nav__list {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: clamp(18px, 2vw, 32px);
		width: 100%;
		min-width: 0;
	}

	.hbm-context .hbm-header-bar .hbm-magazine-nav__item {
		flex: 0 0 auto;
	}

	.hbm-context .hbm-header-bar .hbm-magazine-nav__link {
		white-space: nowrap;
	}
}

/* Preview mode deliberately does not record views; do not fake Najčitanije by
 * repeating Najnovije. */
.hbm .hbm-home-panel__empty {
	margin: 0;
	padding: 24px 18px;
	color: var(--hbm-muted);
	font-size: 13px;
	line-height: 1.5;
}

/* Woodmart's legacy blog sidebar opener can survive even when the Magazine
 * template itself is full-width. It is not the Magazine hamburger and has no
 * useful action here, so hide it only in Magazine context. */
.hbm-context .wd-show-sidebar-btn,
.hbm-context .woodmart-show-sidebar-btn,
.hbm-context .wd-sidebar-opener,
.hbm-context .wd-open-sidebar,
.hbm-context .wd-open-filters,
.hbm-context .wd-btn-show-sidebar,
.hbm-context .wd-side-hidden-opener,
.hbm-context .wd-toolbar-sidebar {
	display: none !important;
}

@media (max-width: 820px) {
	.hbm-context .hbm-header-search-host {
		display: none !important;
	}

	.hbm-context .hbm-mobile-popover .hbm-header-search {
		position: relative;
		display: block;
		width: 100%;
	}

	.hbm-context .hbm-mobile-popover .hbm-header-search__label {
		display: block;
		width: 100%;
	}

	.hbm-context .hbm-mobile-popover .hbm-header-search__input {
		width: 100%;
		min-height: 42px;
		padding-right: 48px;
		border-radius: 22px;
	}

	.hbm-context .hbm-mobile-popover .hbm-header-search__submit {
		position: absolute;
		top: 4px;
		right: 5px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 34px;
		height: 34px;
		min-height: 0;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: transparent;
		color: #333;
	}
}

/* Use Woodmart's own header-navigation typography variables when present. */
.hbm-context .hbm-header-bar .hbm-magazine-nav__link {
	font-family: var(--wd-header-el-font, inherit) !important;
	font-size: var(--wd-header-el-font-size, inherit) !important;
	font-weight: var(--wd-header-el-font-weight, inherit) !important;
	font-style: var(--wd-header-el-font-style, inherit) !important;
	text-transform: var(--wd-header-el-transform, none) !important;
	letter-spacing: normal !important;
}

.hbm-context .hbm-header-action,
.hbm-context .hbm-header-search__input,
.hbm-context .hbm-header-search__submit,
.hbm-context .hbm-mobile-popover {
	font-family: inherit !important;
	letter-spacing: normal;
}

/* ========================================================================
 * dev.9 — live desktop header alignment + conservative product automation
 * ======================================================================== */

/* All Magazine category links occupy the complete Woodmart bottom-row height.
 * Reset inherited list/link spacing so every item shares one vertical baseline. */
@media (min-width: 821px) {
	.hbm-context .whb-header-bottom .hbm-header-bar,
	.hbm-context .whb-header-bottom .hbm-header-bar__nav,
	.hbm-context .whb-header-bottom .hbm-magazine-nav,
	.hbm-context .whb-header-bottom .hbm-magazine-nav__list {
		height: 100% !important;
	}

	.hbm-context .whb-header-bottom .hbm-magazine-nav__list {
		align-items: stretch !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.hbm-context .whb-header-bottom .hbm-magazine-nav__item {
		display: flex !important;
		align-items: stretch !important;
		height: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.hbm-context .whb-header-bottom .hbm-magazine-nav__link {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		height: 100% !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding-block: 0 !important;
		line-height: 1.2 !important;
		font-weight: 700 !important;
	}
}

/* Search icon is centered inside the form field instead of starting at 50%. */
.hbm-context .hbm-header-search-host .hbm-header-search__submit {
	top: 50% !important;
	right: 8px !important;
	margin: 0 !important;
	line-height: 1 !important;
	transform: translateY(-50%) !important;
}

@media (max-width: 820px) {
	.hbm-context .hbm-mobile-popover .hbm-header-search__submit {
		top: 50% !important;
		right: 5px !important;
		margin: 0 !important;
		line-height: 1 !important;
		transform: translateY(-50%) !important;
	}
}

/* ========================================================================
 * dev.10 — header hover/search precision + complementary product rail
 * ======================================================================== */

/* Keep Woodmart typography, but never inherit the shop theme's strike-through
 * hover decoration in the Magazine category strip. The Magazine underline is
 * rendered by the existing ::after indicator instead. */
.hbm-context .whb-header-bottom .hbm-magazine-nav__link,
.hbm-context .whb-header-bottom .hbm-magazine-nav__link:hover,
.hbm-context .whb-header-bottom .hbm-magazine-nav__link:focus,
.hbm-context .whb-header-bottom .hbm-magazine-nav__link:focus-visible,
.hbm-context .whb-header-bottom .hbm-magazine-nav__link.is-current {
	text-decoration: none !important;
	text-decoration-line: none !important;
	text-decoration-style: solid !important;
}

/* Lock the desktop search submit button to the physical right edge of the
 * rounded field. Woodmart button rules must not be able to recenter it. */
@media (min-width: 821px) {
	.hbm-context .hbm-header-search-host .hbm-header-search {
		position: relative !important;
	}

	.hbm-context .hbm-header-search-host .hbm-header-search__submit {
		position: absolute !important;
		top: 50% !important;
		right: 8px !important;
		left: auto !important;
		inset-inline-start: auto !important;
		inset-inline-end: 8px !important;
		width: 34px !important;
		min-width: 34px !important;
		max-width: 34px !important;
		height: 34px !important;
		min-height: 34px !important;
		max-height: 34px !important;
		margin: 0 !important;
		padding: 0 !important;
		transform: translateY(-50%) !important;
	}

	.hbm-context .hbm-header-search-host .hbm-header-search__submit svg {
		width: 20px !important;
		height: 20px !important;
		margin: 0 !important;
	}
}


/* ========================================================================
 * dev.11 — deterministic desktop search placement + true text underline
 * ======================================================================== */

/* Use the search form itself as the rounded field. A two-column grid keeps the
 * submit control physically at the far right regardless of Woodmart button CSS. */
@media (min-width: 821px) {
    .hbm-context .hbm-header-search-host .hbm-header-search {
        position: relative !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 48px !important;
        align-items: center !important;
        width: min(380px, 100%) !important;
        min-height: 46px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 1px solid #d9e1e4 !important;
        border-radius: 24px !important;
        background: #fff !important;
        box-shadow: none !important;
    }

    .hbm-context .hbm-header-search-host .hbm-header-search__label {
        display: block !important;
        min-width: 0 !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .hbm-context .hbm-header-search-host .hbm-header-search__input {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 8px 10px 8px 16px !important;
        border: 0 !important;
        border-radius: 0 !important;
        outline: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .hbm-context .hbm-header-search-host .hbm-header-search:focus-within {
        border-color: var(--hbm-brand) !important;
    }

    .hbm-context .hbm-header-search-host .hbm-header-search__submit {
        position: static !important;
        inset: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        justify-self: stretch !important;
        align-self: stretch !important;
        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
        height: auto !important;
        min-height: 44px !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: #333 !important;
        transform: none !important;
        box-shadow: none !important;
    }

    .hbm-context .hbm-header-search-host .hbm-header-search__submit svg {
        display: block !important;
        width: 20px !important;
        height: 20px !important;
        margin: 0 !important;
        transform: none !important;
    }
}

/* The previous animated pseudo-element could cross the text when Woodmart's
 * wrapper height resolved differently on the live header. Remove it entirely
 * and use a native text underline with a fixed offset. */
.hbm-context .whb-header-bottom .hbm-magazine-nav__link::after {
    content: none !important;
    display: none !important;
}

.hbm-context .whb-header-bottom .hbm-magazine-nav__link,
.hbm-context .whb-header-bottom .hbm-magazine-nav__link:visited {
    text-decoration: none !important;
    text-decoration-line: none !important;
}

.hbm-context .whb-header-bottom .hbm-magazine-nav__link:hover,
.hbm-context .whb-header-bottom .hbm-magazine-nav__link:focus-visible,
.hbm-context .whb-header-bottom .hbm-magazine-nav__link.is-current {
    text-decoration-line: underline !important;
    text-decoration-style: solid !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 6px !important;
    text-decoration-color: #fff !important;
}


/* Google Preferred Sources — wrapper spacing only. The official Google button
 * keeps its own styling and localization. */
.hbm .hbm-preferred-source {
	margin-top: 18px;
}


/* ---------- Dev.16 single-article editorial alignment ---------- */
.hbm .hbm-article__header {
	max-width: 1240px;
	margin: 12px auto 28px;
	text-align: left;
}

.hbm .hbm-article__title {
	max-width: 980px;
	margin-inline: 0;
	font-size: clamp(34px, 3vw, 44px);
	line-height: 1.08;
	letter-spacing: -.02em;
}

.hbm .hbm-article__lead {
	max-width: 900px;
	margin: 14px 0 0;
	font-size: clamp(17px, 1.25vw, 19px);
	line-height: 1.52;
}

.hbm .hbm-article__meta {
	justify-content: flex-start;
	margin-top: 14px;
}

/* Google Preferred Sources custom trigger using Google's official advanced
 * JavaScript flow. This sits after the article body, similar to a social CTA. */
.hbm .hbm-preferred-source--after-article {
	width: 100%;
	max-width: 800px;
	margin: 30px auto 34px;
}

.hbm .hbm-preferred-source__button {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr) 24px;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 58px;
	padding: 12px 16px;
	border: 1px solid #dfe3e8;
	border-radius: 8px;
	background: #fff;
	color: #1f2937;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	text-align: left;
	cursor: pointer;
}

.hbm .hbm-preferred-source__button:hover,
.hbm .hbm-preferred-source__button:focus-visible {
	border-color: #c9d0d8;
	background: #fbfcfd;
}

.hbm .hbm-preferred-source__google {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	color: #4285f4;
	font-family: Arial, sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
}

.hbm .hbm-preferred-source__arrow {
	justify-self: end;
	color: #8a94a3;
	font-size: 28px;
	font-weight: 300;
	line-height: 1;
}

@media (max-width: 640px) {
	.hbm .hbm-article__header {
		margin: 2px auto 22px;
	}

	.hbm .hbm-article__title {
		font-size: clamp(28px, 8vw, 32px);
	}

	.hbm .hbm-article__lead {
		margin-top: 12px;
		font-size: 17px;
	}

	.hbm .hbm-preferred-source--after-article {
		margin: 24px auto 30px;
	}

	.hbm .hbm-preferred-source__button {
		grid-template-columns: 22px minmax(0, 1fr) 20px;
		gap: 10px;
		min-height: 56px;
		padding: 11px 13px;
		font-size: 14px;
	}
}

/* RC.3: let the single-article heading use the full editorial width above the product rail. */
.hbm .hbm-article__header {
	width: 100%;
	max-width: 1240px;
	margin-inline: auto;
}

.hbm .hbm-article__title {
	width: 100%;
	max-width: none;
}


/* ========================================================================
 * RC.4 — live alignment + article lead width + Preferred Sources reliability
 * ======================================================================== */

/* The Woodmart bottom row is full-bleed, but Magazine navigation should align
 * with the same centered content inset as the logo/general header. Keep the
 * turquoise strip full width while constraining only its inner navigation. */
@media (min-width: 821px) {
    .hbm-context .whb-header-bottom .hbm-header-bar__nav {
        width: min(1320px, calc(100vw - 60px)) !important;
        max-width: 1320px !important;
        margin-inline: auto !important;
        padding-inline: 0 !important;
    }
}

/* Single article header, title and lead share one editorial width. The body
 * remains narrower for comfortable reading, while the intro no longer wraps
 * earlier than the headline. */
.hbm .hbm__inner--article {
    width: min(1240px, calc(100% - 48px));
}

.hbm .hbm-article__header,
.hbm .hbm-article__lead {
    width: 100%;
    max-width: none;
}

@media (max-width: 640px) {
    .hbm .hbm__inner--article {
        width: min(100% - 28px, 1240px);
    }
}