/*
  htr-blog 0.1 — module styles (21 Oct 2026): disclosure line, top block, buttons, next-step box, workplace line,
  video facade, share strip, Stay box, focus rings, reduced motion, print. Always loaded on posts htr-blog renders
  (the "Article stylesheet" switch governs only htr-blog.css). Every rule starts with body.htrb; tokens only
  (htrb-tokens = ht-tokens.css v2.1.0). Rules of the house and the weights: see the header of htr-blog.css.
*/

/* ── 0. One share row ─────────────────────────────────────────────────────────────────────────────────────────── */

/* When htr-blog's share strip is on the page, the theme's own coloured share icons under the tags and an Elementor
   share-buttons widget inside the post would be second and third share rows: hidden. Only when the strip really
   rendered (:has), so a post whose transform did not run keeps the theme's icons. */
body.htrb.htrb-share:has([data-htrb="share"]) .single-post-wrapper .entry-footer .footer-socials,
body.htrb.htrb-share:has([data-htrb="share"]) .single-post-wrapper > .entry-content .elementor-widget-share-buttons {
	display: none;
}

/* ── 4. Modules (design §5) ──────────────────────────────────────────────────────────────────────────────────── */

/* A module the transform places directly in an Elementor column (.elementor-widget-wrap is a wrapping flex row) takes
   the full width, as Elementor's own widgets do (e.g. the disclosure that replaces widget b6d1a7e on post 52105). */
body.htrb .elementor-widget-wrap > [data-htrb] {
	width: 100%;
	flex: 0 0 100%;
}

/* Every module defends itself against what it can inherit from the theme or an Elementor widget around it. */
body.htrb .htrb-disclosure,
body.htrb .htrb-top,
body.htrb .htrb-box,
body.htrb .htrb-work,
body.htrb .htrb-video,
body.htrb .htrb-sharebar,
body.htrb .htrb-stay {
	box-sizing: border-box;
	font-family: var(--ht-font-body);
	font-style: normal;
	font-weight: 400;
	letter-spacing: normal;
	word-spacing: normal;
	text-align: left;
	text-indent: 0;
	text-transform: none;
	text-shadow: none;
	white-space: normal;
	color: var(--ht-ink);
}

/* Text links inside modules (the button and Google links have their own rules). */
body.htrb .htrb-disclosure a,
body.htrb .htrb-box a:not(.htrb-btn),
body.htrb .htrb-work a:not(.htrb-btn),
body.htrb .htrb-stay__text a,
body.htrb .htrb-stay__small a {
	color: var(--ht-green-dark);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .15em;
	box-shadow: none;
	transition: color var(--duration-fast) var(--ease-default);
}

body.htrb .htrb-disclosure a:hover,
body.htrb .htrb-box a:not(.htrb-btn):hover,
body.htrb .htrb-work a:not(.htrb-btn):hover,
body.htrb .htrb-stay__text a:hover,
body.htrb .htrb-stay__small a:hover {
	color: var(--ht-ink);
}

/* Icons: 16 px line icons in the text colour. */
body.htrb .htrb-ico,
body.htrb .htrb-btn svg,
body.htrb .htrb-prefsrc svg {
	display: block;
	flex: none;
	width: var(--space-4);
	height: var(--space-4);
}

body.htrb .htrb-ico {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Buttons (Button spec; 4 px corners, 44 px targets, 48 px primary). */
body.htrb .htrb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	box-sizing: border-box;
	min-height: var(--target-min);
	margin: 0;
	padding: var(--space-2) var(--space-4);
	border: 1px solid var(--ht-line);
	border-radius: var(--radius-control);
	background-color: var(--ht-white);
	box-shadow: none;
	color: var(--ht-ink);
	font-family: var(--ht-font-body);
	font-size: var(--type-small);
	font-style: normal;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: normal;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	white-space: normal;
	vertical-align: middle;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default);
}

body.htrb .htrb-btn:hover,
body.htrb .htrb-btn:focus {
	text-decoration: none;
}

/* Primary: --ht-green-dark fill, white text (5.06:1), green-tinted shadow that deepens on hover. */
body.htrb .htrb-btn--primary {
	min-height: var(--control-height);
	padding: var(--space-3) var(--space-5);
	border-color: var(--ht-green-dark);
	background-color: var(--ht-green-dark);
	box-shadow: var(--shadow-btn);
	color: var(--ht-white);
	font-size: var(--type-body);
}

body.htrb .htrb-btn--primary:hover,
body.htrb .htrb-btn--primary:active {
	border-color: var(--ht-green-dark);
	background-color: var(--ht-green-dark);
	box-shadow: var(--shadow-btn-hover);
	color: var(--ht-white);
}

/* Deeper green on hover, mixed from the ink token; guarded, because an unsupported color-mix() inside a var() would
   blank the background instead of falling back. */
@supports (background-color: color-mix(in srgb, red 50%, blue)) {
	body.htrb .htrb-btn--primary:hover,
	body.htrb .htrb-btn--primary:active {
		border-color: color-mix(in srgb, var(--ht-green-dark) 82%, var(--ht-ink));
		background-color: color-mix(in srgb, var(--ht-green-dark) 82%, var(--ht-ink));
	}
}

/* Outline: white, 1 px green border, green-dark text; fills on hover with --ht-green-dark (white on --ht-green fails AA). */
body.htrb .htrb-btn--outline {
	border-color: var(--ht-green);
	background-color: var(--ht-white);
	color: var(--ht-green-dark);
}

body.htrb .htrb-btn--outline:hover,
body.htrb .htrb-btn--outline:active {
	border-color: var(--ht-green-dark);
	background-color: var(--ht-green-dark);
	color: var(--ht-white);
}

/* Ghost: a border, ink text, the icon in green-dark (as on the canvas). */
body.htrb .htrb-btn--ghost {
	border-color: var(--ht-line);
	background-color: var(--ht-white);
	color: var(--ht-ink);
}

/* Canvas v12 draws the ghost border #CFD8C6; no token holds it, and --ht-line alone (1.20:1 on white) makes a ghost
   button read as plain text. Mixed from two tokens (about #CFDCC5); guarded, because an unsupported color-mix() with
   var() inside would drop the border colour to the text colour instead of falling back to --ht-line. */
@supports (border-color: color-mix(in srgb, red 50%, blue)) {
	body.htrb .htrb-btn--ghost {
		border-color: color-mix(in srgb, var(--ht-green-dark) 15%, var(--ht-line));
	}
}

body.htrb .htrb-btn--ghost .htrb-ico {
	color: var(--ht-green-dark);
}

body.htrb .htrb-btn--ghost:hover,
body.htrb .htrb-btn--ghost:active {
	border-color: var(--ht-green);
	background-color: var(--ht-green-soft);
	color: var(--ht-ink);
}

/* "Link copied" for two seconds (set by htr-blog.js). */
body.htrb .htrb-btn[data-htrb-state="copied"] {
	border-color: var(--ht-green);
	color: var(--ht-green-dark);
}

/* Small (the top block's share pair): 13 px, tighter sides, same 44 px target, as on the canvas. */
body.htrb .htrb-btn--sm {
	padding: var(--space-2) var(--space-3);
	font-size: var(--type-tooltip);
}

/* Google preferred source: a quiet green-dark link with a star, 44 px tall. */
body.htrb .htrb-prefsrc {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: var(--target-min);
	margin: 0;
	padding: 0;
	box-shadow: none;
	color: var(--ht-green-dark);
	font-family: var(--ht-font-body);
	font-size: var(--type-small);
	font-style: normal;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: normal;
	text-align: left;
	text-decoration: none;
	text-transform: none;
	vertical-align: middle;
	transition: color var(--duration-fast) var(--ease-default);
}

body.htrb .htrb-prefsrc:hover {
	color: var(--ht-ink);
	text-decoration: underline;
}

/* Share pair (top block and share strip). */
body.htrb .htrb-share {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
}

/* Disclosure line, right above the first Amazon link. */
body.htrb .htrb-disclosure {
	margin: 0 0 var(--space-4);
	padding: 0;
	font-size: var(--type-small);
	line-height: 1.5;
	color: var(--ht-muted);
}

/* Top block, as canvas v12 draws it: the byline row (the byline, the share buttons to its right, both wrapping on
   phones), then the preferred-source line. In the post (the fallback, when the move script did not run) it starts at
   the left; moved into the header it is centred under Martfury's centred title, and htr-blog.css lines it up at the
   left of the article column instead. */
body.htrb .htrb-top {
	display: block;
	margin: 0 0 var(--space-6);
	padding: 0;
	font-size: var(--type-small);
	line-height: 1.5;
}

body.htrb .htrb-top__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2) var(--space-4);
	margin: 0 0 var(--space-1);
	padding: 0;
}

/* "by HealThyRam · Published 18 Jun 2026 · 4 min read · How we write our guides": 14 px muted (5.68:1); it takes
   the room the buttons leave and wraps inside it, so on a wide column the buttons stay on its right. */
body.htrb .htrb-byline {
	flex: 1 1 16em;
	min-width: 0;
	margin: 0;
	padding: 0;
	font-family: var(--ht-font-body);
	font-size: var(--type-small);
	font-style: normal;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: normal;
	text-align: inherit;
	text-transform: none;
	color: var(--ht-muted);
}

/* The date and the link never break across two lines. */
body.htrb .htrb-byline time,
body.htrb .htrb-byline a {
	white-space: nowrap;
}

body.htrb .htrb-byline a {
	color: var(--ht-green-dark);
	font-weight: 400;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .15em;
	box-shadow: none;
	transition: color var(--duration-fast) var(--ease-default);
}

body.htrb .htrb-byline a:hover {
	color: var(--ht-ink);
}

/* The preferred-source line under the row: 13 px, as on the canvas (--type-tooltip is the 13 px type token). */
body.htrb .htrb-top > .htrb-prefsrc {
	font-size: var(--type-tooltip);
}

/* Under Martfury's centred title: centred, the byline on its own line above the buttons. */
body.htrb .htrb-top--header {
	max-width: var(--measure-article);
	margin: var(--space-3) auto 0;
	text-align: center;
}

body.htrb .htrb-top--header .htrb-top__row {
	justify-content: center;
}

body.htrb .htrb-top--header .htrb-byline {
	flex: 0 1 auto;
}

/* Our byline replaces Martfury's ("18/06/2026 / by HealThyRam / in …") only where the top block really sits in the
   header. Where the move did not happen (no script, another theme layout) the theme's byline stays, and ours, at the
   top of the post, steps back: never two bylines. The move script also marks the header (.htrb-has-top) for browsers
   without :has() — a separate rule, since one unknown selector would drop a whole selector list. */
body.htrb .single-post-header:has(.htrb-top) .entry-metas {
	display: none;
}

body.htrb .single-post-header.htrb-has-top .entry-metas {
	display: none;
}

body.htrb:has(.single-post-header .entry-metas) .htrb-top:not(.htrb-top--header) .htrb-byline {
	display: none;
}

/* Offer box: soft-green panel, 8 px corners, no left border. */
body.htrb .htrb-box {
	display: block;
	margin: var(--space-8) 0;
	padding: var(--space-6);
	border: 0;
	border-radius: var(--radius-card);
	background-color: var(--ht-green-soft);
	box-shadow: none;
	font-size: var(--type-body);
	line-height: 1.6;
}

body.htrb .htrb-box__kicker {
	margin: 0;
	padding: 0;
	font-size: var(--type-micro);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--ht-green-dark);
}

body.htrb .htrb-box__title {
	margin: var(--space-2) 0;
	padding: 0;
	font-family: var(--ht-font-head);
	font-size: var(--type-h2);
	font-weight: 700;
	line-height: var(--text-heading-leading);
	letter-spacing: var(--text-heading-tracking);
	color: var(--ht-ink);
}

body.htrb .htrb-box__text {
	margin: 0 0 var(--space-4);
	padding: 0;
	font-size: var(--type-body);
	line-height: 1.6;
	color: var(--ht-ink);
}

body.htrb .htrb-box__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3) var(--space-4);
	margin: 0;
	padding: 0;
}

body.htrb .htrb-box__note {
	flex: 1 1 12em;
	min-width: 0;
	font-size: var(--type-small);
	line-height: 1.5;
	color: var(--ht-muted);
}

body.htrb .htrb-box__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-6);
	margin: var(--space-4) 0 0;
	padding: var(--space-3) 0 0;
	border-top: 1px solid var(--ht-line);
	list-style: none;
	font-size: var(--type-small);
	line-height: 1.5;
}

/* The hairline on soft green: --ht-line all but disappears there, so the rule is mixed from the green tokens. */
@supports (border-color: color-mix(in srgb, red 50%, blue)) {
	body.htrb .htrb-box__links {
		border-top-color: color-mix(in srgb, var(--ht-green) 25%, var(--ht-green-soft));
	}
}

body.htrb .htrb-box__links li {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--type-small);
	line-height: 1.5;
}

body.htrb .htrb-box__links li::before {
	content: none;
}

body.htrb .htrb-box__links a {
	font-weight: 600;
}

body.htrb .htrb-box__intl,
body.htrb .htrb-box__work {
	margin: var(--space-3) 0 0;
	padding: 0;
	font-size: var(--type-small);
	line-height: 1.5;
	color: var(--ht-ink);
}

body.htrb .htrb-box__intl a,
body.htrb .htrb-box__work a {
	font-weight: 600;
}

body.htrb .htrb-box__small {
	margin: var(--space-3) 0 0;
	padding: 0;
	font-size: var(--type-micro);
	line-height: 1.5;
	color: var(--ht-muted);
}

/* Workplace line: white card with a hairline; text and the outline button wrap on phones. */
body.htrb .htrb-work {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3) var(--space-5);
	margin: var(--space-6) 0 var(--space-8);
	padding: var(--space-4) var(--space-5);
	border: 1px solid var(--ht-line);
	border-radius: var(--radius-card);
	background-color: var(--ht-white);
	box-shadow: none;
	font-size: var(--type-body);
	line-height: 1.6;
}

body.htrb .htrb-work__body {
	display: block;
	flex: 1 1 20em;
	min-width: 0;
}

body.htrb .htrb-work__kicker {
	display: block;
	margin: 0;
	font-size: var(--type-micro);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--ht-green-dark);
}

body.htrb .htrb-work__text {
	display: block;
	margin: var(--space-1) 0 0;
	font-size: var(--type-body);
	line-height: 1.6;
	color: var(--ht-ink);
}

body.htrb .htrb-work .htrb-btn {
	flex: none;
}

/* Video facade: a 16:9 block (all spans, so it is valid inside a <p>), the thumbnail as a cover, a round play button
   and a label on solid ink (legible over any thumbnail, no transparency). */
body.htrb .htrb-video {
	display: block;
	margin: var(--space-6) 0;
	padding: 0;
	font-size: var(--type-body);
	line-height: 1.5;
}

body.htrb .htrb-video__play,
body.htrb .htrb-video__frame {
	position: relative;
	display: flex;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--radius-card);
	background-color: var(--ht-ink);
}

body.htrb .htrb-video__play {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	box-shadow: none;
	color: var(--ht-white);
	text-decoration: none;
}

@supports not (aspect-ratio: 16 / 9) {
	body.htrb .htrb-video__play,
	body.htrb .htrb-video__frame {
		min-height: calc(var(--space-12) * 4);
	}
}

body.htrb .htrb-video__img {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: cover;
}

/* 64 px round play button; in a narrow facade (a video in a column) it shrinks with the box so button and label fit. */
body.htrb .htrb-video__btn {
	position: relative;
	z-index: 1;
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: calc(var(--space-8) * 2);
	height: calc(var(--space-8) * 2);
	border: 2px solid var(--ht-white);
	border-radius: 50%;
	background-color: var(--ht-ink);
	box-shadow: var(--shadow-card);
	color: var(--ht-white);
	transition: background-color var(--duration-fast) var(--ease-default);
}

body.htrb .htrb-video__btn svg {
	display: block;
	width: 40%;
	height: 40%;
	fill: currentColor;
	stroke: none;
}

/* Guarded: min() or aspect-ratio around a var() that a browser lacks would drop the size instead of falling back. */
@supports (width: min(1px, 2%)) and (aspect-ratio: 1) {
	body.htrb .htrb-video__btn {
		width: min(calc(var(--space-8) * 2), 28%);
		height: auto;
		aspect-ratio: 1;
	}
}

body.htrb .htrb-video__label {
	position: relative;
	z-index: 1;
	display: inline-block;
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-control);
	background-color: var(--ht-ink);
	color: var(--ht-white);
	font-size: var(--type-body);
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
}

body.htrb .htrb-video__play:hover .htrb-video__btn,
body.htrb .htrb-video__play:focus-visible .htrb-video__btn {
	background-color: var(--ht-green-dark);
}

body.htrb .htrb-video__note {
	display: block;
	margin: var(--space-2) 0 0;
	font-size: var(--type-small);
	line-height: 1.5;
	color: var(--ht-muted);
}

/* Playing: htr-blog.js swaps the link for <span class="htrb-video__frame"><iframe></span>. */
body.htrb .htrb-video__frame iframe {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	border: 0;
}

/* An Elementor video widget the transform turned into a facade (data-widget_type htrb-video.default) drops the band
   the author gave Elementor's player: its background and padding (live 72438: 16 px of #FF9900 around the video, the
   muted note at 2.65:1 on it). (0,5,1) out-weighs Elementor's per-post rules, (0,4,0) and (0,5,0) with :hover; the
   widget itself is covered for Elementor's optimised markup (no .elementor-widget-container). Overflow shows again,
   or Elementor's overflow: hidden on video widgets would clip the facade's focus ring now that the padding is gone. */
body.htrb .elementor-element.elementor-widget[data-widget_type="htrb-video.default"],
body.htrb .elementor-element.elementor-widget[data-widget_type="htrb-video.default"] > .elementor-widget-container {
	padding: 0;
	overflow: visible;
	background: none;
}

/* Share strip: hairlines above and below, the line and the buttons. */
body.htrb .htrb-sharebar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3) var(--space-4);
	margin: var(--space-8) 0 var(--space-6);
	padding: var(--space-3) 0;
	border-top: 1px solid var(--ht-line);
	border-bottom: 1px solid var(--ht-line);
	background: none;
	font-size: var(--type-body);
	line-height: 1.5;
}

body.htrb .htrb-sharebar__text {
	margin: 0;
	padding: 0;
	font-size: var(--type-body);
	font-weight: 600;
	line-height: 1.5;
	color: var(--ht-ink);
}

/* Stay with HealThyRam: white card, the logo 30 px high (the markup's height), muted line, actions, consent line. */
body.htrb .htrb-stay {
	display: block;
	margin: 0 0 var(--space-8);
	padding: var(--space-5);
	border: 1px solid var(--ht-line);
	border-radius: var(--radius-card);
	background-color: var(--ht-white);
	box-shadow: none;
	font-size: var(--type-body);
	line-height: 1.6;
}

body.htrb .htrb-stay__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3) var(--space-4);
	margin: 0 0 var(--space-3);
	padding: 0;
}

body.htrb .htrb-stay__logo {
	display: block;
	flex: none;
	width: auto;
	max-width: 100%;
	height: 30px;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: contain;
}

body.htrb .htrb-stay__text {
	flex: 1 1 16em;
	min-width: 0;
	margin: 0;
	padding: 0;
	font-size: var(--type-body);
	line-height: 1.6;
	color: var(--ht-muted);
}

body.htrb .htrb-stay__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-5);
	margin: 0;
	padding: var(--space-3) 0 0;
	border-top: 1px solid var(--ht-line);
}

body.htrb .htrb-stay__small {
	margin: var(--space-3) 0 0;
	padding: 0;
	font-size: var(--type-micro);
	line-height: 1.5;
	color: var(--ht-muted);
}

@media (max-width: 767px) {
	body.htrb .htrb-box {
		padding: var(--space-5) var(--space-4);
	}

	body.htrb .htrb-work,
	body.htrb .htrb-stay {
		padding: var(--space-4);
	}
}

/* Announcements for screen readers ("Link copied"), created by htr-blog.js. */
body.htrb .htrb-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

/* ── 5. Focus: the site's global CSS removes outlines (button, a:focus), so everything here draws its own ring. ─── */

body.htrb .htrb-btn:focus-visible,
body.htrb .htrb-prefsrc:focus-visible,
body.htrb .htrb-video__play:focus-visible,
body.htrb .htrb-byline a:focus-visible,
body.htrb .htrb-disclosure a:focus-visible,
body.htrb .htrb-box a:focus-visible,
body.htrb .htrb-work a:focus-visible,
body.htrb .htrb-stay a:focus-visible,
body.htrb .single-post-header .entry-metas a:focus-visible,
body.htrb .single-post-wrapper > .entry-content a:focus-visible,
body.htrb .single-post-wrapper > .entry-content summary:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}

/* ── 6. Motion: subtle, and none at all when the reader asks for less. ─────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	body.htrb .single-post-header .entry-metas a,
	body.htrb .single-post-wrapper > .entry-content a,
	body.htrb .htrb-btn,
	body.htrb .htrb-prefsrc,
	body.htrb .htrb-video__btn,
	body.htrb .htrb-byline a,
	body.htrb .htrb-disclosure a,
	body.htrb .htrb-box a,
	body.htrb .htrb-work a,
	body.htrb .htrb-stay a {
		transition: none;
	}
}

/* ── 7. Hidden stays hidden (the copy buttons wait for htr-blog.js). ──────────────────────────────────────────── */

body.htrb .htrb-btn[hidden],
body.htrb [data-htrb][hidden] {
	display: none;
}

/* ── 8. Print: the reading and the byline, without the share buttons, the Google link and the Stay box. ─────────── */

@media print {
	body.htrb .htrb-top > .htrb-prefsrc,
	body.htrb .htrb-share,
	body.htrb .htrb-sharebar,
	body.htrb .htrb-stay,
	body.htrb .htrb-video__btn {
		display: none !important;
	}

	body.htrb .htrb-btn--primary {
		box-shadow: none;
	}
}