

html, body { max-width: 100%; overflow-x: clip; }

/* Media and embeds never exceed their container. */
img, svg, video, canvas, iframe, embed, object, figure, picture {
	max-width:100%;
}
img, video, canvas { height: auto; }
pre, code, kbd, samp { overflow-x: auto; max-width: 100%; }

h1, h2, h3, h4, h5, h6,
[class*='lockup'], [class*='display'], [class*="headline"], [class*="title"],
[class*="hero"] h1, [class*="hero"] h2 {
	overflow-wrap:break-word;
	word-break:normal;
	hyphens:auto;
}
[class*='lockup'], [class*='lockup'] > * { white-space: normal !important; }

/* Long unbroken strings (URLs, emails, ids) wrap rather than overflow. */
p, li, dd, dt, blockquote, figcaption, address, a, span, td, th {
	overflow-wrap:break-word;
}

/* Grid and flex children may shrink below their content so a single wide
	child cannot force the whole track past the viewport. */
[class*="grid"] > *, [class*="row"] > *, [class*='flex'] > *,
[class*='cols'] > *, [class*='columns'] > * { min-width: 0; }

:not(img):not(picture):not(svg):not(video):not(canvas):only-child {
	grid-column:1 / -1;
}

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) {
	animation-duration:.28s;
}
@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) { animation: none !important; }
}

.dulu7c8 { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dulu7c8 > table { min-width: max-content; }
@media (max-width: 48rem) {
	.dulu7c8 > table { font-size: .94em; }
}
	The cell widths go back with the display. A stacking rule sets
	`width: 100%` on the cells along with `display: block`, which is right
	for a block and ruinous for a cell: a table is as wide as its cells ask
	to be, so every cell asking for the whole table makes the table ask for
	the whole table again. Taking back only the display left a two-column
	table on a vet's site a million pixels wide, with the row headings on
	the phone and every value scrolled off the side of it. */
.dulu7c8 > table,
.dulu7c8 > table > thead, .dulu7c8 > table > tbody,
.dulu7c8 > table > tfoot, .dulu7c8 > table tr,
.dulu7c8 > table th, .dulu7c8 > table td { display: revert; }
.dulu7c8 > table th, .dulu7c8 > table td {
	inline-size:auto;
	min-inline-size:0;
}

@media (max-width: 30rem) {
	:root {
		--nufe-3a0:clamp(2.2rem, 9vw, 3rem);
		--nufe-911:clamp(2rem, 8vw, 2.7rem);
		--nufe-a27:clamp(1.8rem, 7vw, 2.4rem);
		--nufe-7a6:clamp(1.55rem, 6vw, 2.05rem);
		--nufe-9a5:clamp(1.35rem, 5vw, 1.8rem);

	}
}
@media (min-width: 30.01rem) and (max-width: 48rem) {
	:root {
		--nufe-3a0:clamp(2.8rem, 8vw, 4.6rem);
		--nufe-911:clamp(2.5rem, 7vw, 4rem);
		--nufe-a27:clamp(2.2rem, 6vw, 3.4rem);
	}
}

/* Touch targets stay usable. */
@media (pointer: coarse) {
	a.btn, button, [role="button"], .btn,
	input[type="submit"], input[type="button"] { min-height: 44px; }
}


/* Consent bar — bounded so it cannot cover the headline. */
.consent-banner {
	max-height:20vh;
	overflow:auto;
	top:auto;
	bottom:0;
}
@media (max-width: 30rem) {

	.consent-banner { max-height: 38vh; }
}

/* MEASURED: grids found holding text in a chimney */
div.catalogue-row { grid-template-columns: none !important; }
