/**
 * Header — υλοποίηση του εγκεκριμένου orthofocus-header-mockup-v1.
 * Markup: template-parts/header/ · JS: assets/js/header.js
 *
 * Mobile-first:
 *   έως 1023px    mobile header (μενού, λογότυπο, αναζήτηση, καλάθι) + off-canvas μενού
 *   1024–1100px   desktop header, compact (το @media 1100px του mockup)
 *   1101px+       desktop header, πλήρες
 *
 * Όλες οι διαστάσεις του mockup είναι tokens στο .of-header (παρακάτω).
 * Χρώματα, σκιές, radius, γραμματοσειρά: από τα global tokens του Design System.
 */

/* ==========================================================================
   Tokens
   ========================================================================== */

.of-header {
	/* Top bar */
	--hdr-topbar-height: 36px;
	--hdr-topbar-font-size: 13px;
	--hdr-topbar-gap: 24px;
	--hdr-topbar-group-gap: 22px;
	--hdr-topbar-item-gap: 7px;
	--hdr-topbar-icon: 15px;
	--hdr-topbar-stroke: 1.8;

	/* Main header */
	--hdr-main-height: 90px;
	--hdr-main-columns: 220px minmax(320px, 1fr) auto;
	--hdr-main-gap: 34px;
	--hdr-radius: 10px;

	/* Λογότυπο */
	--hdr-logo-size: 30px;
	--hdr-logo-weight: 800;
	--hdr-logo-tracking: -1.2px;
	--hdr-logo-image-height: 48px;
	--hdr-tagline-size: 11px;
	--hdr-tagline-gap: 6px;
	--hdr-tagline-tracking: 0.02em;
	--hdr-logo-mobile-size: 24px;
	--hdr-logo-mobile-tracking: -0.7px;
	--hdr-logo-mobile-image-height: 36px;

	/* Αναζήτηση */
	--hdr-search-height: 50px;
	--hdr-search-padding-x: 18px;
	--hdr-search-button: 54px;
	--hdr-search-icon: 20px;
	--hdr-search-stroke: 2;
	--hdr-search-ring: 0 0 0 3px color-mix(in srgb, var(--color-primary) 8%, transparent);
	--hdr-search-placeholder: color-mix(in srgb, var(--color-text-muted) 70%, var(--color-surface));

	/* Ενέργειες (λογαριασμός, αγαπημένα, καλάθι) */
	--hdr-actions-gap: 8px;
	--hdr-action-min-width: 74px;
	--hdr-action-padding-y: 8px;
	--hdr-action-padding-x: 10px;
	--hdr-action-gap: 5px;
	--hdr-action-icon: 23px;
	--hdr-action-stroke: 1.7;
	--hdr-count-size: 17px;
	--hdr-count-font-size: 10px;
	--hdr-count-padding-x: 4px;
	--hdr-count-top: 2px;
	--hdr-count-right: 10px;

	/* Κύριο μενού */
	--hdr-nav-height: 56px;
	--hdr-nav-gap: 2px;
	--hdr-nav-link-gap: 6px;
	--hdr-nav-padding-x: 15px;
	/* Μεγαλύτερα γράμματα μενού (αίτημα χρήστη 2026-10-01· το mockup είχε 14px) */
	--hdr-nav-font-size: var(--fs-body);
	--hdr-nav-weight: 650;
	--hdr-nav-highlight-weight: 750;
	--hdr-nav-indicator: 2px;
	--hdr-nav-hover-bg: color-mix(in srgb, var(--color-accent) 4%, var(--color-surface));
	--hdr-chevron: 13px;
	--hdr-chevron-stroke: 2;

	/* Mega menu */
	--hdr-mega-padding-top: 30px;
	--hdr-mega-padding-bottom: 34px;
	--hdr-mega-gap: 34px;
	--hdr-mega-heading-size: 15px;
	--hdr-mega-heading-gap: 15px;
	--hdr-mega-link-size: var(--fs-small);
	--hdr-mega-list-gap: 10px;
	--hdr-promo-width: 320px;
	--hdr-promo-min-height: 220px;
	--hdr-promo-radius: var(--radius-category);
	--hdr-promo-padding: 26px;
	--hdr-promo-eyebrow-size: var(--fs-xs);
	--hdr-promo-eyebrow-tracking: 0.08em;
	--hdr-promo-eyebrow-gap: 8px;
	--hdr-promo-eyebrow-opacity: 0.75;
	--hdr-promo-title-size: 24px;
	--hdr-promo-title-lh: 1.15;
	--hdr-promo-text-size: var(--fs-small);
	--hdr-promo-text-lh: 1.5;
	--hdr-promo-text-margin: 10px 0 18px;
	--hdr-promo-text-color: color-mix(in srgb, var(--color-on-primary) 84%, transparent);
	--hdr-promo-cta-height: 42px;
	--hdr-promo-cta-padding-x: 16px;
	--hdr-promo-cta-size: 13px;
	--hdr-promo-bg:
		linear-gradient(135deg, color-mix(in srgb, var(--color-primary-dark) 96%, transparent), color-mix(in srgb, var(--color-primary) 88%, transparent)),
		radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--color-accent) 30%, transparent), transparent 38%);
	--hdr-promo-image-overlay: linear-gradient(135deg, color-mix(in srgb, var(--color-primary-dark) 90%, transparent), color-mix(in srgb, var(--color-primary) 45%, transparent));

	/* Mobile header */
	--hdr-mobile-height: 68px;
	--hdr-mobile-columns: 44px 1fr auto auto;
	--hdr-mobile-gap: 10px;
	--hdr-icon-button: 42px;
	--hdr-icon-stroke: 1.8;
	--hdr-mobile-search-padding-top: 12px;
	--hdr-mobile-search-padding-bottom: 16px;

	/* Off-canvas μενού */
	--hdr-panel-width: min(88vw, 390px);
	--hdr-panel-head-height: 70px;
	--hdr-panel-time: 250ms;
	--hdr-panel-easing: ease;
	--hdr-backdrop: color-mix(in srgb, var(--color-text) 48%, transparent);
	--hdr-mnav-padding: 10px var(--container-padding) 24px;
	--hdr-mnav-row: 54px;
	--hdr-mnav-sub-gap: 12px;
	--hdr-mnav-sub-padding: 0 0 14px 14px;
	--hdr-mnav-sign: var(--icon-xs);
	--hdr-meta-gap: 12px;
	--hdr-meta-margin: 20px;
	--hdr-meta-padding: 20px;
	--hdr-meta-radius: var(--radius-product);

	position: relative;
	font-size: var(--fs-body);
	line-height: normal;
}

/* Desktop έως 1280px: λίγο μικρότερα γράμματα/κενά μενού, ώστε τα 16px να μη σπάνε σε δύο γραμμές */
@media (min-width: 1101px) and (max-width: 1280px) {
	.of-header {
		--hdr-nav-padding-x: 11px;
		--hdr-nav-font-size: 15px;
	}
}

/* Compact desktop (όπως το @media 1100px του mockup) */
@media (min-width: 1024px) and (max-width: 1100px) {
	.of-header {
		--hdr-main-columns: 190px minmax(260px, 1fr) auto;
		--hdr-main-gap: 20px;
		--hdr-action-min-width: 58px;
		--hdr-action-padding-x: 7px;
		--hdr-nav-padding-x: 10px;
		--hdr-nav-font-size: var(--fs-small);
	}
}

@media (prefers-reduced-motion: reduce) {
	.of-header {
		--hdr-panel-time: 0ms;
	}
}

/* ==========================================================================
   Reset μέσα στο header (το Astra δίνει styles σε button, ul, p)
   ========================================================================== */

.of-header [hidden] {
	display: none !important;
}

.of-header ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.of-header p {
	margin: 0;
}

.of-header a {
	text-decoration: none;
}

.of-header button,
.of-header button:hover,
.of-header button:focus {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: none;
	cursor: pointer;
}

/* ==========================================================================
   Ποια κομμάτια εμφανίζονται ανά συσκευή
   ========================================================================== */

.of-header .of-topbar,
.of-header .of-mainbar,
.of-header .of-nav {
	display: none;
}

@media (min-width: 1024px) {
	.of-header .of-topbar,
	.of-header .of-mainbar,
	.of-header .of-nav {
		display: block;
	}

	.of-header .of-mobilebar,
	.of-header .of-mobile-menu {
		display: none;
	}
}

/* ==========================================================================
   Top bar
   ========================================================================== */

.of-header .of-topbar {
	background-color: var(--color-primary);
	color: var(--color-on-primary);
	font-size: var(--hdr-topbar-font-size);
}

.of-header .of-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--hdr-topbar-gap);
	min-height: var(--hdr-topbar-height);
}

.of-header .of-topbar__group {
	display: flex;
	align-items: center;
	gap: var(--hdr-topbar-group-gap);
}

.of-header .of-topbar__item,
.of-header .of-topbar__item:hover,
.of-header .of-topbar__item:focus {
	display: inline-flex;
	align-items: center;
	gap: var(--hdr-topbar-item-gap);
	color: inherit;
	white-space: nowrap;
}

.of-header .of-topbar__icon {
	--icon-size: var(--hdr-topbar-icon);
	--icon-stroke: var(--hdr-topbar-stroke);
}

.of-header .of-topbar :focus-visible {
	outline-color: var(--color-on-primary);
}

/* ==========================================================================
   Main header
   ========================================================================== */

.of-header .of-mainbar {
	background-color: var(--color-surface);
	border-bottom: var(--border-width) solid var(--color-border);
}

.of-header .of-mainbar__inner {
	display: grid;
	grid-template-columns: var(--hdr-main-columns);
	align-items: center;
	gap: var(--hdr-main-gap);
	min-height: var(--hdr-main-height);
}

/* Λογότυπο */
.of-header .of-logo,
.of-header .of-logo:hover,
.of-header .of-logo:focus {
	display: inline-flex;
	flex-direction: column;
	width: fit-content;
	color: var(--color-primary);
	line-height: 1;
}

.of-header .of-logo__name {
	display: block;
	font-size: var(--hdr-logo-size);
	font-weight: var(--hdr-logo-weight);
	letter-spacing: var(--hdr-logo-tracking);
}

.of-header .of-logo__name::first-letter {
	color: var(--color-accent);
}

.of-header .of-logo__tagline {
	margin-top: var(--hdr-tagline-gap);
	color: var(--color-text-muted);
	font-size: var(--hdr-tagline-size);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--hdr-tagline-tracking);
}

.of-header .of-logo__image {
	display: block;
	width: auto;
	max-width: 100%;
	height: var(--hdr-logo-image-height);
}

.of-header .of-logo--mobile .of-logo__name,
.of-header .of-logo--panel .of-logo__name {
	font-size: var(--hdr-logo-mobile-size);
	letter-spacing: var(--hdr-logo-mobile-tracking);
}

.of-header .of-logo--mobile .of-logo__image,
.of-header .of-logo--panel .of-logo__image {
	height: var(--hdr-logo-mobile-image-height);
}

/* Αναζήτηση */
.of-header .of-search {
	position: relative;
	display: flex;
	align-items: stretch;
	height: var(--hdr-search-height);
	overflow: hidden;
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--hdr-radius);
	background-color: var(--color-surface);
	transition: border-color var(--transition-default), box-shadow var(--transition-default);
}

.of-header .of-search:focus-within {
	border-color: var(--color-primary);
	box-shadow: var(--hdr-search-ring);
}

.of-header .of-search .of-search__input,
.of-header .of-search .of-search__input:focus {
	flex: 1;
	min-width: 0;
	min-height: 0;
	height: auto;
	margin: 0;
	padding: 0 var(--hdr-search-padding-x);
	border: 0;
	border-radius: 0;
	outline: 0;
	box-shadow: none;
	background: transparent;
	color: var(--color-text);
	font-size: var(--fs-body);
	-webkit-appearance: none;
	appearance: none;
}

.of-header .of-search .of-search__input::placeholder {
	color: var(--hdr-search-placeholder);
	opacity: 1;
}

.of-header .of-search .of-search__submit {
	display: grid;
	flex: 0 0 var(--hdr-search-button);
	place-items: center;
	width: var(--hdr-search-button);
	background-color: var(--color-accent);
	color: var(--color-on-accent);
	transition: background-color var(--transition-default);
}

.of-header .of-search .of-search__submit:hover,
.of-header .of-search .of-search__submit:focus-visible {
	background-color: var(--color-accent-hover);
	color: var(--color-on-accent);
}

.of-header .of-search__icon {
	--icon-size: var(--hdr-search-icon);
	--icon-stroke: var(--hdr-search-stroke);
}

/* Ενέργειες */
.of-header .of-actions {
	display: flex;
	align-items: center;
	gap: var(--hdr-actions-gap);
}

.of-header .of-action,
.of-header .of-action:focus {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--hdr-action-gap);
	min-width: var(--hdr-action-min-width);
	padding: var(--hdr-action-padding-y) var(--hdr-action-padding-x);
	border-radius: var(--hdr-radius);
	color: var(--color-primary);
	font-size: var(--fs-xs);
	transition: background-color var(--transition-default);
}

.of-header .of-action:hover,
.of-header .of-action:focus-visible {
	background-color: var(--color-purple-soft);
	color: var(--color-primary);
}

.of-header .of-action__icon {
	--icon-size: var(--hdr-action-icon);
	--icon-stroke: var(--hdr-action-stroke);
}

.of-header .of-cart-count {
	position: absolute;
	top: var(--hdr-count-top);
	right: var(--hdr-count-right);
	min-width: var(--hdr-count-size);
	height: var(--hdr-count-size);
	padding: 0 var(--hdr-count-padding-x);
	border-radius: var(--radius-pill);
	background-color: var(--color-accent);
	color: var(--color-on-accent);
	font-size: var(--hdr-count-font-size);
	font-weight: var(--fw-bold);
	line-height: var(--hdr-count-size);
	text-align: center;
}

/* Compact desktop: τα κείμενα κρύβονται οπτικά, μένουν για screen readers */
@media (min-width: 1024px) and (max-width: 1100px) {
	.of-header .of-action__label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}
}

/* ==========================================================================
   Κύριο μενού & mega menu
   ========================================================================== */

.of-header .of-nav {
	position: relative;
	z-index: var(--z-dropdown);
	background-color: var(--color-surface);
	border-bottom: var(--border-width) solid var(--color-border);
}

.of-header .of-nav__inner {
	display: flex;
	align-items: center;
	min-height: var(--hdr-nav-height);
}

.of-header .of-nav__list {
	display: flex;
	flex: 1;
	align-items: center;
	gap: var(--hdr-nav-gap);
}

.of-header .of-nav__item {
	position: static;
}

/* Τα στοιχεία με «Έμφαση» πάνε στη δεξιά άκρη */
.of-header .of-nav__item:not(.of-nav__item--highlight) + .of-nav__item--highlight {
	margin-inline-start: auto;
}

.of-header .of-nav__link,
.of-header .of-nav__link:focus {
	display: inline-flex;
	align-items: center;
	gap: var(--hdr-nav-link-gap);
	height: var(--hdr-nav-height);
	padding: 0 var(--hdr-nav-padding-x);
	border-bottom: var(--hdr-nav-indicator) solid transparent;
	color: var(--color-primary-dark);
	font-size: var(--hdr-nav-font-size);
	font-weight: var(--hdr-nav-weight);
	white-space: nowrap;
	transition: color var(--transition-default), background-color var(--transition-default), border-color var(--transition-default);
}

.of-header .of-nav__link:hover,
.of-header .of-nav__link[aria-expanded="true"] {
	border-bottom-color: var(--color-accent);
	background-color: var(--hdr-nav-hover-bg);
	color: var(--color-accent);
}

.of-header .of-nav__item--highlight .of-nav__link {
	color: var(--color-accent);
	font-weight: var(--hdr-nav-highlight-weight);
}

.of-header .of-nav__chevron {
	--icon-size: var(--hdr-chevron);
	--icon-stroke: var(--hdr-chevron-stroke);
}

.of-header .of-mega {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	background-color: var(--color-surface);
	border-top: var(--border-width) solid var(--color-border);
	box-shadow: var(--shadow-elevated);
}

.of-header .of-mega__inner {
	display: flex;
	gap: var(--hdr-mega-gap);
	padding-top: var(--hdr-mega-padding-top);
	padding-bottom: var(--hdr-mega-padding-bottom);
}

.of-header .of-mega__col {
	flex: 1 1 0;
	min-width: 0;
}

.of-header .of-mega__heading {
	margin: 0 0 var(--hdr-mega-heading-gap);
	color: var(--color-primary);
	font-size: var(--hdr-mega-heading-size);
	font-weight: var(--fw-bold);
}

.of-header .of-mega__heading a {
	color: inherit;
}

.of-header .of-mega__list {
	display: grid;
	gap: var(--hdr-mega-list-gap);
}

.of-header .of-mega__link,
.of-header .of-mega__link:focus {
	color: var(--color-text);
	font-size: var(--hdr-mega-link-size);
}

.of-header .of-mega__link:hover,
.of-header .of-mega__link:focus-visible,
.of-header .of-mega__heading a:hover {
	color: var(--color-accent);
}

/* Promo card */
.of-header .of-mega__promo {
	position: relative;
	isolation: isolate;
	display: flex;
	flex: 0 0 var(--hdr-promo-width);
	flex-direction: column;
	justify-content: flex-end;
	min-height: var(--hdr-promo-min-height);
	padding: var(--hdr-promo-padding);
	overflow: hidden;
	border-radius: var(--hdr-promo-radius);
	background: var(--hdr-promo-bg);
	color: var(--color-on-primary);
}

.of-header .of-mega__promo--image::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--hdr-promo-image-overlay);
}

.of-header .of-mega__promo-image {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.of-header .of-mega__eyebrow {
	margin-bottom: var(--hdr-promo-eyebrow-gap);
	font-size: var(--hdr-promo-eyebrow-size);
	letter-spacing: var(--hdr-promo-eyebrow-tracking);
	text-transform: uppercase;
	opacity: var(--hdr-promo-eyebrow-opacity);
}

.of-header .of-mega__title {
	font-size: var(--hdr-promo-title-size);
	font-weight: var(--fw-bold);
	line-height: var(--hdr-promo-title-lh);
}

.of-header .of-mega__text {
	margin: var(--hdr-promo-text-margin);
	color: var(--hdr-promo-text-color);
	font-size: var(--hdr-promo-text-size);
	line-height: var(--hdr-promo-text-lh);
}

.of-header .of-mega__cta,
.of-header .of-mega__cta:focus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	min-height: var(--hdr-promo-cta-height);
	padding: 0 var(--hdr-promo-cta-padding-x);
	border-radius: var(--radius-button);
	background-color: var(--color-accent);
	color: var(--color-on-accent);
	font-size: var(--hdr-promo-cta-size);
	font-weight: var(--fw-bold);
	transition: background-color var(--transition-default);
}

.of-header .of-mega__cta:hover,
.of-header .of-mega__cta:focus-visible {
	background-color: var(--color-accent-hover);
	color: var(--color-on-accent);
}

.of-header .of-mega__promo :focus-visible {
	outline-color: var(--color-on-primary);
}

/* ==========================================================================
   Mobile / tablet header
   ========================================================================== */

.of-header .of-mobilebar {
	background-color: var(--color-surface);
	border-bottom: var(--border-width) solid var(--color-border);
}

.of-header .of-mobilebar__inner {
	display: grid;
	grid-template-columns: var(--hdr-mobile-columns);
	align-items: center;
	gap: var(--hdr-mobile-gap);
	min-height: var(--hdr-mobile-height);
}

.of-header .of-icon-btn,
.of-header .of-icon-btn:focus {
	position: relative;
	display: grid;
	place-items: center;
	width: var(--hdr-icon-button);
	height: var(--hdr-icon-button);
	border-radius: var(--radius-button);
	background-color: transparent;
	color: var(--color-primary);
	transition: background-color var(--transition-default);
}

.of-header .of-icon-btn:hover,
.of-header .of-icon-btn:focus-visible {
	background-color: var(--color-purple-soft);
	color: var(--color-primary);
}

.of-header .of-icon-btn__icon {
	--icon-size: var(--hdr-action-icon);
	--icon-stroke: var(--hdr-icon-stroke);
}

.of-header .of-icon-btn .of-cart-count {
	top: 0;
	right: 0;
}

.of-header .of-mobile-search {
	padding: var(--hdr-mobile-search-padding-top) var(--container-padding) var(--hdr-mobile-search-padding-bottom);
	background-color: var(--color-surface);
	border-bottom: var(--border-width) solid var(--color-border);
}

/* ==========================================================================
   Off-canvas μενού
   ========================================================================== */

.of-header .of-mobile-menu {
	position: fixed;
	inset: 0;
	z-index: var(--z-modal);
	visibility: hidden;
	pointer-events: none;
	transition: visibility 0s linear var(--hdr-panel-time);
}

.of-header .of-mobile-menu.is-open {
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}

.admin-bar .of-header .of-mobile-menu {
	top: var(--wp-admin--admin-bar--height, 0px);
}

.of-header .of-mobile-menu__backdrop {
	position: absolute;
	inset: 0;
	background-color: var(--hdr-backdrop);
	opacity: 0;
	transition: opacity var(--hdr-panel-time) var(--hdr-panel-easing);
}

.of-header .of-mobile-menu.is-open .of-mobile-menu__backdrop {
	opacity: 1;
}

.of-header .of-mobile-menu__panel {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: var(--hdr-panel-width);
	overflow-y: auto;
	overscroll-behavior: contain;
	background-color: var(--color-surface);
	transform: translateX(-100%);
	transition: transform var(--hdr-panel-time) var(--hdr-panel-easing);
}

.of-header .of-mobile-menu.is-open .of-mobile-menu__panel {
	transform: translateX(0);
}

.of-header .of-mobile-menu__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: var(--hdr-panel-head-height);
	padding: 0 var(--container-padding);
	border-bottom: var(--border-width) solid var(--color-border);
}

.of-header .of-mnav {
	padding: var(--hdr-mnav-padding);
}

.of-header .of-mnav__item--parent {
	border-bottom: var(--border-width) solid var(--color-border);
}

.of-header .of-mnav__toggle,
.of-header .of-mnav__toggle:hover,
.of-header .of-mnav__toggle:focus,
.of-header .of-mnav__link,
.of-header .of-mnav__link:hover,
.of-header .of-mnav__link:focus {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: var(--hdr-mnav-row);
	color: var(--color-primary-dark);
	font-weight: var(--hdr-nav-weight);
	text-align: start;
}

.of-header .of-mnav__link--highlight,
.of-header .of-mnav__link--highlight:hover,
.of-header .of-mnav__link--highlight:focus {
	color: var(--color-accent);
}

.of-header .of-mnav__sign {
	--icon-size: var(--hdr-mnav-sign);
}

.of-header .of-mnav__toggle .of-mnav__sign--open,
.of-header .of-mnav__toggle[aria-expanded="true"] .of-mnav__sign--closed {
	display: none;
}

.of-header .of-mnav__toggle[aria-expanded="true"] .of-mnav__sign--open {
	display: inline-block;
}

.of-header .of-mnav__sub {
	display: grid;
	gap: var(--hdr-mnav-sub-gap);
	padding: var(--hdr-mnav-sub-padding);
}

.of-header .of-mnav__sublink,
.of-header .of-mnav__sublink:focus {
	color: var(--color-text-muted);
	font-size: var(--fs-small);
}

.of-header .of-mnav__sublink:hover {
	color: var(--color-accent);
}

.of-header .of-mnav__meta {
	display: grid;
	gap: var(--hdr-meta-gap);
	margin-top: var(--hdr-meta-margin);
	padding: var(--hdr-meta-padding);
	border-radius: var(--hdr-meta-radius);
	background-color: var(--color-purple-soft);
	font-size: var(--fs-small);
}

.of-header .of-mnav__meta a,
.of-header .of-mnav__meta a:hover,
.of-header .of-mnav__meta a:focus {
	color: inherit;
}

/* Κλείδωμα scroll της σελίδας όσο είναι ανοιχτό το μενού */
.of-scroll-lock,
.of-scroll-lock body {
	overflow: hidden;
}