/* ==========================================================================
   healthebox theme
   Elementor draws the pages; these styles cover the rest (articles, plain
   pages, forms, header behaviour, the Rebuild portal) and a few helper
   classes for Elementor (see Appearance → healthebox).
   Colours come from Elementor's global colours when they exist, so a change
   in Elementor → Site Settings → Global Colours reaches these styles too.
   ========================================================================== */

/* ---- 1. Tokens ---------------------------------------------------------- */

body {
	--hb-ink: var(--e-global-color-primary, #191A17);
	--hb-amber: var(--e-global-color-secondary, #EEA322);
	--hb-text: var(--e-global-color-text, #5E5952);
	--hb-peach: var(--e-global-color-accent, #FFB077);
	--hb-cream: var(--e-global-color-hbcream, #FFFAF6);
	--hb-sand: var(--e-global-color-hbmint, #FDF6EA);
	--hb-line: var(--e-global-color-hbline, #F2EBE1);
	--hb-ink-2: var(--e-global-color-hbink2, #37332E);
	--hb-muted: var(--e-global-color-hbmuted, #928A80);
	--hb-line-2: #EADFD0;
	--hb-white: #FFFFFF;
	--hb-danger: #DC2B2B;
	--hb-danger-bg: #FFEFF0;
	--hb-success-bg: #FDF0DA;

	--hb-font: var(--e-global-typography-text-font-family, "Commissioner"), system-ui, -apple-system, "Segoe UI", sans-serif;
	--hb-font-head: var(--e-global-typography-primary-font-family, "Commissioner"), system-ui, -apple-system, "Segoe UI", sans-serif;

	--hb-radius: 20px;
	--hb-leaf: 16px 0 16px 0;      /* buttons and cards: top-left and bottom-right corners */
	--hb-leaf-field: 0 0 16px 0;   /* form fields: bottom-right corner */
	--hb-shadow: 0 2px 14px rgba(20, 20, 43, .04);
	--hb-shadow-hover: 0 6px 24px rgba(20, 20, 43, .08);
	--hb-shadow-btn: 0 8px 14px rgba(238, 163, 34, .28);

	--hb-container: 1200px;
	--hb-gutter: 24px;
	--hb-section: 96px;

	--hb-squiggle-orange: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='12' viewBox='0 0 58 12'%3E%3Cpath d='M2 9 8.5 3 15 9 21.5 3 28 9 34.5 3 41 9 47.5 3 54 9' fill='none' stroke='%23FFB077' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--hb-squiggle-strong: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='12' viewBox='0 0 58 12'%3E%3Cpath d='M2 9 8.5 3 15 9 21.5 3 28 9 34.5 3 41 9 47.5 3 54 9' fill='none' stroke='%23EEA322' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--hb-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M6 3l5 5-5 5' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--hb-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23EEA322' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (max-width: 1024px) {
	body { --hb-section: 72px; }
}

@media (max-width: 767px) {
	body { --hb-section: 56px; --hb-gutter: 16px; }
}

/* ---- 2. Base ------------------------------------------------------------- */

body.hb-theme {
	background: var(--hb-white);
	color: var(--hb-text);
	font-family: var(--hb-font);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

.hb-theme h1, .hb-theme h2, .hb-theme h3, .hb-theme h4, .hb-theme h5, .hb-theme h6 {
	font-family: var(--hb-font-head);
	color: var(--hb-ink);
	font-weight: 500;
}

.hb-theme ::selection { background: var(--hb-amber); color: var(--hb-ink); }

.hb-theme a { transition: color .2s, background-color .2s, border-color .2s, box-shadow .2s, transform .2s; }

.hb-theme :focus-visible {
	outline: 2px solid var(--hb-ink);
	outline-offset: 3px;
}

.hb-theme img { max-width: 100%; height: auto; }

.hb-wrap {
	width: 100%;
	max-width: calc(var(--hb-container) + 2 * var(--hb-gutter));
	margin-inline: auto;
	padding-inline: var(--hb-gutter);
}

.hb-wrap--text { max-width: calc(800px + 2 * var(--hb-gutter)); }

.hb-theme .site-main.hb-article,
.hb-theme .site-main.hb-page,
.hb-theme .site-main.hb-archive,
.hb-theme .site-main.hb-404 {
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 0;
}

/* Linked images fill their box (Elementor wraps them in an inline-block link). */
.hb-theme .elementor-widget-image a { display: block; }

/* Hello Elementor resets links and buttons to pink; keep everything in the palette.
   Links inside the Rebuild sign-up box and portal keep the plugin's own styles (tabs, buttons, cards). */
.hb-theme .page-content a:not(.elementor-button):not(.hb-button):not(:where(.hbr-portal, .hbr-signup, .hbr-modal) *),
.hb-theme .hb-prose a:not(.hb-button):not(:where(.hbr-portal, .hbr-signup, .hbr-modal) *),
.hb-theme :is(.hbr-portal, .hbr-signup) .hbr-small a {
	color: var(--hb-ink);
	text-decoration: underline;
	text-decoration-color: var(--hb-amber);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.hb-theme .page-content a:not(.elementor-button):not(.hb-button):not(:where(.hbr-portal, .hbr-signup, .hbr-modal) *):hover,
.hb-theme .hb-prose a:not(.hb-button):not(:where(.hbr-portal, .hbr-signup, .hbr-modal) *):hover,
.hb-theme :is(.hbr-portal, .hbr-signup) .hbr-small a:hover { text-decoration-color: var(--hb-ink); }

.hb-theme .hb-page-elementor a { text-decoration: none; }

/* ---- 3. Buttons ---------------------------------------------------------- */
/* Elementor buttons take their colours, padding and corners from Site Settings → Buttons.
   This adds the hover lift and lets the corners round off on hover, as in the reference design.
   Site Settings has no hover border colour for buttons, so the border follows the logo orange (Secondary) here. */

.hb-theme .elementor-button,
.hb-button,
.hb-theme .ff-btn-submit,
.hb-theme .fluentform .ff-btn {
	transition: background-color .3s, border-color .3s, color .3s, box-shadow .3s, transform .3s, border-radius .3s;
}

.hb-theme .elementor-button:hover,
.hb-theme .elementor-button:focus-visible {
	border-color: var(--hb-amber);
	transform: translate3d(0, -3px, 0);
	border-top-right-radius: 16px;
	border-bottom-left-radius: 16px;
}

/* Theme's own buttons (404, archives) look like Elementor's. */
.hb-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 26px;
	background: var(--hb-ink);
	color: var(--hb-white) !important;
	border: 1px solid var(--hb-ink);
	border-radius: var(--hb-leaf);
	font-family: var(--hb-font);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none !important;
	cursor: pointer;
}

.hb-button:hover,
.hb-button:focus-visible {
	background: var(--hb-amber);
	border-color: var(--hb-amber);
	color: var(--hb-ink) !important;
	border-radius: 16px;
	box-shadow: var(--hb-shadow-btn);
	transform: translate3d(0, -3px, 0);
}

/* Elementor: class "hb-btn-light" on a Button widget → white button with a soft shadow. */
.hb-theme .hb-btn-light .elementor-button {
	background: var(--hb-white);
	color: var(--hb-ink);
	border-color: var(--hb-line);
	box-shadow: 0 4px 10px rgba(20, 20, 43, .04);
}

.hb-theme .hb-btn-light .elementor-button:hover,
.hb-theme .hb-btn-light .elementor-button:focus-visible {
	background: var(--hb-amber);
	border-color: var(--hb-amber);
	color: var(--hb-ink);
	box-shadow: var(--hb-shadow-btn);
}

/* ---- 4. Elementor helper classes ---------------------------------------- */

/* "hb-squiggle" (soft orange) / "hb-squiggle-strong" (logo orange) on a Heading: the zigzag line above the title.
   ("hb-squiggle-green" is the old name of "hb-squiggle-strong" and still works.)
   It follows the heading's alignment (left, centre, right). */
.hb-theme .hb-squiggle::before,
.hb-theme .hb-squiggle-strong::before,
.hb-theme .hb-squiggle-green::before,
.hb-squiggle-title::before {
	content: "";
	display: inline-block;
	width: 58px;
	height: 12px;
	margin-bottom: 14px;
	background: var(--hb-squiggle-orange) no-repeat center / contain;
}

.hb-theme .hb-squiggle-strong::before,
.hb-theme .hb-squiggle-green::before { background-image: var(--hb-squiggle-strong); }

.hb-squiggle-title { text-align: center; }
.hb-squiggle-title::before { display: block; margin-inline: auto; }

/* "hb-lift" on a Container: card that rises slightly on hover. */
.hb-theme .hb-lift {
	transition: transform .3s, box-shadow .3s;
}

.hb-theme .hb-lift:hover {
	transform: translate3d(0, -4px, 0);
	box-shadow: var(--hb-shadow-hover);
}

/* Elementor icon list with the orange check (the theme sets it on lists with class "hb-checks"). */
.hb-theme .hb-checks .elementor-icon-list-icon svg { fill: var(--hb-amber); }

/* Accordions (Elementor's "Accordion" / "Toggle"): cards with a soft shadow. */
.hb-theme .elementor-widget-accordion .elementor-accordion-item,
.hb-theme .elementor-widget-toggle .elementor-toggle-item {
	background: var(--hb-white);
	border: 1px solid var(--hb-line);
	box-shadow: var(--hb-shadow);
	margin-bottom: 16px;
}

.hb-theme .elementor-widget-accordion .elementor-accordion-item + .elementor-accordion-item { border-top: 1px solid var(--hb-line); }

/* Testimonial widget: quote mark above the text. */
.hb-theme .hb-quote .elementor-testimonial-content::before {
	content: "\201C";
	display: block;
	font-family: Georgia, serif;
	font-size: 56px;
	line-height: .6;
	height: 26px;
	color: var(--hb-amber);
	margin-bottom: 8px;
}

/* ---- 4b. Layout pieces used by the page layouts ------------------------- */

/* Dark zigzag for headings on the orange bands. */
.hb-theme .hb-squiggle-dark::before {
	content: "";
	display: inline-block;
	width: 58px;
	height: 12px;
	margin-bottom: 14px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='12' viewBox='0 0 58 12'%3E%3Cpath d='M2 9 8.5 3 15 9 21.5 3 28 9 34.5 3 41 9 47.5 3 54 9' fill='none' stroke='%23191A17' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Hero photo (class "hb-hero-photo" on the Image, "hb-hero" on the section): it sits on the bottom of the
   section and runs a little past its slanted edge, over the next section, as in the reference design. */
.hb-theme .hb-hero { z-index: 2; overflow: visible; }
.hb-theme .hb-hero > .elementor-shape { z-index: 1; }
.hb-theme .hb-hero-photo { position: relative; z-index: 3; }
.hb-theme .hb-hero-photo img { display: block; width: 100%; height: auto; }

/* Narrow centred text blocks. */
.hb-theme .hb-narrow,
.hb-theme .e-con > .elementor-widget.hb-narrow { max-width: 760px; margin-inline: auto; }

/* Images with the card shadow. */
.hb-theme .hb-shadow-img img { box-shadow: 0 24px 65px rgba(20, 20, 43, .16); }

/* Product cover in a white card (service pages). */
.hb-theme .hb-product-card img { display: block; width: 100%; height: auto; }

/* Price label in the page hero. */
.hb-theme .hb-price-tag .elementor-heading-title {
	display: inline-block;
	padding: 8px 18px;
	background: var(--hb-white);
	border: 1px solid var(--hb-line);
	border-radius: var(--hb-leaf);
	box-shadow: var(--hb-shadow);
}

/* Pricing cards: buttons line up at the bottom; the middle one stands out. */
.hb-theme .hb-price-card { height: 100%; }
.hb-theme .hb-push-bottom { margin-top: auto; }
.hb-theme .hb-price-card--featured { border-color: var(--hb-amber) !important; box-shadow: 0 24px 65px rgba(20, 20, 43, .10) !important; position: relative; }
.hb-theme .hb-price-card--featured::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 6px;
	background: var(--hb-amber);
}

/* The "Συνδύασέ το!" line. */
.hb-theme .hb-combo a { color: var(--hb-ink) !important; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.hb-theme .hb-combo s { color: var(--hb-ink-2); opacity: .7; margin-left: 6px; }

/* Small link under testimonial names. */
.hb-theme .hb-link-accent a,
.hb-theme .hb-link-green a { color: var(--hb-text) !important; text-decoration: underline; text-decoration-color: var(--hb-amber); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.hb-theme .hb-link-accent a:hover,
.hb-theme .hb-link-green a:hover { color: var(--hb-ink) !important; }

/* Testimonial cards keep equal height in a row. */
.hb-theme .hb-quote-card { height: 100%; }

/* On phones, card grids with "hb-scroll-mobile" become a swipeable row. */
@media (max-width: 767px) {
	.hb-theme .hb-scroll-mobile.e-grid,
	.hb-theme .hb-scroll-mobile.e-con {
		display: flex !important;
		flex-wrap: nowrap !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 16px !important;
		margin-inline: -16px;
		padding: 4px 16px 20px !important;
		scrollbar-width: none;
	}
	.hb-theme .hb-scroll-mobile::-webkit-scrollbar { display: none; }
	.hb-theme .hb-scroll-mobile > .e-con { flex: 0 0 86% !important; width: 86% !important; scroll-snap-align: center; }
}

/* Round avatar in the article sidebar. */
.hb-theme .hb-avatar img { aspect-ratio: 1; object-fit: cover; object-position: center top; }

/* Header: CTA size on phones. */
/* Header logo: the full logo on wide screens, the logomark on phones (Elementor's "hide on" settings). */
/* (Elementor fixes linked SVG images at 48px wide, so these need the widget class too.) */
.hb-theme .elementor-widget-image.hb-logo img { display: block; height: 46px; width: auto; max-width: none; }
.hb-theme .elementor-widget-image.hb-logo-mark img { display: block; height: 38px; width: auto; max-width: none; }
.hb-theme .elementor-widget-image.hb-footer-logo img { display: block; height: 52px; width: auto; max-width: 100%; }
@media (max-width: 1024px) {
	.hb-theme .hb-header .elementor-widget-navigation-menu { order: 3; flex: 0 0 auto !important; width: auto !important; max-width: 56px !important; }
	.hb-theme .hb-header .hb-header-cta { order: 2; margin-left: auto; }
	.hb-theme .hb-header .hb-logo,
	.hb-theme .hb-header .hb-logo-mark,
	.hb-theme .hb-header .hb-header-cta { flex-shrink: 0 !important; }
}

.hb-theme nav.hfe-dropdown li.menu-item { border-bottom-color: var(--hb-line) !important; }
@media (max-width: 767px) {
	.hb-theme .hb-header-cta .elementor-button { padding: 10px 16px; font-size: 14px; }
}

/* Header between 1025px and 1280px (laptops, narrow windows): the menu takes only the space left between the logo
   and the button, its items tighten a little, and below 1180px the logomark replaces the full logo, so the
   "Επικοινωνία" button is never squeezed. (HFE sets the menu's width inline, hence the max-width cap.) */
@media (min-width: 1025px) {
	.hb-theme .hb-header .hb-logo,
	.hb-theme .hb-header .hb-logo-mark,
	.hb-theme .hb-header .hb-header-cta { flex-shrink: 0 !important; }
	.hb-theme .hb-header .elementor-widget-navigation-menu { flex: 1 1 0% !important; min-width: 0; }
	.hb-theme .hb-header .elementor-widget-navigation-menu .hfe-nav-menu__layout-horizontal { width: auto !important; max-width: 100%; }
}
@media (min-width: 1025px) and (max-width: 1280px) {
	.hb-theme .hb-header .hfe-nav-menu > li > a.hfe-menu-item { padding-left: 10px !important; padding-right: 10px !important; font-size: 15px !important; }
	.hb-theme .hb-header .hb-header-cta .elementor-button { padding: 12px 20px; font-size: 15px; }
}
@media (min-width: 1025px) and (max-width: 1180px) {
	.hb-theme .hb-header .hb-logo { display: none !important; }
	.hb-theme .hb-header .hb-logo-mark.elementor-hidden-desktop { display: block !important; }
}

/* Header menu: the hamburger panel. */
.hb-theme .hb-header .hfe-nav-menu__toggle { padding: 6px; }
.hb-theme .hb-header .hfe-nav-menu__layout-horizontal .hfe-nav-menu > li > a { font-weight: 400; }
@media (max-width: 1024px) {
	.hb-theme .hb-header nav.hfe-dropdown { border-top: 1px solid var(--hb-line); box-shadow: 0 16px 24px rgba(20, 20, 43, .06); }
	.hb-theme .hb-header nav.hfe-dropdown .hfe-nav-menu .sub-menu { border: 0 !important; box-shadow: none; padding: 0; }
}

/* Footer links: no underline, darker on hover. */
.hb-theme .hb-footer .elementor-icon-list-item a { color: var(--hb-text); }
.hb-theme .hb-footer .elementor-icon-list-item a:hover .elementor-icon-list-text { color: var(--hb-ink); }
.hb-theme .hb-footer .elementor-heading-title a { color: inherit; }
.hb-theme .hb-footer .elementor-heading-title a:hover { color: var(--hb-ink); }

/* Newsletter form side by side with its fields on wide screens. */
@media (min-width: 1025px) {
	.hb-theme .hb-form-inline .ff-el-group { margin-bottom: 12px; }
}

/* Toggle / FAQ */
.hb-theme .elementor-toggle .elementor-toggle-item {
	background: var(--hb-white);
	border: 1px solid var(--hb-line);
	box-shadow: var(--hb-shadow);
	transition: box-shadow .3s;
}
.hb-theme .elementor-toggle .elementor-toggle-item:hover { box-shadow: var(--hb-shadow-hover); }
.hb-theme .elementor-toggle .elementor-tab-title { border-bottom: 0 !important; }
.hb-theme .elementor-toggle .elementor-tab-content { border-bottom: 0 !important; }
.hb-theme .elementor-toggle .elementor-toggle-icon { width: 32px; height: 32px; display: inline-flex !important; align-items: center; justify-content: center; border: 1px solid var(--hb-line); border-radius: 8px; }
/* Elementor nudges the icon 5px left and keeps the text line height; centre the +/− in its square. */
.hb-theme .elementor-toggle .elementor-toggle-icon span { line-height: 0; }
.hb-theme .elementor-toggle .elementor-toggle-icon svg { display: block; margin: 0 !important; width: 12px; height: 12px; }

/* Article cards: 4 columns */
.hb-post-grid.hb-post-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.hb-theme .hb-post-grid--4 .hb-post-card__title { font-size: 18px; }
.hb-post-grid--4 .hb-post-card__body { padding: 20px 20px 18px; }
@media (max-width: 1024px) { .hb-post-grid.hb-post-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .hb-post-grid.hb-post-grid--4 { grid-template-columns: minmax(0, 1fr); } }

/* ---- 5. Header (Elementor template via "Header Footer & Blocks") -------- */

.hb-theme .ehf-header #masthead {
	position: sticky;
	top: 0;
	z-index: 900;
	background: var(--hb-white);
	transition: box-shadow .3s;
}

.admin-bar.hb-theme .ehf-header #masthead { top: 32px; }

@media (max-width: 782px) {
	.admin-bar.hb-theme .ehf-header #masthead { top: 46px; }
}

@media (max-width: 600px) {
	.admin-bar.hb-theme .ehf-header #masthead { top: 0; }
}

.hb-theme.hb-scrolled .ehf-header #masthead { box-shadow: 0 2px 14px rgba(20, 20, 43, .06); }

/* Navigation menu widget: dropdowns as rounded cards. */
.hb-theme .hfe-nav-menu .sub-menu {
	border: 1px solid var(--hb-line) !important;
	border-radius: var(--hb-leaf);
	box-shadow: var(--hb-shadow);
	overflow: hidden;
	padding: 8px 0;
}

.hb-theme .hfe-nav-menu .sub-menu a.hfe-sub-menu-item { white-space: nowrap; }

/* Sections reached from the menu stop below the sticky header. */
.hb-theme [id] { scroll-margin-top: 96px; }

/* ---- 6. Title band for plain pages and archives ------------------------- */

.hb-title-band {
	background: var(--hb-cream);
	padding: 64px 0 56px;
	text-align: center;
	margin-bottom: var(--hb-section);
}

.hb-title-band::before {
	content: "";
	display: block;
	width: 58px;
	height: 12px;
	margin: 0 auto 16px;
	background: var(--hb-squiggle-orange) no-repeat center / contain;
}

.hb-title-band .entry-title {
	margin: 0;
	font-size: clamp(34px, 4.4vw, 52px);
	line-height: 1.15;
}

.hb-archive-desc { max-width: 640px; margin: 12px auto 0; }

.hb-page .page-content.hb-prose,
.hb-archive-list,
.hb-404-body { padding-bottom: var(--hb-section); }

.hb-page-elementor { padding-bottom: 0; }

/* Hello's default page header is replaced by the band above. */
.hb-theme .page-header { display: none; }

/* ---- 7. Readable text (articles, privacy policy) ------------------------ */

.hb-prose {
	font-size: 18px;
	line-height: 1.7;
	color: var(--hb-text);
}

.hb-prose > * + * { margin-top: 1.1em; }
.hb-prose p { margin: 0; }
.hb-prose p + p { margin-top: 1em; }

.hb-prose h2 { font-size: clamp(26px, 3vw, 34px); line-height: 1.25; margin: 1.8em 0 .5em; }
.hb-prose h3 { font-size: clamp(21px, 2.4vw, 25px); line-height: 1.35; margin: 1.6em 0 .4em; }
.hb-prose h4 { font-size: 20px; line-height: 1.4; margin: 1.4em 0 .4em; }
.hb-prose h2:first-child, .hb-prose h3:first-child { margin-top: 0; }

.hb-prose strong, .hb-prose b { color: var(--hb-ink-2); font-weight: 600; }

.hb-prose ul, .hb-prose ol { padding-left: 1.4em; }
.hb-prose li + li { margin-top: .4em; }
.hb-prose ul { list-style: none; padding-left: 0; }
.hb-prose ul > li { position: relative; padding-left: 30px; }
.hb-prose ul > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .3em;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--hb-sand) var(--hb-check) no-repeat center / 14px;
}

.hb-prose ol > li::marker { color: var(--hb-ink); font-weight: 600; }

.hb-prose blockquote {
	margin: 1.6em 0;
	padding: 24px 28px;
	background: var(--hb-sand);
	border-left: 0;
	border-radius: var(--hb-leaf);
	color: var(--hb-ink-2);
	font-size: 20px;
	line-height: 1.55;
}

.hb-prose blockquote p { margin: 0; }

.hb-prose figure,
.hb-prose .wp-block-image { margin: 1.8em 0; }

.hb-prose img,
.hb-prose .wp-block-image img { border-radius: var(--hb-radius); }

.hb-prose figcaption { font-size: 14px; color: var(--hb-muted); text-align: center; margin-top: 8px; }

.hb-prose hr { border: 0; border-top: 1px solid var(--hb-line); margin: 2.2em 0; }

.hb-prose table { width: 100%; border-collapse: collapse; font-size: 16px; }
.hb-prose th, .hb-prose td { border: 1px solid var(--hb-line); padding: 10px 14px; text-align: left; }
.hb-prose th { background: var(--hb-sand); color: var(--hb-ink); font-weight: 600; }

/* Gutenberg buttons inside articles (e.g. "Απόκτησέ το ΕΔΩ"). */
.hb-theme .wp-block-button__link,
.hb-theme .wp-element-button {
	background: var(--hb-ink);
	color: var(--hb-white) !important;
	border: 1px solid var(--hb-ink);
	border-radius: var(--hb-leaf);
	padding: 14px 26px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none !important;
	transition: background-color .3s, border-color .3s, color .3s, box-shadow .3s, transform .3s, border-radius .3s;
}

.hb-theme .wp-block-button__link:hover,
.hb-theme .wp-element-button:hover {
	background: var(--hb-amber);
	border-color: var(--hb-amber);
	color: var(--hb-ink) !important;
	border-radius: 16px;
	box-shadow: var(--hb-shadow-btn);
	transform: translate3d(0, -3px, 0);
}

/* ---- 8. Articles --------------------------------------------------------- */

.hb-article-hero {
	background: var(--hb-cream);
	padding: 64px 0 160px;
	text-align: center;
}

.hb-article-meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px 12px;
	margin: 0 0 18px;
	font-size: 15px;
	color: var(--hb-text);
}

.hb-pill {
	display: inline-block;
	padding: 6px 14px;
	background: var(--hb-amber);
	color: var(--hb-ink) !important;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none !important;
}

.hb-pill:hover { background: var(--hb-ink); color: var(--hb-white) !important; }

.hb-article-hero .entry-title {
	margin: 0;
	font-size: clamp(32px, 4.6vw, 54px);
	line-height: 1.15;
}

.hb-article-lead {
	max-width: 640px;
	margin: 18px auto 0;
	font-size: 18px;
	line-height: 1.6;
}

.hb-article-cover {
	margin: -120px auto 0;
}

.hb-article-cover img {
	display: block;
	width: 100%;
	max-height: 560px;
	object-fit: cover;
	border-radius: var(--hb-radius);
}

.hb-article-layout {
	display: grid;
	grid-template-columns: 300px minmax(0, 760px);
	justify-content: center;
	gap: 56px;
	padding-top: 64px;
	padding-bottom: var(--hb-section);
}

.hb-article-layout--solo { grid-template-columns: minmax(0, 760px); }

.hb-article-aside > * {
	position: sticky;
	top: 120px;
}

.hb-article-tags { margin-top: 2em !important; display: flex; flex-wrap: wrap; gap: 8px; }

.hb-article-tags a {
	display: inline-block;
	padding: 6px 12px;
	background: var(--hb-sand);
	color: var(--hb-ink) !important;
	font-size: 14px;
	text-decoration: none !important;
}

@media (max-width: 1024px) {
	.hb-article-layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.hb-article-aside { order: 2; }
	.hb-article-aside > * { position: static; }
}

@media (max-width: 767px) {
	.hb-article-hero { padding: 40px 0 96px; }
	.hb-article-cover { margin-top: -72px; }
	.hb-article-layout { padding-top: 40px; }
	.hb-prose { font-size: 17px; }
}

.hb-related {
	background: var(--hb-sand);
	padding: var(--hb-section) 0;
}

.hb-related h2 { margin: 0 0 40px; font-size: clamp(28px, 3.4vw, 40px); }

/* Table of contents at the top of articles. */
.hb-toc { margin: 0 0 2em; padding: 0; background: var(--hb-sand); border-radius: var(--hb-leaf); }
.hb-toc summary { cursor: pointer; padding: 16px 22px; font-weight: 600; color: var(--hb-ink); list-style: none; }
.hb-toc summary::-webkit-details-marker { display: none; }
.hb-toc summary::after { content: "–"; float: right; }
.hb-toc details:not([open]) summary::after { content: "+"; }
.hb-toc ol { margin: 0 !important; padding: 0 22px 18px 44px !important; font-size: 16px; line-height: 1.5; }
.hb-toc li + li { margin-top: .45em; }
.hb-theme .hb-toc a { text-decoration: none !important; color: var(--hb-ink) !important; }
.hb-theme .hb-toc a:hover { text-decoration: underline !important; text-decoration-color: var(--hb-amber) !important; }
.hb-prose h2[id] { scroll-margin-top: 110px; }

/* ---- 9. Article cards ([hb_posts], archives, related) ------------------- */

.hb-post-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}

@media (max-width: 1024px) { .hb-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .hb-post-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; } }

.hb-post-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--hb-white);
	border: 1px solid var(--hb-line);
	box-shadow: var(--hb-shadow);
	overflow: hidden;
	transition: transform .3s, box-shadow .3s;
}

.hb-post-card:hover { transform: translate3d(0, -4px, 0); box-shadow: var(--hb-shadow-hover); }

.hb-post-card__media { aspect-ratio: 3 / 2; background: var(--hb-sand); overflow: hidden; }

.hb-post-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0 !important;
	transition: transform .6s;
}

.hb-post-card:hover .hb-post-card__media img { transform: scale(1.04); }

.hb-post-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 20px;
	padding: 24px 24px 22px;
}

.hb-theme .hb-post-card__title {
	margin: 0;
	font-size: 20px;
	line-height: 1.4;
}

.hb-post-card__title a {
	color: var(--hb-ink) !important;
	text-decoration: none !important;
}

/* The title link covers the whole card. */
.hb-post-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }

.hb-post-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	font-size: 14px;
	color: var(--hb-text);
}

.hb-post-card__arrow {
	width: 32px;
	height: 32px;
	background: var(--hb-ink) var(--hb-arrow) no-repeat center / 16px;
	transition: transform .3s;
}

.hb-post-card:hover .hb-post-card__arrow { transform: translate3d(4px, 0, 0); }

/* Pagination */
.hb-theme .navigation.pagination { margin-top: 48px; }
.hb-theme .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.hb-theme .nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	border: 1px solid var(--hb-line);
	background: var(--hb-white);
	color: var(--hb-ink);
	text-decoration: none;
	box-shadow: var(--hb-shadow);
}
.hb-theme .nav-links .page-numbers.current,
.hb-theme .nav-links a.page-numbers:hover { background: var(--hb-ink); border-color: var(--hb-ink); color: var(--hb-white); }

/* 404 */
.hb-404-code { margin: 0 0 4px; font-size: clamp(64px, 10vw, 120px); line-height: 1; font-weight: 600; color: var(--hb-amber); }
.hb-404-body { text-align: center; }
.hb-404-body h2 { margin: 56px 0 28px; font-size: 30px; }
.hb-404-body .hb-post-grid { text-align: left; }

/* ---- 10. Fluent Forms ---------------------------------------------------- */

.hb-theme .fluentform .ff-el-group { margin-bottom: 16px; }

.hb-theme .fluentform .ff-el-input--label label,
.hb-theme .fluentform .ff-el-form-check-label {
	color: var(--hb-ink);
	font-family: var(--hb-font);
	font-size: 15px;
	font-weight: 500;
}

.hb-theme .fluentform .ff-el-form-check-label { font-weight: 400; color: var(--hb-text); font-size: 14px; line-height: 1.5; }

.hb-theme .fluentform .ff-el-form-control {
	min-height: 54px;
	padding: 14px 20px;
	background: var(--hb-white);
	color: var(--hb-ink);
	border: 1px solid var(--hb-line);
	border-radius: var(--hb-leaf-field);
	box-shadow: var(--hb-shadow);
	font-family: var(--hb-font);
	font-size: 16px;
	line-height: 1.3;
	transition: border-color .3s, box-shadow .3s;
}

.hb-theme .fluentform textarea.ff-el-form-control { min-height: 140px; }

.hb-theme .fluentform .ff-el-form-control::placeholder { color: var(--hb-muted); opacity: 1; }

.hb-theme .fluentform .ff-el-form-control:focus {
	border-color: var(--hb-amber);
	box-shadow: 0 2px 14px rgba(20, 20, 43, .06);
	outline: none;
}

.hb-theme .fluentform .ff-btn-submit,
.hb-theme .fluentform .ff-btn-submit:not(.ff_btn_no_style) {
	min-height: 54px;
	padding: 14px 28px;
	background: var(--hb-ink) !important;
	color: var(--hb-white) !important;
	border: 1px solid var(--hb-ink) !important;
	border-radius: var(--hb-leaf) !important;
	font-family: var(--hb-font);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	box-shadow: none;
	opacity: 1;
}

.hb-theme .fluentform .ff-btn-submit:hover,
.hb-theme .fluentform .ff-btn-submit:focus-visible {
	background: var(--hb-amber) !important;
	border-color: var(--hb-amber) !important;
	color: var(--hb-ink) !important;
	border-radius: 16px !important;
	box-shadow: var(--hb-shadow-btn);
	transform: translate3d(0, -3px, 0);
}

.hb-theme .fluentform .ff-el-is-error .ff-el-form-control { border-color: var(--hb-danger); }
.hb-theme .fluentform .error.text-danger { color: var(--hb-danger); font-size: 14px; }

.hb-theme .ff-message-success {
	background: var(--hb-success-bg);
	color: var(--hb-ink);
	border: 0;
	border-radius: var(--hb-leaf);
	box-shadow: none;
	padding: 16px 20px;
}

/* Forms on a coloured band (class "hb-form-on-color" on the Fluent Forms widget or its container):
   all small print in the dark text colour, so it stays readable on orange. */
.hb-theme .hb-form-on-color .fluentform .ff-el-form-control { border-color: transparent; }
.hb-theme .hb-form-on-color .fluentform,
.hb-theme .hb-form-on-color .fluentform p,
.hb-theme .hb-form-on-color .fluentform .ff-custom_html,
.hb-theme .hb-form-on-color .fluentform .ff-el-help-message,
.hb-theme .hb-form-on-color .fluentform .ff-el-form-check-label { color: var(--hb-ink) !important; }
.hb-theme .hb-form-on-color .fluentform a { color: var(--hb-ink) !important; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---- 11. Rebuild plugin (sign-up box and client portal) ----------------- */

.hb-theme .hbr-portal,
.hb-theme .hbr-signup,
.hb-theme .hbr-modal {
	--hbr-ink: var(--hb-ink);
	--hbr-soft: var(--hb-sand);
	--hbr-paper: var(--hb-cream);
	--hbr-line: var(--hb-line);
	--hbr-accent: var(--hb-amber);
	font-family: var(--hb-font);
	color: var(--hb-text);
}

.hb-theme .hbr-portal h3, .hb-theme .hbr-signup h3, .hb-theme .hbr-signup h4 { color: var(--hb-ink); }

.hb-theme .hbr-card,
.hb-theme .hbr-slot,
.hb-theme .hbr-lesson {
	border-radius: var(--hb-radius);
	border-color: var(--hb-line);
	box-shadow: var(--hb-shadow);
}

html body.hb-theme .hbr-portal .hbr-btn,
html body.hb-theme .hbr-signup .hbr-btn,
html body.hb-theme .hbr-modal .hbr-btn {
	border-radius: var(--hb-leaf) !important;
	padding: 13px 24px !important;
	font-weight: 500;
}

html body.hb-theme .hbr-portal .hbr-btn:hover,
html body.hb-theme .hbr-signup .hbr-btn:hover,
html body.hb-theme .hbr-modal .hbr-btn:hover,
html body.hb-theme .hbr-portal .hbr-btn:focus-visible,
html body.hb-theme .hbr-signup .hbr-btn:focus-visible {
	border-radius: 16px !important;
	box-shadow: var(--hb-shadow-btn) !important;
}

.hb-theme .hbr-signup .hbr-btn-alt,
.hb-theme .hbr-signup .hbr-google { border-color: var(--hb-line) !important; box-shadow: 0 4px 10px rgba(20, 20, 43, .04) !important; }

.hb-theme .hbr-form input:not([type=radio]):not([type=checkbox]),
.hb-theme .hbr-form select,
.hb-theme .hbr-form textarea {
	border: 1px solid var(--hb-line);
	border-radius: var(--hb-leaf-field);
	box-shadow: var(--hb-shadow);
	padding: 12px 16px;
}

.hb-theme .hbr-form input:focus,
.hb-theme .hbr-form select:focus,
.hb-theme .hbr-form textarea:focus { border-color: var(--hb-amber); outline: none; }

.hb-theme .hbr-facts div,
.hb-theme .hbr-count span { background: var(--hb-sand); }

/* "Περιορισμένες θέσεις": a small label at the top of the box (it looked like a second button). */
.hb-theme .hbr-signup { display: flex; flex-direction: column; }
.hb-theme .hbr-signup > .hbr-badge {
	order: -1;
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	padding: 0;
	background: none;
	border-radius: 0;
	color: var(--hb-ink);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.hb-theme .hbr-signup > .hbr-badge::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--hb-amber);
	box-shadow: 0 0 0 4px rgba(238, 163, 34, .22);
}
.hb-theme .hbr-good { background: var(--hb-sand); }

.hb-theme .hbr-tabs a { background: var(--hb-sand); }
.hb-theme .hbr-tabs a.on { background: var(--hb-ink); color: var(--hb-white); }
.hb-theme .hbr-bubble { background: var(--hb-cream); border-left-color: var(--hb-peach); }
.hb-theme .hbr-new { background: var(--hb-peach); }

/* ---- 11b. Breadcrumbs, cookie bar, floating contact button --------------- */

.hb-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin: 0 0 18px;
	font-size: 14px;
	color: var(--hb-text);
}
.hb-article-hero .hb-crumbs { justify-content: center; }
.hb-theme .hb-crumbs a { color: var(--hb-text) !important; text-decoration: none !important; }
.hb-theme .hb-crumbs a:hover { color: var(--hb-ink) !important; text-decoration: underline !important; text-decoration-color: var(--hb-amber) !important; }
.hb-crumbs__sep { color: var(--hb-line-2); }
.hb-crumbs [aria-current] { color: var(--hb-ink); }

/* Text for screen readers and search engines only. */
.hb-sr-only, .hb-sr-only .elementor-heading-title {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

/* Cookie bar (WPCode snippet "cookie notice bar"). */
.hb-theme .hb-cookie {
	left: 16px;
	right: 16px;
	bottom: 16px;
	max-width: 880px;
	margin-inline: auto;
	padding: 18px 22px;
	background: var(--hb-ink);
	color: var(--hb-white);
	font-family: var(--hb-font);
	font-size: 15px;
	line-height: 1.55;
	border-radius: var(--hb-leaf);
	box-shadow: 0 24px 65px rgba(20, 20, 43, .24);
}
.hb-theme .hb-cookie a { color: var(--hb-amber) !important; }
.hb-theme .hb-cookie .hb-cookie-btn,
.hb-theme .hb-cookie .hb-cookie-btn:focus {
	background: var(--hb-amber) !important;
	color: var(--hb-ink) !important;
	border: 1px solid var(--hb-amber) !important;
	border-radius: var(--hb-leaf) !important;
	padding: 10px 20px;
	font-weight: 500;
	transition: background-color .3s, color .3s, border-radius .3s;
}
.hb-theme .hb-cookie .hb-cookie-btn:hover { background: var(--hb-white) !important; border-color: var(--hb-white) !important; border-radius: 16px !important; }
.hb-theme .hb-cookie .hb-cookie-deny,
.hb-theme .hb-cookie .hb-cookie-deny:focus { background: transparent !important; color: var(--hb-white) !important; border-color: rgba(255, 255, 255, .5) !important; }
.hb-theme .hb-cookie .hb-cookie-deny:hover { background: rgba(255, 255, 255, .1) !important; color: var(--hb-white) !important; border-color: var(--hb-white) !important; }
@media (max-width: 767px) {
	.hb-theme .hb-cookie { left: 10px; right: 10px; bottom: 10px; padding: 16px; font-size: 14px; }
}

/* Floating contact button (WPCode snippet "floating contact button"). */
.hb-theme .hb-fab {
	width: 52px;
	height: 52px;
	background: var(--hb-ink);
	border-radius: 16px 0 16px 0;
	box-shadow: 0 8px 20px rgba(20, 20, 43, .2);
	transition: transform .3s, border-radius .3s, box-shadow .3s;
}
.hb-theme .hb-fab:hover { background: var(--hb-ink); border-radius: 16px; transform: translate3d(0, -3px, 0); box-shadow: 0 12px 24px rgba(20, 20, 43, .25); }
.hb-theme .hb-fab svg { width: 22px; height: 22px; }

/* The footer's bottom line (copyright, privacy, "site by") ends where the button sits once the
   page is scrolled to the bottom. From 1025 to 1360px it keeps the button's width free on the right;
   on tablets and phones the line stacks to the left (Elementor setting), so it is clear anyway. */
@media (min-width: 1025px) and (max-width: 1360px) {
	.hb-theme .hb-footer .e-con:has(> .hb-credit) { --padding-right: 64px; }
}

/* Portal details: the page's article styles and the Hello theme's button styles must not reach into the app. */
.hb-theme .hbr-portal p { margin: 0 0 14px; }
.hb-theme .hbr-portal p:last-child { margin-bottom: 0; }
.hb-theme .hbr-portal .hbr-q { margin-bottom: 6px; }
.hb-theme .hbr-portal .hbr-card > p:not(:last-child) { margin-bottom: 20px; }

/* Recipe cards are buttons: let the title wrap, keep the card's own padding and corners. */
html body.hb-theme .hbr-portal .hbr-recipe-card {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 4px;
	padding: 0 0 16px !important;
	border-radius: var(--hb-radius) !important;
	box-shadow: var(--hb-shadow) !important;
	white-space: normal;
	text-align: left;
	font-family: var(--hb-font);
	font-size: 16px;
	line-height: 1.4;
	transform: none !important;
}
.hb-theme .hbr-portal .hbr-recipe-card img { margin: 0 0 10px; border-radius: 0; }
.hb-theme .hbr-portal .hbr-recipe-card strong { color: var(--hb-ink); font-weight: 600; padding: 0 16px; overflow-wrap: anywhere; }
.hb-theme .hbr-portal .hbr-recipe-card small { color: var(--hb-muted); padding: 0 16px; }
html body.hb-theme .hbr-portal .hbr-recipe-card:hover { box-shadow: var(--hb-shadow-hover) !important; }

/* Lessons: "Εβδομάδα N" is a small label before the title, so the title starts on the left; the +/− stays right. */
.hb-theme .hbr-lesson summary { justify-content: flex-start; gap: 12px; }
.hb-theme .hbr-lesson summary small {
	margin-left: 0;
	flex: 0 0 auto;
	padding: 3px 10px;
	background: var(--hb-sand);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 500;
	color: var(--hb-ink-2);
}
.hb-theme .hbr-lesson summary::after { margin-left: auto; padding-left: 12px; }

/* ---- 12. Small print ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.hb-theme *, .hb-theme *::before, .hb-theme *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	.hb-theme .elementor-button:hover,
	.hb-button:hover,
	.hb-post-card:hover,
	.hb-theme .hb-lift:hover { transform: none; }
}