/**
 * Blog: posts page, post archives, blog search and single posts.
 * Loaded only on those pages (inc/assets.php → vapeera_is_blog_context()). Tokens, buttons, chips,
 * the dark .vc-banner and pagination come from main.css.
 *
 * Contents
 *  1. Toolbar (category chips + search)
 *  2. Card grid and article cards
 *  3. Featured article
 *  4. Single article: hero, image, layout + sidebar, table of contents, content
 *  5. Article footer: share, products, call to action, previous/next
 *  6. Related guides and empty state
 */

/* 1. Toolbar
   ========================================================================== */
.vc-blog-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--vc-space-4);
	margin-bottom: var(--vc-space-6);
}

.vc-blog-cats .vc-chip-list {
	margin: 0;
}

.vc-chip.is-current {
	border-color: var(--vc-primary-deep);
	background: var(--vc-primary-deep);
	color: #fff;
}

.vc-blog-search {
	display: flex;
	flex: 1 1 260px;
	max-width: 380px;
	border: 1px solid var(--wc-form-border-color);
	border-radius: var(--vc-radius-pill);
	background: var(--vc-surface);
	overflow: hidden;
}

.vc-blog-search:focus-within {
	outline: 3px solid var(--vc-primary);
	outline-offset: 2px;
}

/* Scoped with the input type so it beats main.css's input[type="search"] / input:focus rules;
   the pill wrapper draws the border and the focus ring. */
.vc-blog-search input.vc-blog-search__input[type="search"] {
	flex: 1;
	min-width: 0;
	min-height: 44px;
	padding: 0.55rem 1rem;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--vc-ink);
	font: inherit;
}

.vc-blog-search input.vc-blog-search__input[type="search"]:focus {
	border: 0;
	outline: none;
	box-shadow: none;
}

.vc-blog-search button.vc-blog-search__submit {
	display: inline-flex;
	flex: 0 0 48px;
	align-items: center;
	justify-content: center;
	width: 48px;
	min-height: 44px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--vc-primary-deep);
	color: #fff;
	cursor: pointer;
}

.vc-blog-search button.vc-blog-search__submit:hover {
	background: var(--vc-primary-ink);
}

@media (max-width: 639px) {
	.vc-blog-search {
		max-width: none;
	}
}

/* 2. Card grid and cards
   ========================================================================== */
.vc-post-grid--blog {
	grid-template-columns: 1fr;
	gap: var(--vc-space-5);
}

@media (min-width: 640px) {
	.vc-post-grid--blog {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.vc-post-grid--blog {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.vc-post-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	border: 1px solid var(--vc-line);
	border-radius: var(--vc-radius);
	background: var(--vc-surface);
	overflow: hidden;
	transition: box-shadow 0.2s var(--vc-ease), transform 0.2s var(--vc-ease);
}

.vc-post-card:hover {
	box-shadow: var(--vc-shadow);
	transform: translateY(-2px);
}

.vc-post-card__media {
	display: block;
	background: var(--vc-dark);
}

/* Fixed ratio reserves the space before the image loads (no layout shift). The store's banner
   images have text on the left and products on the right, so the crop keeps the right side. */
.vc-post-card__img,
.vc-post-featured__media img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: 100% 50%;
}

.vc-post-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--vc-space-2);
	padding: var(--vc-space-5);
}

.vc-post-card__cat {
	align-self: flex-start;
	padding-block: 3px; /* 24px+ tap target (WCAG 2.5.8). */
	color: var(--vc-primary-deep);
	font-family: var(--vc-font-heading);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-decoration: none;
	text-transform: uppercase;
}

.vc-post-card__cat:hover {
	text-decoration: underline;
}

.vc-post-card__title {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.25;
}

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

.vc-post-card__title a:hover {
	color: var(--vc-primary-ink);
	text-decoration: underline;
}

.vc-post-card__excerpt {
	color: var(--vc-muted);
	font-size: 0.95rem;
}

.vc-post-card__excerpt p {
	margin: 0;
}

.vc-post-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vc-space-2);
	margin: auto 0 0;
	padding-top: var(--vc-space-2);
	color: var(--vc-muted);
	font-size: var(--vc-text-sm);
}

.vc-post-card__more {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: var(--vc-space-2);
	min-height: 32px;
	color: var(--vc-primary-ink);
	font-weight: 700;
	text-decoration: none;
}

.vc-post-card__more:hover {
	text-decoration: underline;
}

/* 3. Featured article (posts page, page 1)
   ========================================================================== */
.vc-post-featured {
	display: grid;
	margin-bottom: var(--vc-space-6);
	border: 1px solid var(--vc-line);
	border-radius: var(--vc-radius-lg);
	background: var(--vc-surface);
	overflow: hidden;
}

@media (min-width: 900px) {
	.vc-post-featured:not(.vc-post-featured--no-media) {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
		align-items: center;
	}

	.vc-post-featured__media,
	.vc-post-featured__media img {
		height: 100%;
	}

	.vc-post-featured__media img {
		aspect-ratio: auto;
		min-height: 340px;
	}
}

.vc-post-featured__media {
	display: block;
	background: var(--vc-dark);
}

.vc-post-featured__body {
	display: flex;
	flex-direction: column;
	gap: var(--vc-space-3);
	padding: clamp(1.25rem, 3vw, 2.5rem);
}

.vc-post-featured__label {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vc-space-3);
	margin: 0;
}

.vc-post-featured__label > span {
	padding: 0.2rem 0.65rem;
	border-radius: var(--vc-radius-pill);
	background: var(--vc-primary-tint);
	color: var(--vc-primary-ink);
	font-size: 0.75rem;
	font-weight: 700;
}

.vc-post-featured__title {
	margin: 0;
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
}

.vc-post-featured__title a {
	color: inherit;
	text-decoration: none;
}

.vc-post-featured__title a:hover {
	text-decoration: underline;
}

.vc-post-featured__excerpt {
	color: var(--vc-ink-soft);
	font-size: var(--vc-text-lg);
}

.vc-post-featured__excerpt p {
	margin: 0;
}

.vc-post-featured .vc-post-card__meta {
	margin: 0;
	padding: 0;
}

.vc-post-featured .vc-button {
	align-self: flex-start;
	margin-top: var(--vc-space-2);
}

/* 4. Single article
   Hero (dark brand surface) → featured image overlapping its foot → layout: white article card
   + sticky sidebar (≥1100px). Below 1100px the sidebar is hidden and the inline contents box and
   footer share links show instead, so each appears once per breakpoint.
   ========================================================================== */
.vc-article {
	--vc-article-max: 1140px;
	--vc-aside-top: 150px; /* Clears the sticky header + nav. */
}

/* Hero */
.vc-article__hero {
	position: relative;
	max-width: var(--vc-article-max);
	margin: 0 auto;
	padding: clamp(1.75rem, 5vw, 3.5rem) clamp(1.25rem, 5vw, 4rem);
	overflow: hidden;
	border-radius: var(--vc-radius-lg);
	background: var(--vc-hero-bg);
	color: var(--vc-dark-ink);
}

.vc-article--has-media .vc-article__hero {
	padding-bottom: clamp(4.5rem, 10vw, 8rem);
}

.vc-article__hero-inner {
	position: relative;
	z-index: 1;
	max-width: 820px;
}

.vc-article__cat {
	margin: 0 0 var(--vc-space-4);
}

.vc-article__cat a {
	display: inline-block;
	padding: 0.35rem 0.85rem;
	border: 1px solid rgb(124 199 209 / 45%);
	border-radius: var(--vc-radius-pill);
	background: rgb(58 162 177 / 14%);
	color: var(--vc-primary-soft);
	font-family: var(--vc-font-heading);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-decoration: none;
	text-transform: uppercase;
}

.vc-article__cat a:hover {
	border-color: var(--vc-primary-soft);
	color: #fff;
}

.vc-article__title {
	margin: 0 0 var(--vc-space-4);
	color: #fff;
	font-size: clamp(1.9rem, 1.2rem + 2.8vw, 3.25rem);
	line-height: 1.08;
	letter-spacing: -0.035em;
}

.vc-article__lead {
	max-width: 62ch;
	margin: 0 0 var(--vc-space-5);
	color: var(--vc-dark-ink);
	font-size: clamp(1.05rem, 1rem + 0.35vw, 1.2rem);
	line-height: 1.6;
}

.vc-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vc-space-3) var(--vc-space-5);
	margin: 0;
	padding: 0;
	color: var(--vc-dark-ink);
	font-size: var(--vc-text-sm);
	list-style: none;
}

.vc-article__meta li {
	display: inline-flex;
	align-items: center;
	gap: var(--vc-space-2);
}

.vc-article__meta .vc-icon {
	color: var(--vc-primary-soft);
}

.vc-article__meta strong {
	color: #fff;
}

.vc-article__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	overflow: hidden;
	border-radius: 50%;
	background: #fff;
	color: var(--vc-dark);
	font-weight: 800;
}

.vc-article__avatar img {
	width: 28px;
	height: 28px;
}

/* Featured image, overlapping the hero's foot */
.vc-article__media {
	position: relative;
	z-index: 1;
	max-width: calc(var(--vc-article-max) - 2 * clamp(1rem, 4vw, 3rem));
	margin: calc(-1 * clamp(3.25rem, 8vw, 6.5rem)) auto var(--vc-space-6);
}

.vc-article__media img {
	width: 100%;
	border: 4px solid var(--vc-surface);
	border-radius: var(--vc-radius-lg);
	background: var(--vc-dark);
	box-shadow: var(--vc-shadow-lg);
}

.vc-article__media figcaption {
	margin-top: var(--vc-space-2);
	text-align: center;
}

/* Layout */
.vc-article__layout {
	max-width: var(--vc-article-max);
	margin: 0 auto;
}

.vc-article:not(.vc-article--has-media) .vc-article__layout {
	margin-top: var(--vc-space-6);
}

.vc-article__main {
	min-width: 0;
	max-width: 860px;
	margin-inline: auto;
}

.vc-article__aside {
	display: none;
}

@media (min-width: 1100px) {
	.vc-article__layout--side {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 290px;
		gap: var(--vc-space-6);
		align-items: start;
	}

	.vc-article__layout--side .vc-article__main {
		max-width: none;
		margin: 0;
	}

	.vc-article__layout--side .vc-article__aside {
		display: block;
		height: 100%;
	}

	.vc-article__layout--side .vc-toc--inline,
	.vc-article__layout--side .vc-article__footer .vc-share,
	.vc-article__layout--side .vc-article__footer--share-only {
		display: none;
	}
}

.vc-article__sticky {
	position: sticky;
	top: var(--vc-aside-top);
	max-height: calc(100vh - var(--vc-aside-top) - 1rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	display: flex;
	flex-direction: column;
	gap: var(--vc-space-4);
}

/* The white article card (--vc-card-pad is reused by full-width blocks inside it) */
.vc-article__card {
	--vc-card-pad: clamp(1.25rem, 4.5vw, 3.25rem);
	padding: var(--vc-card-pad);
	border: 1px solid var(--vc-line);
	border-radius: var(--vc-radius-lg);
	background: var(--vc-surface);
	box-shadow: var(--vc-shadow);
}

@media (max-width: 639px) {
	.vc-article__card {
		--vc-card-pad: var(--vc-gutter);
		margin-inline: calc(-1 * var(--vc-gutter));
		padding-inline: var(--vc-gutter);
		border-inline: 0;
		border-radius: 0;
		box-shadow: none;
	}
}

/* Table of contents: inline (closed <details>) */
.vc-toc--inline {
	margin-bottom: var(--vc-space-5);
	border: 1px solid var(--vc-line);
	border-radius: var(--vc-radius);
	background: var(--vc-surface-alt);
}

.vc-toc__summary {
	display: flex;
	align-items: center;
	gap: var(--vc-space-3);
	min-height: 52px;
	padding: var(--vc-space-3) var(--vc-space-4);
	cursor: pointer;
	list-style: none;
}

.vc-toc__summary::-webkit-details-marker {
	display: none;
}

.vc-toc__summary .vc-icon {
	margin-left: auto;
	color: var(--vc-primary-deep);
	transition: transform 0.2s var(--vc-ease);
}

.vc-toc--inline[open] .vc-toc__summary .vc-icon {
	transform: rotate(180deg);
}

.vc-toc__title {
	margin: 0;
	color: var(--vc-ink);
	font-family: var(--vc-font-heading);
	font-weight: 800;
}

.vc-toc__count {
	color: var(--vc-muted);
	font-size: var(--vc-text-sm);
}

.vc-toc--inline nav {
	padding: 0 var(--vc-space-4) var(--vc-space-4);
}

.vc-toc__list,
.vc-toc__sub {
	margin: 0;
	padding-left: 1.25rem;
}

.vc-toc__sub {
	margin-top: var(--vc-space-1);
	list-style: lower-alpha;
}

.vc-toc li {
	margin-bottom: var(--vc-space-2);
	color: var(--vc-muted);
}

.vc-toc a {
	color: var(--vc-ink-soft);
	text-decoration: none;
}

.vc-toc a:hover {
	color: var(--vc-primary-ink);
	text-decoration: underline;
}

/* Table of contents: sidebar */
.vc-toc--side,
.vc-article__aside .vc-share,
.vc-aside-shop {
	padding: var(--vc-space-5);
	border: 1px solid var(--vc-line);
	border-radius: var(--vc-radius);
	background: var(--vc-surface);
}

.vc-toc--side .vc-toc__title,
.vc-article__aside .vc-share__title,
.vc-aside-shop__title {
	margin: 0 0 var(--vc-space-3);
	color: var(--vc-primary-deep);
	font-family: var(--vc-font-heading);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.vc-toc--side .vc-toc__list {
	padding: 0;
	list-style: none;
	counter-reset: vc-toc;
}

.vc-toc--side li {
	display: flex;
	gap: var(--vc-space-3);
	margin: 0;
	padding: var(--vc-space-2) 0;
	border-top: 1px solid var(--vc-line);
	counter-increment: vc-toc;
	font-size: 0.9rem;
	line-height: 1.4;
}

.vc-toc--side li:first-child {
	border-top: 0;
	padding-top: 0;
}

.vc-toc--side li::before {
	content: counter(vc-toc, decimal-leading-zero);
	flex: 0 0 auto;
	color: var(--vc-primary-deep);
	font-family: var(--vc-font-heading);
	font-weight: 800;
}

.vc-article__aside .vc-share {
	display: block;
}

.vc-aside-shop {
	border: 0;
	background: var(--vc-hero-bg);
	color: var(--vc-dark-ink);
}

.vc-aside-shop .vc-aside-shop__title {
	color: var(--vc-primary-soft);
}

.vc-aside-shop .vc-button {
	width: 100%;
	background: #fff;
	color: var(--vc-dark);
}

.vc-aside-shop .vc-button:hover {
	background: var(--vc-primary-tint);
	color: var(--vc-dark);
}

.vc-aside-shop__note {
	margin: var(--vc-space-3) 0 0;
	font-size: 0.8rem;
}

/* Content typography */
.vc-article__content {
	max-width: none;
	color: var(--vc-ink);
	font-size: 1.0625rem;
	line-height: 1.8;
}

.vc-article__content > p:first-child {
	color: var(--vc-ink-soft);
	font-size: 1.15rem;
	line-height: 1.7;
}

.vc-article__content h2,
.vc-article__content h3 {
	scroll-margin-top: var(--vc-aside-top, 120px);
}

.vc-article__content h2 {
	margin: var(--vc-space-7) 0 var(--vc-space-4);
	padding-top: var(--vc-space-6);
	border-top: 1px solid var(--vc-line);
	font-size: clamp(1.45rem, 1.2rem + 0.9vw, 1.9rem);
}

.vc-article__content > h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.vc-article__content h3 {
	margin: var(--vc-space-6) 0 var(--vc-space-3);
	color: var(--vc-primary-ink);
	font-size: 1.25rem;
}

.vc-article__content > * + h2 {
	margin-top: var(--vc-space-7);
}

.vc-article__content a {
	color: var(--vc-primary-ink);
	font-weight: 500;
	text-decoration-color: var(--vc-primary-soft);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

.vc-article__content a:hover {
	text-decoration-color: var(--vc-primary-deep);
}

.vc-article__content strong {
	color: var(--vc-ink);
}

/* Lists: teal dots; numbered steps in tinted circles. Only List blocks and plain lists, so block
   lists with their own styling (products grid, social links, latest posts…) are left alone. */
.vc-article__content :is(ul, ol):is(.wp-block-list, :not([class])) {
	margin: 0 0 var(--vc-space-5);
	padding: 0;
	list-style: none;
}

.vc-article__content :is(ul, ol):is(.wp-block-list, :not([class])) > li {
	position: relative;
	padding-left: 1.75rem;
}

.vc-article__content :is(ul, ol):is(.wp-block-list, :not([class])) > li + li {
	margin-top: var(--vc-space-3);
}

.vc-article__content :is(ul, ol):is(.wp-block-list, :not([class])) :is(ul, ol) {
	margin: var(--vc-space-2) 0 0;
}

.vc-article__content ul:is(.wp-block-list, :not([class])) > li::before {
	content: "";
	position: absolute;
	top: 0.72em;
	left: 0.35rem;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--vc-primary);
}

.vc-article__content ol:is(.wp-block-list, :not([class])) {
	counter-reset: vc-step;
}

.vc-article__content ol:is(.wp-block-list, :not([class])) > li {
	padding-left: 2.75rem;
	counter-increment: vc-step;
}

.vc-article__content ol:is(.wp-block-list, :not([class])) > li::before {
	content: counter(vc-step);
	position: absolute;
	top: 0.1em;
	left: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.9rem;
	height: 1.9rem;
	border-radius: 50%;
	background: var(--vc-primary-tint);
	color: var(--vc-primary-ink);
	font-family: var(--vc-font-heading);
	font-size: 0.9rem;
	font-weight: 800;
	line-height: 1;
}

.vc-article__content img {
	border-radius: var(--vc-radius-sm);
}

.vc-article__content blockquote {
	margin: var(--vc-space-5) 0;
	padding: var(--vc-space-4) var(--vc-space-5);
	border-left: 4px solid var(--vc-primary);
	border-radius: 0 var(--vc-radius-sm) var(--vc-radius-sm) 0;
	background: var(--vc-primary-tint);
	color: var(--vc-ink-soft);
}

/* Tables: dark header, zebra rows; wide tables scroll inside their figure on phones. */
.vc-article__content .wp-block-table {
	margin: var(--vc-space-5) 0 var(--vc-space-6);
	overflow-x: auto;
	border: 1px solid var(--vc-line);
	border-radius: var(--vc-radius-sm);
}

.vc-article__content .wp-block-table table {
	min-width: 560px;
}

/* Tables pasted without the Table block have no scrolling wrapper: the table scrolls itself. */
.vc-article__content > table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

.vc-article__content table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: 0.95rem;
	line-height: 1.5;
}

.vc-article__content thead {
	border: 0;
}

.vc-article__content th,
.vc-article__content td {
	padding: 0.75rem 1rem;
	border: 0;
	border-bottom: 1px solid var(--vc-line);
	text-align: left;
	vertical-align: top;
}

.vc-article__content th {
	background: var(--vc-primary-deep);
	color: #fff;
	font-family: var(--vc-font-heading);
	font-weight: 700;
}

.vc-article__content td {
	background: var(--vc-surface);
}

.vc-article__content tbody tr:nth-child(even) td {
	background: var(--vc-surface-alt);
}

.vc-article__content tbody tr:last-child td {
	border-bottom: 0;
}

.vc-article__content td:first-child {
	color: var(--vc-ink);
	font-weight: 600;
}

/* Blocks inside the card. Wide = the text column; full = the card's edges (main.css sizes
   them to the viewport, which would cover the sidebar and scroll sideways on phones). */
.vc-article__content .alignwide,
.vc-article__content .alignfull {
	width: auto;
	max-width: none;
}

.vc-article__content .alignwide {
	margin-inline: 0;
}

.vc-article__content .alignfull {
	margin-inline: calc(-1 * var(--vc-card-pad, 0px));
}

.vc-article__content .alignfull img {
	width: 100%;
	border-radius: 0;
}

.vc-article__content figure {
	margin: var(--vc-space-5) 0;
}

.vc-article__content .wp-block-image img {
	height: auto;
}

.vc-article__content .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.65rem 1.4rem;
	border-radius: var(--vc-radius-pill);
	font-weight: 700;
	text-decoration: none;
}

.vc-article__content .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background) {
	background: var(--vc-primary-deep);
}

.vc-article__content .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-text-color) {
	color: #fff;
}

.vc-article__content .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):hover {
	background: var(--vc-primary-ink);
}

.vc-article__content .is-style-outline .wp-block-button__link:not(.has-text-color) {
	border: 2px solid currentColor;
	color: var(--vc-primary-deep);
}

.vc-article__content pre {
	margin: 0 0 var(--vc-space-5);
	padding: var(--vc-space-4) var(--vc-space-5);
	overflow-x: auto;
	border-radius: var(--vc-radius-sm);
	background: var(--vc-dark);
	color: #e3f2f5;
	font-size: 0.9rem;
	line-height: 1.6;
}

.vc-article__content :not(pre) > code {
	padding: 0.1em 0.4em;
	border-radius: 4px;
	background: var(--vc-primary-tint);
	color: var(--vc-primary-ink);
	font-size: 0.9em;
}

.vc-article__content hr,
.vc-article__content .wp-block-separator:not(.has-background) {
	margin: var(--vc-space-6) 0;
	border: 0;
	border-top: 1px solid var(--vc-line);
	opacity: 1;
}

.vc-article__content .wp-block-details {
	margin: 0 0 var(--vc-space-4);
	padding: var(--vc-space-3) var(--vc-space-4);
	border: 1px solid var(--vc-line);
	border-radius: var(--vc-radius-sm);
	background: var(--vc-surface-alt);
}

.vc-article__content .wp-block-details summary {
	min-height: 28px;
	color: var(--vc-ink);
	font-weight: 700;
	cursor: pointer;
}

.vc-article__content .wp-block-details[open] summary {
	margin-bottom: var(--vc-space-2);
}

/* A separator already divides sections: no second rule above the heading after it. */
.vc-article__content :is(hr, .wp-block-separator) + h2 {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.vc-article__content .wp-block-buttons {
	margin-bottom: var(--vc-space-5);
}

/* Comment and password forms: theme buttons and fields. */
.vc-article .comment-form input[type="submit"],
.vc-article .post-password-form input[type="submit"] {
	min-height: 44px;
	padding: 0.65rem 1.4rem;
	border: 0;
	border-radius: var(--vc-radius-pill);
	background: var(--vc-primary-deep);
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.vc-article .comment-form input[type="submit"]:hover,
.vc-article .post-password-form input[type="submit"]:hover {
	background: var(--vc-primary-ink);
}

.vc-article .post-password-form p:last-child {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--vc-space-3);
}

.vc-article .post-password-form label {
	flex: 1 1 240px;
}

.vc-article .vc-comments {
	margin-top: var(--vc-space-6);
	padding: var(--vc-card-pad, 2rem);
	border: 1px solid var(--vc-line);
	border-radius: var(--vc-radius-lg);
	background: var(--vc-surface);
}

/* 5. Article footer, products, call to action, previous/next
   ========================================================================== */
.vc-article__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--vc-space-4);
	margin-top: var(--vc-space-6);
	padding-top: var(--vc-space-5);
	border-top: 1px solid var(--vc-line);
}

.vc-article__tags {
	margin: 0;
}

.vc-article__tags a {
	display: inline-block;
	padding: 0.4rem 0.9rem;
	border: 1px solid var(--vc-line);
	border-radius: var(--vc-radius-pill);
	background: var(--vc-surface);
	font-size: var(--vc-text-sm);
	text-decoration: none;
}

.vc-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vc-space-3);
}

.vc-share__title {
	margin: 0;
	font-weight: 700;
}

.vc-share__list {
	display: flex;
	gap: var(--vc-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vc-share__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--vc-line);
	border-radius: 50%;
	background: var(--vc-surface);
	color: var(--vc-primary-ink);
}

.vc-share__link:hover {
	border-color: var(--vc-primary-deep);
	background: var(--vc-primary-deep);
	color: #fff;
}

/* Products in this guide */
.vc-guide-products {
	margin-top: var(--vc-space-6);
}

.vc-guide-products__title {
	margin-bottom: var(--vc-space-4);
	font-size: var(--vc-h3);
}

.vc-guide-products__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--vc-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.vc-guide-products__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--vc-space-4);
	}
}

.vc-guide-product {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--vc-line);
	border-radius: var(--vc-radius);
	background: var(--vc-surface);
	overflow: hidden;
	transition: box-shadow 0.2s var(--vc-ease), border-color 0.2s var(--vc-ease);
}

.vc-guide-product:hover {
	border-color: var(--vc-primary-soft);
	box-shadow: var(--vc-shadow);
}

.vc-guide-product__media img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
	padding: var(--vc-space-3);
}

.vc-guide-product__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--vc-space-2);
	padding: 0 var(--vc-space-4) var(--vc-space-4);
}

.vc-guide-product__name {
	display: -webkit-box;
	overflow: hidden;
	color: var(--vc-ink);
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

.vc-guide-product__name:hover {
	color: var(--vc-primary-ink);
	text-decoration: underline;
}

.vc-guide-product__price {
	margin-top: auto;
	font-weight: 700;
}

.vc-guide-product__price del {
	color: var(--vc-muted);
	font-weight: 400;
}

.vc-guide-product__price ins {
	text-decoration: none;
}

.vc-guide-product__stock {
	color: var(--vc-danger);
	font-size: var(--vc-text-sm);
}

/* Call to action */
.vc-blog-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--vc-space-5);
	margin-top: var(--vc-space-6);
	padding: clamp(1.25rem, 3vw, 2rem);
	border-radius: var(--vc-radius-lg);
	background: var(--vc-hero-bg);
	color: var(--vc-dark-ink);
}

.vc-blog-cta .vc-eyebrow {
	color: var(--vc-primary-soft);
}

.vc-blog-cta__title {
	margin: 0 0 var(--vc-space-2);
	color: #fff;
	font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
}

.vc-blog-cta__note {
	margin: 0;
	font-size: var(--vc-text-sm);
}

.vc-blog-cta__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vc-space-4);
}

.vc-blog-cta .vc-button {
	background: #fff;
	color: var(--vc-dark);
}

.vc-blog-cta .vc-button:hover {
	background: var(--vc-primary-tint);
	color: var(--vc-dark);
}

.vc-blog-cta .vc-link-arrow {
	color: #fff;
}

/* Previous / next */
.vc-post-nav {
	margin-top: var(--vc-space-6);
}

.vc-post-nav .nav-links {
	display: grid;
	gap: var(--vc-space-4);
}

@media (min-width: 640px) {
	.vc-post-nav .nav-links {
		grid-template-columns: 1fr 1fr;
	}

	.vc-post-nav .nav-next {
		grid-column: 2;
		text-align: right;
	}
}

.vc-post-nav a {
	display: flex;
	flex-direction: column;
	gap: var(--vc-space-1);
	height: 100%;
	padding: var(--vc-space-4) var(--vc-space-5);
	border: 1px solid var(--vc-line);
	border-radius: var(--vc-radius);
	background: var(--vc-surface);
	text-decoration: none;
	transition: border-color 0.2s var(--vc-ease), box-shadow 0.2s var(--vc-ease);
}

.vc-post-nav a:hover {
	border-color: var(--vc-primary);
	box-shadow: var(--vc-shadow);
}

.vc-post-nav__label {
	color: var(--vc-primary-deep);
	font-family: var(--vc-font-heading);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.vc-post-nav .nav-previous .vc-post-nav__label::before {
	content: "← ";
}

.vc-post-nav .nav-next .vc-post-nav__label::after {
	content: " →";
}

.vc-post-nav__title {
	color: var(--vc-ink);
	font-weight: 700;
	line-height: 1.35;
}

/* Phones: the current page is already the H1, so the trail stops at its category. */
@media (max-width: 639px) {
	.vc-blog--single .vc-breadcrumbs li:last-child {
		display: none;
	}

	.vc-blog--single .vc-breadcrumbs li:nth-last-child(2)::after {
		content: none;
	}
}

/* 6. Related guides and empty state
   ========================================================================== */
.vc-blog-related {
	margin-top: var(--vc-space-7);
	padding-bottom: 0;
	border-top: 1px solid var(--vc-line);
}

/* Phones: related guides as compact rows (thumbnail, category, title, date). */
@media (max-width: 639px) {
	.vc-blog-related .vc-post-card {
		flex-direction: row;
		align-items: stretch;
	}

	.vc-blog-related .vc-post-card__media {
		position: relative;
		flex: 0 0 112px;
		min-height: 112px;
	}

	.vc-blog-related .vc-post-card__img {
		position: absolute;
		inset: 0;
		height: 100%;
		aspect-ratio: auto;
	}

	.vc-blog-related .vc-post-card__body {
		gap: var(--vc-space-1);
		padding: var(--vc-space-3) var(--vc-space-4);
	}

	.vc-blog-related .vc-post-card__title {
		font-size: 1rem;
	}

	.vc-blog-related .vc-post-card__excerpt,
	.vc-blog-related .vc-post-card__more,
	.vc-blog-related .vc-post-card__dot,
	.vc-blog-related .vc-post-card__read {
		display: none;
	}

	.vc-blog-related .vc-post-card__meta {
		padding-top: 0;
	}
}

.vc-blog-empty {
	padding-top: var(--vc-space-5);
}

.vc-blog-empty .vc-chip-list {
	justify-content: center;
}

.vc-blog-empty__shop {
	margin-top: var(--vc-space-4);
	color: var(--vc-muted);
}

@media (prefers-reduced-motion: reduce) {
	.vc-toc__summary .vc-icon,
	.vc-guide-product,
	.vc-post-nav a,
	.vc-post-card,
	.vc-post-card:hover {
		transition: none;
		transform: none;
	}
}