/* =========================================================================
   Black Friday landing page — 2026 redesign
   =========================================================================

   Loaded on /black-friday/ and nowhere else (see bf-core.php), and every rule
   below is additionally nested under `.ms-bf`, a class that exists on no other
   template. That double guard is what keeps the black/yellow add-to-cart
   buttons on this page instead of leaking into the shop.

   The theme's own product-card rules are written with !important throughout,
   so the overrides here match that weight rather than fighting it with ever
   longer selectors.

   Motion: none, anywhere. No transitions, no transforms, no animation — the
   locked design direction is instant snap.
   ========================================================================= */

.ms-bf {
	/* Ink */
	--bf-ink: #0b0b0c;
	--bf-ink-2: #17171a;
	--bf-ink-3: #26262b;

	/* The Black Friday accent. 13.8:1 against --bf-ink. */
	--bf-yellow: #ffd400;
	--bf-yellow-deep: #d9a900;

	/* Paper */
	--bf-paper: #ffffff;
	--bf-shell: #f6f5f2;
	--bf-line: #e3e1dc;

	/* Brand teal, kept for links inside the article */
	--bf-teal: #214249;

	--bf-text: #14161a;
	--bf-muted: #5f5c57;

	--bf-pad: 12px;
	--bf-radius: 12px;

	font-family: 'Inter', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
	color: var(--bf-text);
}

/* Belt and braces: nothing inside this page animates. */
.ms-bf *,
.ms-bf *::before,
.ms-bf *::after {
	transition: none !important;
	animation: none !important;
}

.ms-bf__inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 var(--bf-pad);
	box-sizing: border-box;
}

.ms-bf .ms-bf-section-title {
	margin: 0 0 4px;
	font-size: 19px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--bf-ink);
}

.ms-bf .ms-bf-section-note {
	margin: 0 0 12px;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--bf-muted);
}

/* =========================================================================
   1. Hero
   -------------------------------------------------------------------------
   The brief: the old hero ate a third of the phone screen and sold nothing.
   This one is a single band that answers "is this worth my time" in three
   numbers, and hands the rest of the screen back to the products.
   ========================================================================= */

/* `display` is forced: the theme styles the site's own <header> as a grid, and
   that rule reaches this one too, which broke the desktop layout into columns.

   `border` and `border-radius` are reset for a different reason: style.min.css
   still carries `.ms-bf-hero{...;border:1px solid #f2dcc2;border-radius:8px}`
   left over from the first Black Friday design, the one that was deleted. That
   rule is 0-1-0 and this one is 0-2-0, so it loses every property it shares
   with this block — but it kept the two this block never declared, and painted
   a cream hairline across the top and bottom of the black band. Declaring them
   here closes the gap without touching the shared stylesheet, which is full of
   unrelated work in progress. */
.ms-bf .ms-bf-hero {
	display: block !important;
	margin: 0 calc(var(--bf-pad) * -1) 0;
	padding: 14px var(--bf-pad) 13px;
	border: 0;
	border-radius: 0;
	background: var(--bf-ink);
	color: #fff;
	text-align: center;
}

.ms-bf-hero__eyebrow {
	margin: 0 0 5px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bf-yellow);
}

/* The H1 wording is untouched — it is the page's ranking headline — but it is
   set at a size that leaves room for the first row of products. */
.ms-bf .ms-bf-hero__title {
	margin: 0 0 8px;
	font-size: 23px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: #fff;
	text-align: center;
}

.ms-bf .ms-bf-hero__lead {
	margin: 0 auto 10px;
	max-width: 34em;
	font-size: 13.5px;
	line-height: 1.4;
	color: #e6e4df;
}

.ms-bf .ms-bf-hero__lead strong {
	color: var(--bf-yellow);
	font-weight: 700;
}

.ms-bf .ms-bf-hero__date {
	margin: 6px 0 0;
	font-size: 11px;
	line-height: 1.3;
	color: #8f8b84;
}

/* --- Countdown -----------------------------------------------------------
   Reuses the site's existing countdown script and element id; only the
   presentation changes. Four stacked boxes become one quiet line, because on
   11 August the honest message is "the deals are already here", not a
   four-figure clock counting to November. */

/* `display` and `width` are forced: the site-wide stylesheet lays this element
   out as a full-bleed flex row, which stretched the pill across the whole hero
   and left a hand's width of empty tint on either side of the clock.

   `:not([hidden])` is not decoration. On `?bf=live` the hero renders a hidden
   stand-in element for the parent theme's timer script to write into, and
   `[hidden]` is only specificity 0-1-0 even with `!important` — this rule at
   0-2-0 outranked it, so the stand-in appeared as a second pill and the page
   showed "KUN i dag" and a countdown to November at the same time. */
.ms-bf p#black_friday_countdown:not([hidden]),
.ms-bf .ms-bf-countdown:not([hidden]) {
	display: inline-flex !important;
	width: auto !important;
	max-width: 100%;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 3px 10px;
	margin: 0;
	padding: 9px 16px;
	border: 1px solid rgba(255, 212, 0, 0.35);
	border-radius: 18px;
	background: rgba(255, 212, 0, 0.07);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
	text-align: center;
}

/* "Black Friday starter om" is the sentence the clock finishes, so it is set at
   reading size rather than as a caption. It takes the whole first line on a
   phone and the numbers sit under it, which reads in the order it is spoken. */
.ms-bf .ms-bf-countdown__label {
	flex: 1 0 100%;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0;
	color: var(--bf-yellow);
	text-transform: none;
}

/* The site-wide stylesheet gives these items a padded, tinted box each, which
   is what turned the countdown into four tiles and half a phone screen. Here
   they are stripped back to plain inline numbers. */
.ms-bf p#black_friday_countdown .ms-bf-countdown__item,
.ms-bf .ms-bf-countdown .ms-bf-countdown__item {
	display: inline-flex !important;
	align-items: baseline !important;
	gap: 2px !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	font-variant-numeric: tabular-nums;
}

.ms-bf p#black_friday_countdown .ms-bf-countdown__item strong,
.ms-bf .ms-bf-countdown .ms-bf-countdown__item strong {
	display: inline !important;
	margin: 0 !important;
	font-size: 22px !important;
	font-weight: 800 !important;
	line-height: 1.1 !important;
	letter-spacing: -0.02em !important;
	color: #fff !important;
}

.ms-bf p#black_friday_countdown .ms-bf-countdown__item small,
.ms-bf .ms-bf-countdown .ms-bf-countdown__item small {
	display: inline !important;
	margin: 0 !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: #bdb9b1 !important;
}

.ms-bf p#black_friday_countdown .ms-bf-countdown__label,
.ms-bf .ms-bf-countdown .ms-bf-countdown__label {
	display: inline !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
}

.ms-bf .ms-bf-countdown--live {
	border-color: var(--bf-yellow);
	background: var(--bf-yellow);
	color: var(--bf-ink);
	font-weight: 800;
}

/* =========================================================================
   2. Delivery / shipping / returns
   -------------------------------------------------------------------------
   Every figure here is read off the shop's own settings, not invented.
   ========================================================================= */

.ms-bf .ms-bf-trust {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 12px;
	margin: 0 calc(var(--bf-pad) * -1) 14px;
	padding: 8px var(--bf-pad);
	list-style: none;
	background: var(--bf-ink-2);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ms-bf .ms-bf-trust li {
	position: relative;
	margin: 0;
	padding-left: 15px;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.3;
	color: #efeee9;
	list-style: none;
}

/* The trust strip loses its bottom margin — the payment plate closes the band
   instead, so the two read as one block rather than two stacked bars. */
.ms-bf .ms-bf-trust {
	margin-bottom: 0;
	padding-bottom: 9px;
}

/* Dark artwork on a black band needs its own ground. A white plate, sized to
   the marks and no wider, keeps them readable without turning six little logos
   into the loudest thing above the fold. */
.ms-bf .ms-bf-pay {
	display: flex;
	justify-content: center;
	margin: 0 calc(var(--bf-pad) * -1) 14px;
	padding: 0 var(--bf-pad) 10px;
	background: var(--bf-ink-2);
}

.ms-bf .ms-bf-pay__marks {
	display: block;
	width: auto;
	max-width: 100%;
	height: 26px;
	padding: 5px 10px;
	background: #fff;
	border-radius: 8px;
	object-fit: contain;
	box-sizing: content-box;
}

/* Tick drawn in CSS — no extra image request, and it inherits the yellow. */
.ms-bf .ms-bf-trust li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 3px;
	width: 4px;
	height: 8px;
	border: solid var(--bf-yellow);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* =========================================================================
   3. The shop area
   ========================================================================= */

.ms-bf-shop {
	padding: 4px 0 8px;
}

/* The products get the edges of the phone. Everything else on the page keeps
   the 12px gutter, but a two-column grid is the one place where six pixels of
   margin is six pixels off every product photo — so the shop block runs
   narrower gutters and hands the difference to the cards. */
.ms-bf .ms-bf-shop .ms-bf__inner {
	padding-left: 8px;
	padding-right: 8px;
}

/* =========================================================================
   4. v3 chooser — the picture-led starting point
   ========================================================================= */

.ms-bf-chooser {
	margin: 16px 0 22px;
}

.ms-bf-chooser__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}

.ms-bf-chooser__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 112px;
	padding: 14px 10px;
	background: var(--bf-paper);
	border: 2px solid var(--bf-ink);
	border-radius: var(--bf-radius);
	text-align: center;
	text-decoration: none;
	color: var(--bf-ink);
}

.ms-bf-chooser__logo {
	width: auto;
	max-width: 96px;
	height: 34px;
	object-fit: contain;
}

.ms-bf-chooser__title {
	font-size: 14.5px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--bf-ink);
}

.ms-bf-chooser__meta {
	font-size: 12px;
	font-weight: 600;
	color: var(--bf-muted);
}

/* =========================================================================
   5. Controls — one row, with everything behind it
   -------------------------------------------------------------------------
   Two earlier attempts put the filters on the page itself: side-scrolling
   rows that hid four options in five, then open grids that pushed the first
   product 923px down. Both got between a shopper and the deals she came for.

   Now the whole thing is one row. There is nothing to scroll past, products
   begin almost immediately, and every option is one tap away — laid out in
   full, nothing hidden sideways.
   ========================================================================= */

.ms-bf-controls {
	margin: 14px 0 10px;
}

.ms-bf-bar {
	display: block;
}

/* Unmistakably a button: full-width black tile, yellow type, a funnel on the
   left and a chevron on the right that says "this opens something". It is a
   <label> for the checkbox that holds the panel's state, so it works with
   JavaScript switched off — but nothing about it should read as a heading. */
.ms-bf .ms-bf-bar__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 52px;
	margin: 0;
	padding: 12px 14px;
	background: var(--bf-ink);
	border: 1.5px solid var(--bf-ink);
	border-radius: 12px;
	box-shadow: 0 2px 0 0 var(--bf-yellow-deep);
	color: var(--bf-yellow);
	font-size: 15.5px;
	font-weight: 800;
	line-height: 1.15;
	text-align: center;
	cursor: pointer;
}

/* A funnel, drawn in CSS — it reads as "narrow this down" without a word. */
.ms-bf .ms-bf-bar__toggle::before {
	content: "";
	flex: 0 0 auto;
	width: 14px;
	height: 11px;
	background: currentColor;
	clip-path: polygon(0 0, 100% 0, 60% 45%, 60% 100%, 40% 78%, 40% 45%);
}

/* Chevron. Points down when shut, up when open — the one bit of state the
   button carries besides its wording. */
.ms-bf .ms-bf-bar__toggle::after {
	content: "";
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	margin-left: 1px;
	border-right: 2.5px solid currentColor;
	border-bottom: 2.5px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
}

.ms-bf .ms-bf-reveal__input:checked ~ .ms-bf-bar .ms-bf-bar__toggle::after {
	transform: rotate(-135deg) translate(-3px, -3px);
}

.ms-bf .ms-bf-bar__close {
	display: none;
}

/* One plain line saying what the button does. Someone who has never used a
   filter on a shop before does not know that "find den rigtige gave" means
   "narrow 596 products down" until it is said out loud. */
.ms-bf .ms-bf-bar__help {
	margin: 6px 0 0;
	font-size: 12.5px;
	line-height: 1.35;
	color: var(--bf-muted);
	text-align: center;
}

.ms-bf .ms-bf-reveal__input:checked ~ .ms-bf-bar .ms-bf-bar__help {
	display: none;
}

/* The checkbox is the panel's state. It never shows; the label is the button. */
.ms-bf .ms-bf-reveal__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Keyboard users still need to see where focus is. */
.ms-bf .ms-bf-reveal__input:focus-visible ~ .ms-bf-bar .ms-bf-bar__toggle {
	outline: 3px solid var(--bf-yellow);
	outline-offset: 2px;
}

.ms-bf .ms-bf-reveal__input:checked ~ .ms-bf-bar .ms-bf-bar__open {
	display: none;
}

.ms-bf .ms-bf-reveal__input:checked ~ .ms-bf-bar .ms-bf-bar__close {
	display: inline;
}

/* How many filters are on, so the state is legible with the panel shut. */
.ms-bf .ms-bf-bar__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	background: var(--bf-yellow);
	border-radius: 999px;
	color: var(--bf-ink);
	font-size: 12px;
	font-weight: 800;
}

.ms-bf .ms-bf-bar__badge[hidden] {
	display: none;
}

/* Result count on the left, sorting on the right. */
.ms-bf-summaryrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin: 10px 0 8px;
}

.ms-bf-sort {
	display: flex;
	align-items: center;
	margin: 0;
}

.ms-bf .ms-bf-sort__label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.ms-bf .ms-bf-sort__select {
	min-height: 44px;
	padding: 6px 28px 6px 11px;
	background: var(--bf-paper);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%230b0b0c' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 9px 6px;
	border: 1.5px solid var(--bf-line);
	border-radius: 10px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--bf-text);
	-webkit-appearance: none;
	appearance: none;
}

/* --- The panel ----------------------------------------------------------- */

.ms-bf .ms-bf-panel {
	display: none;
	margin-top: 8px;
	padding: 10px;
	background: var(--bf-shell);
	border: 1.5px solid var(--bf-line);
	border-radius: 12px;
}

.ms-bf .ms-bf-reveal__input:checked ~ .ms-bf-panel {
	display: block;
}

/* Each question is its own white card on the grey panel. Three questions in a
   row on one flat surface is a form; three cards is three questions, and it is
   obvious at a glance where one ends and the next begins. */
.ms-bf-panel__group {
	margin: 0 0 8px;
	padding: 11px 10px 12px;
	background: var(--bf-paper);
	border: 1px solid var(--bf-line);
	border-radius: 10px;
}

.ms-bf .ms-bf-panel__legend {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 9px;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.25;
	color: var(--bf-ink);
}

/* The step number. Not decoration: it tells someone who has never filtered a
   shop that these are three questions in order, and that stopping after the
   first one is allowed. */
.ms-bf .ms-bf-panel__step {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 21px;
	height: 21px;
	background: var(--bf-ink);
	border-radius: 999px;
	color: var(--bf-yellow);
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
}

.ms-bf .ms-bf-panel__hint {
	margin-left: auto;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--bf-muted);
	white-space: nowrap;
}

.ms-bf .ms-bf-panel__unit {
	font-weight: 500;
	color: var(--bf-muted);
}

.ms-bf-panel__foot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding-top: 4px;
}

.ms-bf .ms-bf-panel__done {
	width: 100%;
	cursor: pointer;
}

.ms-bf .ms-bf-panel__reset {
	padding: 4px 0;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--bf-teal);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ms-bf .ms-bf-panel__reset[hidden] {
	display: none;
}

.ms-bf .ms-bf-summary {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--bf-ink);
}

/* Nothing scrolls sideways. A horizontal scroller fits a long list into one
   line, but it also hides most of it: on a 390px phone the universe row showed
   3 of 16 options across 1,764px of hidden width, so a shopper had no way of
   knowing Harry Potter was in there. Everything wraps and stays on screen. */
/* Fixed columns rather than free wrapping. Ragged rows of pills waste a
   surprising amount of height on a narrow screen, and an even grid is also
   easier to read down. */
.ms-bf-chips {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 6px;
	margin: 0;
	padding: 0;
}

.ms-bf-chips--prices {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Label above, count below: the pair fits a narrow column that "Bamser 55"
   set side by side never would. */
.ms-bf-chips .ms-bf-chip {
	flex-direction: column;
	justify-content: center;
	gap: 1px;
	min-height: 46px;
	padding: 6px 4px;
	border-radius: 10px;
	white-space: normal;
	text-align: center;
}

.ms-bf-chips .ms-bf-chip__label {
	font-size: 13px;
	font-weight: 700;
}

.ms-bf-chips .ms-bf-chip__count {
	padding: 0;
	background: none;
	font-size: 10.5px;
}

.ms-bf-chips .ms-bf-chip.is-active {
	position: relative;
}

.ms-bf-chips .ms-bf-chip__off {
	position: absolute;
	top: 1px;
	right: 5px;
	font-size: 13px;
}

.ms-bf .ms-bf-chip {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 5px;
	min-height: 40px;
	padding: 7px 11px;
	background: var(--bf-paper);
	border: 1.5px solid var(--bf-line);
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.1;
	color: var(--bf-text);
	text-decoration: none;
	white-space: nowrap;
}

/* The × on the chosen chip: tapping it again is how you clear the filter. */
.ms-bf .ms-bf-chip__off {
	margin-left: 1px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	color: currentColor;
	opacity: 0.75;
}

/* --- Universe tiles ------------------------------------------------------
   Four to a row on a phone, logo above the count. A logo is recognised
   faster than a word, and stacking the number under it keeps the tile narrow
   enough that eight fit in two rows without a single swipe. */
.ms-bf-tiles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 6px;
}

.ms-bf .ms-bf-chip--tile {
	flex-direction: column;
	justify-content: center;
	gap: 3px;
	min-height: 56px;
	padding: 6px 4px;
	border-radius: 10px;
	white-space: normal;
	text-align: center;
}

.ms-bf .ms-bf-chip--tile .ms-bf-chip__logo {
	max-width: 100%;
	height: 20px;
	object-position: center;
}

.ms-bf .ms-bf-chip--tile .ms-bf-chip__count {
	padding: 0;
	background: none;
	font-size: 10.5px;
}

.ms-bf .ms-bf-chip--tile .ms-bf-chip__off {
	position: absolute;
	top: 2px;
	right: 5px;
	font-size: 13px;
}

.ms-bf .ms-bf-chip--tile.is-active {
	position: relative;
}

.ms-bf .ms-bf-chip.is-active {
	background: var(--bf-ink);
	border-color: var(--bf-ink);
	color: var(--bf-yellow);
	font-weight: 700;
}

/* Nothing behind this one, given what is already chosen. Left in place so the
   row does not reshuffle, but visibly out of play. */
.ms-bf .ms-bf-chip.is-empty {
	opacity: 0.35;
	pointer-events: none;
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

.ms-bf .ms-bf-chip__count {
	display: inline-block;
	padding: 2px 6px;
	background: var(--bf-shell);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	color: var(--bf-muted);
	font-variant-numeric: tabular-nums;
}

.ms-bf .ms-bf-chip.is-active .ms-bf-chip__count {
	background: rgba(255, 212, 0, 0.16);
	color: var(--bf-yellow);
}

.ms-bf .ms-bf-chip__logo {
	width: auto;
	max-width: 54px;
	height: 22px;
	object-fit: contain;
	object-position: center;
}

/* The name stays on the tile alongside the mark. Several of these logos —
   Paw Patrol, Bluey, Frost — are unreadable at 20px, and the shopper this
   page is built for should never have to squint to identify a character. */
.ms-bf .ms-bf-chip--tile .ms-bf-chip__label {
	font-size: 11px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--bf-text);
}

/* =========================================================================
   7. Product grid
   -------------------------------------------------------------------------
   The theme lays products out with flex + !important. A grid is swapped in
   here so that every "vis flere" batch drops into the same set of columns
   instead of starting a fresh list underneath the last one.
   ========================================================================= */

.ms-bf .ms-bf-gridwrap {
	margin: 0;
}

.ms-bf .ms-bf-gridwrap ul.products.ms-bf-grid {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 8px !important;
	margin: 0 0 16px !important;
	padding: 0 !important;
	list-style: none !important;
}

.ms-bf .ms-bf-gridwrap ul.products.ms-bf-grid li.product {
	flex: none !important;
	width: auto !important;
	max-width: none !important;
	display: flex !important;
	flex-direction: column !important;
	margin: 0 !important;
	padding: 0 !important;
	background: var(--bf-paper) !important;
	border: 1px solid var(--bf-line) !important;
	border-radius: var(--bf-radius) !important;
	overflow: hidden !important;
	box-shadow: none !important;
}

.ms-bf .ms-bf-gridwrap ul.products.ms-bf-grid li.product > a.woocommerce-LoopProduct-link {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	padding: 0 0 8px !important;
}

/* --- Badges --------------------------------------------------------------
   The red sale pill becomes the page's signature: black tile, yellow figure.
   The percentage stands on its own — the word above it was a label on a number
   that was never in doubt, and it made the badge two lines tall. */

.ms-bf .ms-bf-gridwrap ul.products li.product .onsale.discount-percentage,
.ms-bf .ms-bf-gridwrap ul.products li.product span.onsale.discount-percentage {
	top: 6px !important;
	left: 6px !important;
	padding: 5px 8px !important;
	background: var(--bf-ink) !important;
	color: var(--bf-yellow) !important;
	font-size: 14.5px !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	letter-spacing: -0.02em !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	text-align: center !important;
	font-variant-numeric: tabular-nums !important;
}

/* Populær / Sidste chance — quieter, so the discount badge stays the loudest
   thing on the card.

   The theme writes these as "🔥Populær" with no space, and WordPress used to
   paper over that by swapping the emoji for an <img> that carried its own
   margin. This page no longer loads that script — it was 24 requests to an
   outside host for two characters the font already has — so the two now sit
   flush. There is no CSS way to part them: the badge is a flex container with
   a single anonymous text item, which rules out both `::first-letter` and
   `gap`. It reads cleanly at this size, so it is left alone rather than
   rebuilt through a theme hook for three pixels. */
.ms-bf .ms-bf-gridwrap ul.products li.product .onsale.best-seller,
.ms-bf .ms-bf-gridwrap ul.products li.product span.onsale.best-seller,
.ms-bf .ms-bf-gridwrap ul.products li.product .last-chance,
.ms-bf .ms-bf-gridwrap ul.products li.product .onsale.new-badge,
.ms-bf .ms-bf-gridwrap ul.products li.product span.onsale.new-badge {
	top: 6px !important;
	right: 6px !important;
	padding: 3px 6px !important;
	background: rgba(255, 255, 255, 0.94) !important;
	color: var(--bf-ink) !important;
	border: 1px solid var(--bf-ink) !important;
	border-radius: 5px !important;
	font-size: 8.5px !important;
	font-weight: 800 !important;
	letter-spacing: 0.04em !important;
	box-shadow: none !important;
}

/* --- Title, price, saving ------------------------------------------------ */

/* Two lines, then ellipsis: every card in a row ends up the same height
   without cropping the title so hard the product stops being recognisable.
   Only the -webkit- clamp is used here — the standard `line-clamp` property
   blockifies the element to `flow-root`, which fights the theme's own
   -webkit-box rule and cuts the second line in half. */
.ms-bf .ms-bf-gridwrap ul.products.ms-bf-grid li.product h2.woocommerce-loop-product__title {
	margin: 10px 9px 4px !important;
	padding: 0 !important;
	min-height: 36px !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	line-height: 1.34 !important;
	color: var(--bf-text) !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
}

/* Old price, new price and the saving all live in this one row. `row-gap` is
   deliberately tiny: on a card too narrow to hold all three, the saving drops
   to a second line inside the same box, which costs ~15px instead of the ~27px
   a separate block underneath used to. */
.ms-bf .ms-bf-gridwrap ul.products.ms-bf-grid li.product .price {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: baseline !important;
	gap: 3px 3px !important;

	/* 7px, where the title and the button sit at 9px. Those two pixels either
	   side are what tip the last of the 24 products onto one line, and against
	   a digit's own side bearing the edges still read as flush. */
	margin: 0 7px !important;
	padding: 0 !important;
	font-size: 16px !important;
	font-weight: 800 !important;
	line-height: 1.3 !important;
	color: var(--bf-ink) !important;
}

.ms-bf .ms-bf-gridwrap ul.products li.product .price del,
.ms-bf .ms-bf-gridwrap ul.products li.product .price del .amount {
	font-size: 11px !important;
	font-weight: 500 !important;
	color: #8b8880 !important;
	text-decoration: line-through !important;
	opacity: 1 !important;
}

/* "Kr." is said twice on this line already, and the third time costs 22px —
   which is the difference between the saving riding along on the price line
   and being pushed onto one of its own. The struck-through number keeps its
   meaning without the unit, because the live price right beside it carries it. */
.ms-bf .ms-bf-gridwrap ul.products li.product .price del .woocommerce-Price-currencySymbol {
	display: none !important;
}

.ms-bf .ms-bf-gridwrap ul.products li.product .price ins,
.ms-bf .ms-bf-gridwrap ul.products li.product .price ins .amount {
	font-size: 16px !important;
	font-weight: 800 !important;
	color: var(--bf-ink) !important;
	text-decoration: none !important;
	background: none !important;
}

/* The saving, in kroner. "-61%" is a sum to do; "Du sparer 79 kr." is the
   answer. On a Black Friday page it is also the whole point of the visit.

   It sits inside the price row, so it is sized to share that line rather than
   own one: no top margin, tight padding, and a size that lets a full
   "Du sparer 119,05 Kr." ride alongside two prices on any card above ~250px. */
.ms-bf .ms-bf-gridwrap ul.products li.product .ms-bf-save {
	display: inline-block;
	padding: 2px 3px;
	background: var(--bf-yellow);
	border-radius: 5px;
	font-size: 10px;
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: -0.005em;
	color: var(--bf-ink);
	white-space: nowrap;
}

.ms-bf .ms-bf-gridwrap ul.products li.product .ms-bf-save .amount,
.ms-bf .ms-bf-gridwrap ul.products li.product .ms-bf-save bdi {
	font-size: inherit !important;
	font-weight: 800 !important;
	color: inherit !important;
}

/* --- Phones: the short form ----------------------------------------------
   Both figures ship in the markup and the width decides which one is on show.
   On a 176px card "Spar 9,05 Kr." is 194px of content and drops to a second
   line; "9 kr." is 156px and rides along with both prices. Measured on the
   live grid: 24 of 24 products on one line, 21px shorter per card, with the
   current price still at its full size. */
.ms-bf .ms-bf-gridwrap ul.products li.product .ms-bf-save.has-short .ms-bf-save__long {
	display: none;
}

/* The word is clipped, not deleted: screen readers still say "Spar 9 kr.", so
   the number is never a bare figure sitting next to two prices. */
.ms-bf .ms-bf-gridwrap ul.products li.product .ms-bf-save__word {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Viabill's instalment widget is noise at this size. */
.ms-bf .ms-bf-gridwrap ul.products li.product .viabill-pricetag {
	display: none !important;
}

/* --- Add to cart ---------------------------------------------------------
   The one rule the brief is most specific about: black tile, yellow type.
   Scoped three ways over — page-only stylesheet, `.ms-bf` wrapper, and the
   grid class — so it cannot reach any other template. */

.ms-bf .ms-bf-gridwrap ul.products li.product a.button,
.ms-bf .ms-bf-gridwrap ul.products li.product a.add_to_cart_button,
.ms-bf .ms-bf-gridwrap ul.products li.product a.button.product_type_simple,
.ms-bf .ms-bf-gridwrap ul.products li.product a.button.product_type_variable,
.ms-bf .ms-bf-gridwrap ul.products li.product .added_to_cart {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: calc(100% - 18px) !important;
	min-height: 44px !important;

	/* The 14px at the bottom is the theme's own card spacing, measured off the
	   category pages, so a Black Friday card ends exactly like every other card
	   in the shop. It has to live in this shorthand: the selector list above
	   includes `a.button.product_type_simple`, which outranks any later rule
	   written as plain `a.button`, and a separate `margin-bottom` there was
	   silently losing — which is why the button sat 1px off the card border. */
	margin: 10px 9px 14px !important;
	padding: 10px 8px !important;
	background: var(--bf-ink) !important;
	background-color: var(--bf-ink) !important;
	border: 1.5px solid var(--bf-ink) !important;
	border-radius: 8px !important;
	color: var(--bf-yellow) !important;
	font-family: inherit !important;
	font-size: 13.5px !important;
	font-weight: 800 !important;
	line-height: 1.15 !important;
	letter-spacing: 0.01em !important;
	text-align: center !important;
	text-decoration: none !important;
	text-transform: none !important;
	box-shadow: none !important;
}

.ms-bf .ms-bf-gridwrap ul.products li.product a.button:hover,
.ms-bf .ms-bf-gridwrap ul.products li.product a.button:focus-visible,
.ms-bf .ms-bf-gridwrap ul.products li.product a.add_to_cart_button:hover,
.ms-bf .ms-bf-gridwrap ul.products li.product a.add_to_cart_button:focus-visible {
	background: #000 !important;
	background-color: #000 !important;
	border-color: var(--bf-yellow) !important;
	color: var(--bf-yellow) !important;
}

/* Cards in a row line up because the loop link above is `flex: 1 1 auto` and
   absorbs the slack; no `margin-top: auto` is needed, and one written here
   never applied anyway for the reason given above. */

/* WooCommerce's "Vis kurv" confirmation link, once something is added. */
.ms-bf .ms-bf-gridwrap ul.products li.product a.added_to_cart {
	background: var(--bf-paper) !important;
	background-color: var(--bf-paper) !important;
	border-color: var(--bf-ink) !important;
	color: var(--bf-ink) !important;
	margin-top: 6px !important;
}

/* --- Stock pill ---------------------------------------------------------- */

.ms-bf .ms-bf-gridwrap ul.products li.product .stock.in-stock {
	background: rgba(255, 255, 255, 0.95) !important;
	border: 1px solid var(--bf-line) !important;
	border-radius: 5px !important;
	padding: 2px 6px !important;
	font-size: 9.5px !important;
	font-weight: 700 !important;
	color: #15803d !important;
}

/* =========================================================================
   8. Show more
   ========================================================================= */

.ms-bf-more {
	padding: 4px 0 8px;
	text-align: center;
}

.ms-bf .ms-bf-more__count {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 500;
	color: var(--bf-muted);
}

.ms-bf .ms-bf-more__count strong {
	font-weight: 800;
	color: var(--bf-ink);
	font-variant-numeric: tabular-nums;
}

.ms-bf .ms-bf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 13px 26px;
	background: var(--bf-ink);
	border: 1.5px solid var(--bf-ink);
	border-radius: 10px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.15;
	color: var(--bf-yellow);
	text-decoration: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/* "Vis flere varer" is the buy button's inverse: yellow tile, black type.
   Same two colours, swapped — which reads as "same family, different job",
   where an identical black-and-yellow tile read as a 25th add-to-cart. It sits
   alone at the end of the grid with white all around it, so it can afford to
   be the brightest thing there: at that point in the page it *is* the next
   step. Hover flips it back to the buy button's colours. */
.ms-bf .ms-bf-btn--more {
	width: 100%;
	max-width: 340px;
	background: var(--bf-yellow);
	border-color: var(--bf-yellow);
	color: var(--bf-ink);
}

.ms-bf .ms-bf-btn--more:hover,
.ms-bf .ms-bf-btn--more:focus-visible {
	background: var(--bf-ink);
	border-color: var(--bf-ink);
	color: var(--bf-yellow);
}

.ms-bf .ms-bf-btn[disabled] {
	opacity: 0.55;
	cursor: default;
}

/* A word, not a spinner — spinners are motion, and the direction is none. */
.ms-bf .ms-bf-more__status {
	margin: 8px 0 0;
	min-height: 18px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--bf-muted);
}

.ms-bf-empty {
	padding: 28px 16px;
	background: var(--bf-shell);
	border: 1px solid var(--bf-line);
	border-radius: var(--bf-radius);
	text-align: center;
}

.ms-bf .ms-bf-empty__title {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 800;
	color: var(--bf-ink);
}

.ms-bf .ms-bf-empty p {
	margin: 0 0 14px;
	font-size: 14px;
	color: var(--bf-muted);
}

/* Grid is dimmed while a filter is being fetched, so a slow response reads as
   "working" rather than "broken". Opacity only — nothing moves. */
.ms-bf-gridwrap.is-loading ul.products {
	opacity: 0.45;
}

/* =========================================================================
   9. Universe index
   ========================================================================= */

.ms-bf-universes {
	margin: 26px 0 8px;
	padding-top: 20px;
	border-top: 1px solid var(--bf-line);
}

.ms-bf-universes__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}

.ms-bf-universes__tile {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 62px;
	padding: 10px;
	background: var(--bf-paper);
	border: 1px solid var(--bf-line);
	border-radius: 10px;
}

.ms-bf-universes__tile img {
	width: auto;
	max-width: 100%;
	height: 30px;
	object-fit: contain;
}

/* =========================================================================
   10. The SEO article
   -------------------------------------------------------------------------
   Always open. Never an accordion, never truncated, never behind a "læs
   mere" — it is the page's ranking body copy, and text a visitor cannot
   reach is exactly what search engines treat as hidden.

   All that changes is readability: a measure of ~66 characters, real heading
   sizes, and generous line-height.
   ========================================================================= */

.ms-bf-article {
	margin: 26px 0 10px;
	padding-top: 20px;
	border-top: 1px solid var(--bf-line);
}

/* Full width, like every other block on the page. A narrower measure reads
   better in the abstract, but a column of text that stops two-thirds of the
   way across while the logos above it run edge to edge just looks broken —
   and this text is the page's ranking copy, so it should look deliberate.
   Line-height and heading rhythm carry the readability instead. */
.ms-bf .ms-bf-article__body {
	max-width: none;
}

.ms-bf .ms-bf-article__body p,
.ms-bf .ms-bf-article__body li {
	font-size: 15px;
	line-height: 1.65;
	color: #33312d;
}

.ms-bf .ms-bf-article__body p {
	margin: 0 0 14px;
}

.ms-bf .ms-bf-article__body h2 {
	margin: 26px 0 8px;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--bf-ink);
}

.ms-bf .ms-bf-article__body h3 {
	margin: 20px 0 6px;
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--bf-ink);
}

.ms-bf .ms-bf-article__body ul,
.ms-bf .ms-bf-article__body ol {
	margin: 0 0 14px;
	padding-left: 20px;
}

.ms-bf .ms-bf-article__body li {
	margin: 0 0 7px;
}

.ms-bf .ms-bf-article__body a {
	color: var(--bf-teal);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* =========================================================================
   11. Scale
   -------------------------------------------------------------------------
   The whole page is set one step larger than a general shop would be. The
   reader this was built for is a parent or grandparent buying for a child
   they know well and from a shop they do not, usually one-handed on a phone,
   often in a hurry. Every one of these is a size bump, nothing else.
   ========================================================================= */

.ms-bf .ms-bf-hero {
	padding: 14px var(--bf-pad) 13px;
}

.ms-bf .ms-bf-hero__title {
	font-size: 20px;
	margin-bottom: 6px;
}

.ms-bf .ms-bf-hero__lead {
	margin-bottom: 10px;
	font-size: 13.5px;
}

.ms-bf .ms-bf-section-title {
	font-size: 21px;
}

.ms-bf .ms-bf-chips .ms-bf-chip {
	min-height: 52px;
	font-size: 15px;
}

.ms-bf .ms-bf-chips .ms-bf-chip__label {
	font-size: 14.5px;
}

.ms-bf .ms-bf-chip__count {
	font-size: 11.5px;
}

/* Universe tiles are the exception. Bumped up with everything else they
   wrapped "Super Mario" and "Harry Potter" onto two lines, which left the grid
   uneven for no gain in legibility — the logo does the identifying here. */
.ms-bf .ms-bf-chip--tile .ms-bf-chip__label {
	font-size: 11px;
}

.ms-bf .ms-bf-gridwrap ul.products li.product h2.woocommerce-loop-product__title {
	font-size: 14.5px !important;
	line-height: 1.35 !important;
}

.ms-bf .ms-bf-gridwrap ul.products li.product .price,
.ms-bf .ms-bf-gridwrap ul.products li.product .price ins,
.ms-bf .ms-bf-gridwrap ul.products li.product .price ins .amount {
	font-size: 18px !important;
}

.ms-bf .ms-bf-gridwrap ul.products li.product a.button {
	min-height: 50px !important;
	font-size: 15px !important;
}

.ms-bf .ms-bf-article__body p,
.ms-bf .ms-bf-article__body li {
	font-size: 16px;
	line-height: 1.7;
}

/* =========================================================================
   12. On the day itself
   -------------------------------------------------------------------------
   One state change, in the hero only. Before Black Friday the bar counts
   down; on the day it turns yellow and states a deadline. The products, the
   prices and the filters are identical — the discounts are real all year, and
   dressing the page up as something else on one Friday would be a claim the
   prices themselves contradict.
   ========================================================================= */

.ms-bf .ms-bf-hero.is-live .ms-bf-hero__eyebrow {
	color: var(--bf-yellow);
	letter-spacing: 0.16em;
}

.ms-bf .ms-bf-countdown--live {
	padding: 8px 20px;
	border-color: var(--bf-yellow);
	background: var(--bf-yellow);
	color: var(--bf-ink);
	font-weight: 800;
}

/* The deadline, said in two words at a size you cannot scroll past. The line
   below the bar carries the practical detail — this only has to land. */
.ms-bf .ms-bf-countdown__shout {
	font-size: 24px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-transform: none;
}

.ms-bf .ms-bf-hero.is-live .ms-bf-hero__date {
	color: #cfcbc4;
}


/* =========================================================================
   13. Wider screens
   ========================================================================= */

@media (min-width: 600px) {
	.ms-bf .ms-bf-gridwrap ul.products.ms-bf-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 12px !important;
	}

	/* Past phone width the extra pixels stop mattering to the cards, so the
	   shop lines back up with the rest of the page. */
	.ms-bf .ms-bf-shop .ms-bf__inner {
		padding-left: var(--bf-pad);
		padding-right: var(--bf-pad);
	}

	.ms-bf-chooser__grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.ms-bf-universes__grid {
		grid-template-columns: repeat(4, 1fr);
	}

	/* Three columns instead of two, and the card is wide enough for the long
	   form again: the word comes back and the øre with it. */
	.ms-bf .ms-bf-gridwrap ul.products li.product .ms-bf-save.has-short .ms-bf-save__long {
		display: inline;
	}

	.ms-bf .ms-bf-gridwrap ul.products li.product .ms-bf-save__short {
		display: none;
	}

	/* The word is spoken on phones and read on everything wider. */
	.ms-bf .ms-bf-gridwrap ul.products li.product .ms-bf-save__word {
		position: static !important;
		width: auto !important;
		height: auto !important;
		margin: 0 !important;
		overflow: visible !important;
		clip-path: none !important;
	}

	.ms-bf .ms-bf-gridwrap ul.products li.product .ms-bf-save {
		padding: 2px 5px;
		font-size: 10.5px;
	}

	.ms-bf .ms-bf-gridwrap ul.products.ms-bf-grid li.product .price {
		gap: 3px 4px !important;
		margin: 0 9px !important;
	}

	.ms-bf .ms-bf-gridwrap ul.products li.product .price del,
	.ms-bf .ms-bf-gridwrap ul.products li.product .price del .amount {
		font-size: 12px !important;
	}

	/* Room for the whole sentence on one line, so the label stops claiming its
	   own row and the clock reads as one continuous statement. */
	.ms-bf .ms-bf-countdown__label {
		flex: 0 0 auto;
		font-size: 17px;
	}

	.ms-bf p#black_friday_countdown,
	.ms-bf .ms-bf-countdown {
		gap: 4px 12px;
		padding: 11px 22px;
		border-radius: 999px;
		font-size: 17px;
	}

	.ms-bf p#black_friday_countdown .ms-bf-countdown__item strong,
	.ms-bf .ms-bf-countdown .ms-bf-countdown__item strong {
		font-size: 26px !important;
	}

	.ms-bf p#black_friday_countdown .ms-bf-countdown__item small,
	.ms-bf .ms-bf-countdown .ms-bf-countdown__item small {
		font-size: 13px !important;
	}
}

@media (min-width: 992px) {
	.ms-bf {
		--bf-pad: 24px;
	}

	/* Matches the specificity of the base rule above, which is what keeps the
	   hero and the trust strip on the same left edge on wide screens. */
	.ms-bf .ms-bf-hero {
		margin: 18px 0 0;
		padding: 30px 32px 24px;
		border-radius: 16px 16px 0 0;
	}

	.ms-bf .ms-bf-hero__title {
		font-size: 28px;
	}

	.ms-bf .ms-bf-hero__lead {
		font-size: 16px;
	}

	/* The payment plate now closes the dark band, so it takes the rounded
	   bottom corners and the gap to the shop below. */
	.ms-bf .ms-bf-trust {
		margin: 0;
		border-radius: 0;
		gap: 8px 28px;
	}

	.ms-bf .ms-bf-trust li {
		font-size: 13px;
	}

	.ms-bf .ms-bf-pay {
		margin: 0 0 20px;
		padding-bottom: 14px;
		border-radius: 0 0 16px 16px;
	}

	.ms-bf .ms-bf-pay__marks {
		height: 30px;
	}

	.ms-bf .ms-bf-gridwrap ul.products.ms-bf-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
		gap: 16px !important;
	}

	.ms-bf .ms-bf-gridwrap ul.products li.product h2.woocommerce-loop-product__title {
		font-size: 14.5px !important;
	}

	.ms-bf .ms-bf-gridwrap ul.products li.product a.button {
		font-size: 14.5px !important;
	}

	.ms-bf-tiles {
		grid-template-columns: repeat(8, minmax(0, 1fr));
	}

	/* Stop four price chips from stretching across a 1,100px row. */
	.ms-bf .ms-bf-chips {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.ms-bf .ms-bf-chips--prices {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		max-width: 620px;
	}

	.ms-bf .ms-bf-panel {
		padding: 16px;
	}

	.ms-bf-panel__group {
		padding: 14px 16px 16px;
	}

	.ms-bf .ms-bf-panel__legend {
		font-size: 16px;
	}

	.ms-bf .ms-bf-panel__done {
		max-width: 340px;
	}

	/* The article runs the full width of the page, so the type grows and the
	   lines open up to carry the longer measure. */
	.ms-bf .ms-bf-article__body p,
	.ms-bf .ms-bf-article__body li {
		font-size: 16px;
		line-height: 1.8;
	}

	.ms-bf .ms-bf-article__body h2 {
		font-size: 21px;
	}

	.ms-bf .ms-bf-article__body h3 {
		font-size: 17px;
	}

	/* The button is the width of a button, not the width of the page. */
	.ms-bf .ms-bf-bar__toggle {
		max-width: 420px;
		margin: 0 auto;
	}

	.ms-bf .ms-bf-bar__help {
		font-size: 13px;
	}

	.ms-bf-universes__grid {
		grid-template-columns: repeat(8, 1fr);
	}

	.ms-bf-chooser__card {
		min-height: 140px;
	}

	.ms-bf .ms-bf-section-title {
		font-size: 23px;
	}

}