/*
 * Főoldal (www.muveszetekvolgye.hu) design tokenek + header/footer.
 * Forrás: muvolgy-landing-2 (tailwind.config.js, components/page/Header.vue, Footer.vue).
 * Minden saját osztály mv- prefixes, hogy ne ütközzön a The7-tel.
 */

@font-face {
	font-family: 'Prometo';
	src: url('../fonts/Prometo.woff2') format('woff2');
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: 'Prometo';
	src: url('../fonts/Prometo-Bold.woff2') format('woff2');
	font-weight: 700;
	font-display: swap;
}
@font-face {
	font-family: 'Prometo';
	src: url('../fonts/Prometo-XBold.woff2') format('woff2');
	font-weight: 800;
	font-display: swap;
}

@font-face {
	font-family: 'Verveine';
	src: url('../fonts/Verveine_W_Rg.woff2') format('woff2');
	font-weight: 400;
	font-display: swap;
}

:root {
	--mv-burgundy: #A93C5E;
	--mv-burgundy-50: #FBF0F3;
	--mv-burgundy-700: #8E2440;
	--mv-orange: #ffb836;
	--mv-teal: #4FA8A8;
	--mv-steelteal: #53848b;
	--mv-steelteal-700: #3F676D;
	--mv-ink: #1F2024;
	--mv-ink-700: #4B4D55;
	--mv-sand: #f7ece1;
	--mv-cream: #FBF6E9;
	--mv-line: #E7E1D2;
	--mv-white: #fff;
	--mv-font: 'Manrope', sans-serif;
	--mv-font-display: 'Prometo', 'Manrope', sans-serif;
	--mv-font-accent: 'Verveine', cursive;
	--mv-header: 44px;
}
@media (min-width: 1024px) {
	:root { --mv-header: 64px; }
}

.mv-icon { display: inline-block; width: 1em; height: 1em; vertical-align: middle; }

/* ---------- Gombok (assets/css/components/_button.css) ---------- */

.mv-btn,
.mv-btn:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	padding: 0 28px;
	border-radius: 9999px;
	font-family: var(--mv-font);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	background: var(--mv-btn-bg, transparent);
	color: var(--mv-btn-color, inherit);
	border: 0;
	transition: background-color .15s, color .15s, border-color .15s;
}
.mv-btn:hover { background: color-mix(in srgb, var(--mv-btn-bg, transparent) 85%, black); color: var(--mv-btn-color, inherit); }
.mv-btn--lg { height: 56px; padding: 0 32px; font-size: 16px; }
.mv-btn--xs { height: 32px; padding: 0 12px; font-size: 14px; }
.mv-btn--pill { width: 50px; padding: 0; }
.mv-btn--pill.mv-btn--xs,
.mv-footer .mv-btn--pill { width: 32px; height: 32px; }
.mv-btn--orange { --mv-btn-bg: var(--mv-orange); --mv-btn-color: var(--mv-steelteal); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1); }
.mv-btn--white { --mv-btn-bg: var(--mv-white); --mv-btn-color: var(--mv-burgundy); }
.mv-btn--outline-white { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .4); }
.mv-btn--outline-white:hover { background: var(--mv-steelteal); color: #fff; border-color: rgba(255, 255, 255, .2); }

/* ---------- Header ---------- */

/* A The7 saját (kikapcsolt) headerének maradványai: görgetéskor beúszó "phantom" sticky header. */
#phantom,
.masthead,
.dt-mobile-header,
.dt-close-mobile-menu-icon { display: none !important; }

.mv-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--mv-header);
	background: var(--mv-burgundy);
	color: #fff;
	font-family: var(--mv-font);
	font-size: 14px;
	font-weight: 700;
}
.admin-bar .mv-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .mv-header { top: 0; } }

.mv-header__brand {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: 16px;
	height: 66.666%;
	padding: 0 8px;
}
.mv-header__brand img { height: 100%; width: auto; }
.mv-header__visa { filter: grayscale(1) brightness(5); }
.mv-header__divider { display: block; width: 1px; height: 100%; background: #fff; opacity: .3; flex-shrink: 0; }

.mv-header__toggle,
.mv-nav__close {
	display: inline-flex;
	align-items: center;
	padding: 12px;
	background: none;
	border: 0;
	color: #fff;
	cursor: pointer;
	font-size: 18px;
}
.mv-header__toggle:focus:not(:focus-visible),
.mv-nav__close:focus:not(:focus-visible),
.mv-nav__parent:focus:not(:focus-visible) { outline: none; }

/* Mobil: off-canvas panel jobbról */
.mv-nav {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 1001;
	width: 320px;
	max-width: 100%;
	height: 100vh;
	height: 100dvh;
	padding: 48px 24px 28px;
	overflow-y: auto;
	background: var(--mv-burgundy);
	transform: translateX(100%);
	transition: transform .15s linear;
}
.mv-header.is-open .mv-nav { transform: translateX(0); }
.mv-header.is-open .mv-header__toggle { visibility: hidden; }
.mv-nav__close { position: absolute; top: 8px; right: 8px; padding: 12px 16px; }

.mv-nav__list,
.mv-nav__sub,
.mv-footer ul { list-style: none; margin: 0; padding: 0; }

.mv-nav__link,
.mv-nav__link:visited,
.mv-nav__sublink,
.mv-nav__sublink:visited,
.mv-nav__tool,
.mv-nav__tool:visited {
	display: flex;
	align-items: center;
	padding: 12px 8px;
	color: #fff;
	font: inherit;
	font-size: 18px;
	text-decoration: none;
	white-space: nowrap;
	background: none;
	border: 0;
	cursor: pointer;
}
.mv-nav__link:hover,
.mv-nav__sublink:hover,
.mv-nav__tool:hover { color: #fff; opacity: .75; }
.mv-nav__link[aria-current],
.mv-nav__sublink[aria-current] { text-decoration: underline; text-underline-offset: 6px; }

.mv-nav__item > .mv-btn { margin: 8px 0; }
.mv-nav__chevron { width: .85em; height: .85em; margin-left: 8px; transition: transform .2s; }
.mv-nav__item.is-open .mv-nav__chevron { transform: rotate(180deg); }

/* Mobil almenü: accordion */
.mv-nav__sub { display: flex; flex-direction: column; max-height: 0; margin-left: 12px; overflow: hidden; transition: max-height .3s; }
.mv-nav__item.is-open > .mv-nav__sub { max-height: 600px; }

.mv-nav__tools { display: flex; flex-direction: column; }
.mv-nav__tool .mv-icon { width: 20px; height: 20px; margin-right: 8px; }
.mv-nav__cart { position: relative; display: inline-flex; }
.mv-cart-count {
	position: absolute;
	top: -4px;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 16px;
	height: 16px;
	padding: 0 3px;
	border-radius: 9999px;
	background: var(--mv-orange);
	color: var(--mv-steelteal);
	font-size: 11px;
	line-height: 1;
}
.mv-cart-count.is-empty { display: none; }

@media (min-width: 1024px) {
	.mv-header__toggle,
	.mv-nav__close,
	.mv-nav__tool-label { display: none; }

	.mv-nav {
		position: static;
		display: flex;
		align-items: center;
		width: auto;
		height: auto;
		padding: 0;
		overflow: visible;
		background: transparent;
		transform: none;
		transition: none;
	}
	.mv-nav__list { display: flex; align-items: center; gap: 8px; }
	.mv-nav__item { position: relative; }
	.mv-nav__link,
	.mv-nav__link:visited,
	.mv-nav__tool,
	.mv-nav__tool:visited { font-size: 14px; padding: 12px 8px; }
	.mv-nav__tools { flex-direction: row; align-items: center; }
	.mv-nav__tool .mv-icon { width: 16px; height: 16px; margin-right: 8px; }

	/* Desktop almenü: lenyíló panel */
	.mv-nav__sub {
		position: absolute;
		top: 40px;
		left: 0;
		z-index: 10;
		display: block;
		width: 176px;
		max-height: none;
		margin: 0;
		padding: 4px 0;
		border-radius: 12px;
		background: var(--mv-steelteal);
		box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .06);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-.5rem) scale(.97);
		transform-origin: top;
		transition: opacity .18s, transform .18s, visibility .18s;
	}
	.mv-nav__item.is-open > .mv-nav__sub { opacity: 1; visibility: visible; transform: none; }
	.mv-nav__sublink,
	.mv-nav__sublink:visited { font-size: 14px; white-space: normal; }
}
@media (min-width: 1280px) {
	.mv-nav__sub { top: 52px; }
	.mv-nav__sublink,
	.mv-nav__sublink:visited { padding: 16px; }
}

/* ---------- Footer ---------- */

.mv-container { max-width: 1280px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 768px) { .mv-container { padding: 0 32px; } }

.mv-footer {
	grid-area: footer; /* a The7 #page CSS grid, elnevezett területekkel */
	position: relative;
	z-index: 10;
	color: #fff;
	font-family: var(--mv-font);
	font-size: 16px;
	line-height: 1.5;
}
.mv-footer__cloud { overflow: hidden; line-height: 0; margin-bottom: -1px; }
.mv-footer__cloud svg { display: block; min-width: 100%; max-width: none; height: auto; }
.mv-footer__cloud .border-cloud { fill: var(--mv-burgundy); }
.mv-footer__body { background: var(--mv-burgundy); padding: 32px 0; }

.mv-footer__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; padding: 24px 0 16px; }
.mv-footer__top img { display: block; }
.mv-footer__actions { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; gap: 12px; }
.mv-footer__actions .mv-btn { width: 100%; }

.mv-separator { display: none; margin: 28px 0; height: 0; border: 0; border-top: 2px dashed var(--mv-teal); background: none; }

.mv-footer__menus { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mv-footer__menus a,
.mv-footer__menus a:visited,
.mv-footer__menus span { display: block; margin: 12px 0; color: #fff; font-size: 15px; font-weight: 600; text-decoration: none; }
.mv-footer__menus a:hover { color: #fff; opacity: .75; }

.mv-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 16px; margin-top: 12px; }
.mv-footer__follow { display: flex; align-items: center; gap: 14px; }
.mv-footer__follow > span { font-size: 15px; font-weight: 700; }
.mv-footer__social { display: inline-flex; align-items: center; gap: 6px; }
.mv-footer__social .mv-icon { max-height: 12px; width: 12px; }

.mv-footer__payments { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
.mv-card { display: inline-flex; align-items: center; height: 40px; padding: 6px 10px; border-radius: 6px; background: #fff; border: 1px solid var(--mv-line); }
.mv-card img { display: block; max-width: 100%; max-height: 100%; width: auto; height: 100%; border-radius: 4px; }

.mv-footer__copy { margin: 28px 0 0; font-size: 12px; font-weight: 500; color: #fff; }

@media (min-width: 1024px) {
	.mv-footer__actions { flex-direction: row; width: auto; margin-left: auto; }
	.mv-footer__actions .mv-btn { width: auto; }
	.mv-footer__top { justify-content: space-between; }
	.mv-separator { display: block; }
	.mv-footer__menus { width: 50%; }
	.mv-footer__payments { margin-left: auto; justify-content: flex-end; }
}

/* ---------- Tipográfia (assets/css/utilities/_typhography.css) ---------- */

.mv-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--mv-burgundy);
	font-family: var(--mv-font);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.mv-eyebrow::before { content: ''; width: 36px; height: 2px; background: currentColor; }

.mv-headline,
h1.mv-headline {
	margin: 16px 0 0;
	color: var(--mv-ink);
	font-family: var(--mv-font-display);
	font-size: clamp(40px, 6vw, 88px);
	font-weight: 700;
	line-height: .95;
	letter-spacing: -0.025em;
}
.mv-headline em { font-family: var(--mv-font-accent); font-style: normal; font-weight: 400; color: var(--mv-burgundy); }

.mv-subtext { max-width: 42rem; margin: 24px 0 0; color: var(--mv-ink-700); font-family: var(--mv-font); font-size: 18px; line-height: 1.625; }

.mv-shop-hero { padding: 24px 0 40px; }