/* ==========================================================================
   messe-display — reset, layout primitives, header, footer
   Geometry from Figma file jo1Z6nHQBGxsEbKcCdJZXc, frame "Home" (18:10).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Reset.
   Fully redesigned pages must NOT load css/styling.css — its .bigCnt-family
   classes float and would fight these layout primitives. (It floats its own
   CLASSES, not element selectors, which is why legacy-body pages can safely
   load both alongside new-ui/legacy-compat.css.)
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.md {
	margin: 0;
	padding: 0;
	font-family: var(--md-font);
	font-size: 15px;
	line-height: 1.5;
	color: var(--md-black);
	background: var(--md-white);
	-webkit-font-smoothing: antialiased;
}

/* These element resets are wrapped in :where() so they carry ZERO specificity
   and every component class beats them.
   Without it `body.md button` (0,1,2) out-ranks `.md-pagebanner__arrow` (0,1,0)
   and silently kills the white circles on the banner and hero arrows, and
   `body.md a` overrides the grey on .md-footer-link. Do not unwrap these. */
:where(body.md img),
:where(body.md svg) { display: block; max-width: 100%; }

:where(body.md a) { color: inherit; text-decoration: none; }

:where(body.md ul) { margin: 0; padding: 0; list-style: none; }

:where(body.md button) {
	font: inherit;
	color: inherit;
	border: 0;
	background: none;
	cursor: pointer;
}

/* --------------------------------------------------------------------------
   Layout primitives
   Sections are padded 15px a side, giving a 1410px content band inside the
   1440px design width (Figma: "Deal of the week" pad=50,15,50,15).
   -------------------------------------------------------------------------- */
.md-container {
	width: 100%;
	max-width: var(--md-container);
	margin-inline: auto;
	padding-inline: 0;
}

.md-section { padding-inline: var(--md-gutter); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

/* Hero pill: Figma 142x49, fill #FFFFFF, cornerRadius 10.
   Label sits at x+32, y+16 -> 32px inline padding. */
.md-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 49px;
	padding: 0 32px;
	border-radius: var(--md-r-10);
	background: var(--md-white);
	color: var(--md-black);
	font-family: var(--md-font);
	font-weight: 700;
	font-size: 14px;
	line-height: 23.8px;
	letter-spacing: 1.05px;
	text-transform: uppercase;
	transition: opacity .18s ease;
}
.md-btn:hover { opacity: .85; }

.md-btn--dark { background: var(--md-black); color: var(--md-white); }

/* Underlined text button — "SHOP NOW" in the promo blocks. */
.md-btn-link {
	display: inline-block;
	padding-bottom: 2px;
	border-bottom: 1px solid currentColor;
	font-family: var(--md-font);
	font-weight: 700;
	font-size: 14px;
	line-height: 23.8px;
	letter-spacing: 1.05px;
	text-transform: uppercase;
	color: var(--md-black);
}
.md-btn-link--inverse { color: var(--md-white); line-height: 24px; }

/* --------------------------------------------------------------------------
   Header — Figma COMPONENT 1440x76, fill #FFFFFF,
   1px #E8E6E1 stroke on the BOTTOM edge only (individualStrokeWeights),
   HORIZONTAL auto-layout pad=20/80/20/80.
   -------------------------------------------------------------------------- */
/* itemSpacing in the Figma frame is 129px, but that is the *resulting* gap at
   exactly 1440 (1280 available − 1013 of content = 267 over two gaps ≈ 133).
   Hard-coding 129px makes the header wider than the viewport at every size
   below 1440 — it overflowed by 309px at 768. `space-between` reproduces the
   design at 1440 and adapts below it. */
/* Three-column grid so the nav is centred on the HEADER, not merely placed
   between the logo and the actions — the two outer columns are equal (1fr) and
   the nav takes only what it needs in the middle. `space-between` on a flex row
   made the nav's position depend on the logo and action widths. */
.md-header {
	position: sticky;
	top: 0;
	z-index: 100;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
	height: 76px;
	padding: 20px var(--md-gutter-header);
	background: var(--md-white);
	border-bottom: 1px solid var(--md-line);
}
.md-header > .md-header__logo    { justify-self: start; }
.md-header > .md-header__nav     { justify-self: center; }
.md-header > .md-header__actions { justify-self: end; }

/* The wordmark is `white-space: nowrap`, so the logo must NOT be shrinkable —
   with `min-width: 0` it collapsed to 157px while the text stayed 228px and
   ran under the nav. Mobile handles the width by dropping the font size. */
.md-header__logo { flex: 0 0 auto; }
.md-header__logo .md-wordmark { margin: 0; white-space: nowrap; }

.md-header__nav {
	display: flex;
	align-items: center;
	gap: 40px;                                    /* Figma nav-links gap */
	flex: 0 1 auto;
	min-width: 0;                                 /* allow shrinking below content */
}
.md-header__nav a:hover { color: var(--md-purple); }

.md-header__actions {
	display: flex;
	align-items: center;
	gap: 24px;                                    /* Figma actions gap */
	flex: 0 0 auto;
}

/* padding:0 matters — the UA default button padding was squeezing the 24px
   icon down to a 12px content box (the reset does not zero padding). */
.md-icon-btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	color: var(--md-black);
}
.md-icon-btn svg { width: 100%; height: 100%; }

/* Cart count bubble — Inter 700/11 #FFFFFF on the brand purple. */
.md-cart-count {
	position: absolute;
	right: -8px;
	bottom: -2px;
	min-width: 15px;
	height: 15px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--md-purple);
	color: var(--md-white);
	font-family: var(--md-font);
	font-weight: 700;
	font-size: 11px;
	line-height: 15px;
	text-align: center;
}

.md-burger { display: none; }

/* --------------------------------------------------------------------------
   Footer — Figma COMPONENT 1440x672.
   footer Container pad=119/0/14/0; Links row pad=61/100/0/100 gap=30.
   -------------------------------------------------------------------------- */
.md-footer { padding: 119px 0 14px; background: var(--md-white); }

/* Newsletter — "Sign Up" 1440x149, pad=0/100/0/100, inner Section 750 wide. */
.md-newsletter {
	max-width: 750px;
	margin-inline: auto;
	padding-inline: var(--md-gutter-footer);
	text-align: center;
}
.md-newsletter__title { margin: 0; }
.md-newsletter__copy { margin: 22px 0 0; font-size: 15px; line-height: 20px; }

/* Form:margin pad-top 27 */
.md-newsletter__form {
	display: flex;
	align-items: center;
	gap: 0;
	margin-top: 27px;
	border-radius: var(--md-r-10);
	background: var(--md-bg-soft);
	overflow: hidden;
}
.md-newsletter__form input[type="email"] {
	flex: 1 1 auto;
	height: 50px;
	padding: 0 24px;
	border: 0;
	background: transparent;
	font-family: var(--md-font);
	font-size: 15px;
	color: var(--md-black);
}
.md-newsletter__form input[type="email"]::placeholder { color: var(--md-grey-3); }
.md-newsletter__form button {
	height: 50px;
	padding: 0 28px;
	border-radius: var(--md-r-10);
	background: var(--md-black);
	color: var(--md-white);
	font-weight: 700;
	font-size: 14px;
	line-height: 24px;
	letter-spacing: 1.05px;
	text-transform: uppercase;
}

/* Link columns — 4 x 308.9 with gap 30 inside a 100px-guttered row. */
.md-footer__links {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px;
	padding: 61px var(--md-gutter-footer) 0;
}
.md-footer__col h3 { margin: 0 0 30px; }
.md-footer__col li { padding: 9px 0; }
.md-footer__col li:first-child { padding-top: 0; }
.md-footer__col a:hover { color: var(--md-black); }

/* Bottom bar — "All rights reserved" 1440x50, 50px side padding, social gap 17. */
.md-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 24px;
	padding: 0 50px;
	min-height: 50px;
}
.md-footer__rights {
	font-size: 15px;
	line-height: 24px;
	letter-spacing: .75px;
	color: var(--md-grey-2);
}
.md-footer__social { display: flex; align-items: center; gap: 17px; }
.md-footer__social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	color: var(--md-black);
}

/* --------------------------------------------------------------------------
   Product card — Figma "Section - n/3": 480x682 with pad 0/15/15/15,
   so the card itself is 450 wide. Image 450x572, meta block 450x95 with
   pad-top 17; title pad-top 6; price row pad-top 15.
   -------------------------------------------------------------------------- */
.md-grid {
	display: grid;
	gap: 0;
	grid-template-columns: repeat(var(--md-cols, 3), 1fr);
}
.md-grid > * { padding: 0 var(--md-gutter) var(--md-gutter); }

.md-card { display: block; }

.md-card__media {
	position: relative;
	width: 100%;
	aspect-ratio: 450 / 572;                      /* Figma 450x572 */
	overflow: hidden;
	background: var(--md-bg-soft);
}
.md-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}
.md-card:hover .md-card__media img { transform: scale(1.03); }

.md-card__meta { padding-top: 17px; }
.md-card__badge { min-height: 22px; }
.md-card__title { margin: 6px 0 0; font-weight: 400; }
.md-card__prices { display: flex; align-items: baseline; gap: 10px; margin-top: 15px; }

/* --------------------------------------------------------------------------
   Section heading row — title left, optional slot centre, "See All" right.
   -------------------------------------------------------------------------- */
.md-sec-head {
	display: flex;
	align-items: center;
	gap: 30px;
	min-height: 50px;
}
.md-sec-head__title { margin: 0; }
.md-sec-head__see {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}

/* Underlined variant used by BESTSELLERS (Figma draws a 1.6px rule under it). */
.md-sec-head__title--ruled { padding-bottom: 8px; border-bottom: 1.6px solid var(--md-black); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
/* Between 1100 and 1440 the desktop header still fits, but only with a
   smaller gutter (80px each side leaves too little for the 1013px of content). */
@media (max-width: 1439px) {
	.md-header { padding-inline: 40px; }
}

/* Below 1100 the seven nav links plus the actions cluster cannot fit on one
   line at any sane font size, so the nav collapses into the burger here — NOT
   at 760, which left 760-1099 overflowing horizontally. */
@media (max-width: 1099px) {
	/* The nav becomes a fixed overlay here, so it leaves the grid flow and the
	   actions would fall into the middle column instead of the right edge.
	   Two in-flow children only — flex with space-between is the right model. */
	.md-header {
		display: flex;
		justify-content: space-between;
		gap: 16px;
		padding-inline: 32px;
	}
	.md-header__nav {
		position: fixed;
		inset: 76px 0 auto 0;
		z-index: 99;
		display: none;
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		padding: 8px 32px 16px;
		background: var(--md-white);
		border-bottom: 1px solid var(--md-line);
		max-height: calc(100dvh - 76px);
		overflow-y: auto;
	}
	.md-header__nav.is-open { display: flex; }
	.md-header__nav a { width: 100%; padding: 14px 0; }
	.md-burger { display: flex; }

	.md-footer__links { padding-inline: 40px; grid-template-columns: repeat(2, 1fr); row-gap: 48px; }
	.md-footer { padding-top: 72px; }
}

@media (max-width: 759px) {
	.md-header { gap: 10px; padding-inline: 16px; height: 64px; }
	.md-header__nav { inset: 64px 0 auto 0; padding-inline: 16px; max-height: calc(100dvh - 64px); }
	/* At 375 the wordmark + five action targets overran by 27px. Tighten the
	   cluster and drop the language *word* (the toggle stays, as a globe). */
	.md-header__actions { gap: 14px; }
	.md-lang { font-size: 0; }
	.md-lang::before {
		content: '';
		display: block;
		width: 20px;
		height: 20px;
		background: currentColor;
		-webkit-mask: var(--md-globe) center/contain no-repeat;
		        mask: var(--md-globe) center/contain no-repeat;
	}
	.md-wordmark { font-size: 20px; line-height: 26px; }

	.md-grid { grid-template-columns: repeat(2, 1fr); }
	.md-footer__links { grid-template-columns: 1fr; padding-inline: 16px; row-gap: 40px; }
	.md-footer__bottom { flex-direction: column; gap: 16px; padding-inline: 16px; text-align: center; }
	.md-newsletter { padding-inline: 16px; }
	.md-newsletter__form { flex-direction: column; gap: 10px; background: none; }
	.md-newsletter__form input[type="email"] { width: 100%; background: var(--md-bg-soft); border-radius: var(--md-r-10); }
	.md-newsletter__form button { width: 100%; }
}

/* Bestseller card image is 330x419 in Figma, not the 450x572 of a deal card. */
.md-card__media--bestseller { aspect-ratio: 330 / 419; }

/* Nav labels must never wrap — "Über uns" / "Exhibition stands" break otherwise. */
.md-header__nav a { white-space: nowrap; }

/* --------------------------------------------------------------------------
   Overflow hardening
   -------------------------------------------------------------------------- */

/* Grid and flex items default to `min-width: auto`, i.e. they refuse to shrink
   below their content's min-content width — so one long word or a default-sized
   input pushes the whole track past the viewport. This was the cause of the
   shop sidebar (+37px at 375) and the dimension inputs (+132px at 768). */
.md-shop > *,
.md-shop__grid > *,
.md-grid > *,
.md-promo > *,
.md-about-cards > *,
.md-about-mv > *,
.md-about-intro > *,
.md-about-approach > *,
.md-acc__body > *,
.md-form__grid > *,
.md-form__dims > *,
.md-contact__cols > *,
.md-footer__links > * { min-width: 0; }

.md-form__dim-row input,
.md-form__field input,
.md-form__field textarea { min-width: 0; }

/* German compounds (Wirtschaftsgemeinschaft, Konferenzaufbau…) are long enough
   to out-measure a narrow column. Let them break rather than overflow. */
body.md h1, body.md h2, body.md h3, body.md h4,
body.md p, body.md li, body.md a, body.md span {
	overflow-wrap: break-word;
}

/* Hyphenation helps narrow body copy but mangles display type — it rendered the
   hero as "LED-Pa-nels" at 375. Body text only. */
body.md p, body.md li { hyphens: auto; }
body.md h1, body.md h2, body.md h3, body.md h4 { hyphens: manual; }

/* At 320 the wordmark plus five action targets exceed the row. The logo cannot
   shrink (its text is nowrap and shrinking made it slide under the nav), so
   trim the type and the icon gap instead. */
@media (max-width: 400px) {
	.md-wordmark { font-size: 16px; line-height: 22px; }
	.md-header__actions { gap: 8px; }
	.md-header { gap: 6px; padding-inline: 10px; }
}

/* ==========================================================================
   Vertical rhythm between page sections.
   The Figma frames stack their blocks flush (each block's own padding does the
   spacing); on the live pages that read as one continuous slab, so sections get
   a consistent gap. One variable keeps it uniform, and it lives here rather
   than in home.css because /exhibition-custom and /print stack the same kind of
   blocks without loading that sheet.
   ========================================================================== */
:root { --md-sec-gap: 80px; }

.md-sec + .md-sec { margin-top: var(--md-sec-gap); }
/* The hero is full-bleed and sits directly under the header; the first section
   after it needs the same breathing room. */
.md-hero ~ .md-sec { margin-top: var(--md-sec-gap); }

@media (max-width: 1099px) { :root { --md-sec-gap: 56px; } }
@media (max-width: 759px)  { :root { --md-sec-gap: 40px; } }