/*
 * Site chrome — header, topbar, and (as their issues land) the department bar,
 * the mobile drawer, the USP strip and the footer.
 *
 * Neither a reusable primitive nor one screen's composition: this is the frame
 * every screen sits inside, so it gets its own layer between components.css and
 * screens.css.
 *
 * No media queries. The header changes structure across the four breakpoints
 * rather than re-flowing, but all three variants come out of one markup tree —
 * the --dl-header-* and --dl-topbar-* properties resolved in section 1 of
 * base.css are the entire difference between them. A PHP branch would have been
 * baked into the page cache and invisible to the Site Editor.
 *
 * Contents
 *   1. Header shell
 *   2. Topbar
 *   3. Header bar — logo, search, actions
 *   4. Department bar and mega-panel
 *   5. Campaign notice — the blue line under the department bar
 *   6. Menu drawer — what the generic Drawer carries on mobile and tablet
 *   7. BottomNav
 *   8. USP strip
 *   9. Footer
 */

/* ══ 1. Header shell ═════════════════════════════════════════════════════════
 * Sticky under the admin bar, above everything but the drawer and the toasts.
 * The department bar (#8) renders inside this element, so it sticks with it.
 */

/*
 * The block engine wraps a template part in an element of its own, and that
 * wrapper is exactly as tall as the header inside it — which is a sticky
 * element's whole travel. The header therefore scrolled away with the page.
 * Taking the wrapper out of the box tree hands the header back to
 * .wp-site-blocks, whose height is the page's. Nothing else in the theme relies
 * on that wrapper being a box.
 */
.wp-block-template-part:has(> .dl-header) {
	display: contents;
}

.dl-header {
	position: sticky;
	top: var(--ds-sticky-offset);
	z-index: 20; /* no token — the theme has no z-index scale yet */
	background: var(--surface-card);
	border-bottom: var(--border-width) solid var(--border-subtle);
}

/* ══ 2. Topbar ═══════════════════════════════════════════════════════════════ */

.dl-topbar {
	background: var(--surface-inverse);
	color: rgba(255, 255, 255, 0.72); /* no token — inverse text at 72%, design system literal */
}

.dl-topbar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 22px; /* no token — between --space-6 and --space-7 */
	min-height: 36px; /* no token — the topbar band height */
	font: var(--type-caption);
}

.dl-topbar__item {
	display: inline-flex;
	align-items: center;
	gap: 7px; /* no token — optical, half the icon width */
	color: inherit;
	text-decoration: none;
}

a.dl-topbar__item:hover {
	color: var(--text-inverse);
}

/* E-mail and opening hours exist in the markup at every width; only `full`
   has the room to show them. */
.dl-topbar__item--full {
	display: var(--dl-topbar-full-display);
}

.dl-topbar__shipping {
	margin-inline-start: auto;
}

/* ══ 3. Header bar ═══════════════════════════════════════════════════════════
 * One flex row that is allowed to wrap. From `compact` up the search is
 * `1 1 auto` in source order and stays on the bar; on `mobile` it becomes
 * `1 0 100%` with a later `order` and drops to a row of its own.
 *
 * `order` moves boxes but not focus, so the two can only agree at one of the
 * two — the markup is ordered for `compact`/`full`, where a keyboard is the
 * likely input. On `mobile` the search is tabbed before the wishlist and cart
 * although it is painted under them; the linear reading order (logo → search →
 * actions → hamburger) still makes sense, which is what a screen reader follows.
 *
 * The logo leads the bar at every width and the hamburger closes it: it is the
 * last box in the markup and therefore the first icon from the right.
 */

.dl-header__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: var(--dl-header-gap);
	row-gap: var(--dl-header-row-gap);
	padding-block: var(--dl-header-pad-block);
}

.dl-header__menu {
	display: var(--dl-header-menu-display);
	flex: 0 0 auto;
	width: var(--dl-header-action-size);
	height: var(--dl-header-action-size);
}

/* ── Logo ──
 * Never recoloured, never replaced by the site title. Intrinsic dimensions are
 * on the <img> so the box is reserved before the file lands.
 */

.dl-header__logo {
	display: block;
	flex: 0 0 auto;
}

.dl-header__logo img {
	display: block;
	width: var(--dl-header-logo-w);
	height: auto;
}

/* ── Search ── */

.dl-header__search {
	flex: var(--dl-header-search-flex);
	order: var(--dl-header-search-order);
	min-width: 0;
	max-width: var(--dl-header-search-max);
	padding-inline-end: var(--dl-header-search-pad-end);
}

/* `mobile` has no submit button — the field is the whole control there and the
   form still submits on Enter. */
.dl-header__search .dl-search__submit {
	display: var(--dl-header-search-submit);
	align-items: center;
}

/* ── Actions ── */

.dl-header__actions {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	margin-inline-start: auto;
	/* Closes the bar's column-gap down to the icon gap, so the hamburger that
	   follows reads as the last of the actions rather than a separate control.
	   Zero on `full`, where there is no hamburger. */
	margin-inline-end: var(--dl-header-actions-margin-end);
}

.dl-header__actions .dl-icon-btn {
	width: var(--dl-header-action-size);
	height: var(--dl-header-action-size);
}

/* Hidden on `compact` and `mobile`, where the entry lives in the drawer. */
.dl-header__account {
	display: var(--dl-header-account-display);
	align-items: center;
	justify-content: center;
}

/* ══ 4. Department bar ═══════════════════════════════════════════════════════
 * The mega-menu. Only drawn on `full` — --dl-mainnav-display is `none` up to
 * 1024px, where the drawer takes over.
 *
 * A department is a link to the archive plus a chevron button that discloses
 * the panel, and the panels are ordinary markup — all of it rendered on every
 * request. Without JavaScript the panels simply stay `hidden` and the bar
 * degrades to a row of links to the archives; the module in
 * assets/js/mainnav.js only flips `hidden`, `aria-expanded` and the `is-open` /
 * `is-selected` state classes.
 */

.dl-mainnav {
	display: var(--dl-mainnav-display);
	position: relative;
	background: var(--surface-card);
	border-top: var(--border-width) solid var(--border-subtle);
}

.dl-mainnav__bar {
	display: flex;
	gap: var(--space-7);
}

/* ── Departments ── */

/*
 * The department is a wrapper, not the link: the label goes to the archive and
 * the chevron is a disclosure button beside it, so the indicator and the hover
 * state have to hang on something that contains both.
 */
.dl-mainnav__dept {
	display: flex;
	align-items: center;
	gap: 6px; /* no token — optical, half the chevron */
	padding-block: 13px; /* no token — the bar height in the handoff */
	margin-bottom: calc(var(--border-width) * -1); /* sits on the header's own border */
	border-bottom: 2px solid transparent; /* no token — the 2px indicator */
	transition: var(--transition-control);
	white-space: nowrap;
}

.dl-mainnav__dept-link {
	font: var(--weight-light) var(--text-base) / 1 var(--font-display);
	color: var(--text-body);
	transition: var(--transition-control);
}

/* The negative margin against the wrapper's own padding gives a 14px chevron
   the full height of the bar as a target, without moving anything. */
.dl-mainnav__dept-toggle {
	display: flex;
	align-items: center;
	padding: 13px 0;
	margin-block: -13px;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
}

/*
 * Three states collapse to one look: hovered or focused, open, and the current
 * page or an ancestor of it. `is-open` is the only one the script owns — the
 * rest are the platform's or the server's.
 */
.dl-mainnav__dept:hover,
.dl-mainnav__dept:has(:focus-visible),
.dl-mainnav__dept.is-open,
.dl-mainnav__dept.is-current {
	border-bottom-color: var(--brand);
}

.dl-mainnav__dept:hover .dl-mainnav__dept-link,
.dl-mainnav__dept:has(:focus-visible) .dl-mainnav__dept-link,
.dl-mainnav__dept.is-open .dl-mainnav__dept-link,
.dl-mainnav__dept.is-current .dl-mainnav__dept-link {
	color: var(--brand);
}

.dl-mainnav__dept-chevron {
	color: var(--text-faint);
	transition: var(--transition-control);
}

.dl-mainnav__dept:hover .dl-mainnav__dept-chevron,
.dl-mainnav__dept:has(:focus-visible) .dl-mainnav__dept-chevron,
.dl-mainnav__dept.is-open .dl-mainnav__dept-chevron,
.dl-mainnav__dept.is-current .dl-mainnav__dept-chevron {
	color: var(--brand);
}

/* ── Panel ──
 * Full-bleed band pinned under the bar. z-index sits above the page but below
 * the drawer and the toasts.
 */

.dl-mainnav__panel {
	position: absolute;
	inset-inline: 0;
	top: 100%;
	z-index: 40; /* no token — the theme has no z-index scale yet */
	background: var(--surface-card);
	border-top: var(--border-width) solid var(--border-subtle);
	border-bottom: var(--border-width) solid var(--border-subtle);
	box-shadow: var(--shadow-3);
	/* tokens/motion.css zeroes --dur-fast under prefers-reduced-motion, so the
	   rise collapses to nothing without a query of its own. */
	animation: ds-rise var(--dur-fast) var(--ease-out);
}

.dl-mainnav__panel-inner {
	display: grid;
	grid-template-columns: 260px 1fr; /* no token — the handoff's left column */
	gap: var(--space-8);
	padding-block: var(--space-6);
}

/* ── Left column: subcategories ── */

.dl-mainnav__subs {
	display: flex;
	flex-direction: column;
	gap: var(--border-width);
	margin: 0;
	padding: 0 var(--space-6) 0 0;
	list-style: none;
	border-right: var(--border-width) solid var(--border-subtle);
}

/*
 * Same split as a department, one level down: the row is the `<li>`, holding
 * the link to the subcategory and — when there is a group to reveal — the
 * chevron button that reveals it. `is-selected` is the script's, because the
 * pane it points at is the script's too.
 */
.dl-mainnav__subs-item {
	display: flex;
	align-items: center;
	padding-inline-end: var(--space-4); /* the row's right inset, minus the link's */
	border-radius: var(--radius-sm);
	transition: var(--transition-control);
}

.dl-mainnav__subs-item.is-selected {
	background: var(--brand-subtle);
}

.dl-mainnav__sub {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 10px; /* no token — optical, between the 16px glyph and the label */
	padding: 9px 0 9px var(--space-4); /* no token — the row height in the handoff */
	font: var(--weight-light) var(--text-base) / 1.3 var(--font-body);
	color: var(--text-body);
	transition: var(--transition-control);
}

.dl-mainnav__subs-item.is-selected .dl-mainnav__sub {
	color: var(--text-brand);
}

.dl-mainnav__sub-toggle {
	display: flex;
	align-items: center;
	padding: 9px 0 9px var(--space-2);
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
}

.dl-mainnav__sub-label {
	flex: 1;
}

.dl-mainnav__sub-icon {
	color: var(--text-faint);
}

.dl-mainnav__subs-item.is-selected .dl-mainnav__sub-icon {
	color: var(--brand);
}

.dl-mainnav__sub-chevron {
	color: var(--text-faint);
}

/* ── Right pane: link groups ── */

.dl-mainnav__pane {
	min-width: 0;
}

.dl-mainnav__eyebrow {
	font: var(--type-eyebrow);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	color: var(--text-faint);
	margin-bottom: var(--space-5);
}

.dl-mainnav__links {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px var(--space-7); /* no token — the row gap is tighter than the scale */
	margin: 0;
	padding: 0;
	list-style: none;
}

.dl-mainnav__link {
	display: block;
	padding-block: 6px; /* no token — pairs with the 6px row gap */
	font: var(--type-small);
	color: var(--text-muted);
}

.dl-mainnav__link:hover,
.dl-mainnav__link[aria-current] {
	color: var(--text-brand);
}

/* The prompt shown for a subcategory that has nothing under it. */
.dl-mainnav__empty {
	display: flex;
	align-items: center;
	gap: 12px; /* no token — optical, the glyph stands away from the prompt */
	height: 100%;
	margin: 0;
	font: var(--type-small);
	color: var(--text-faint);
}

/* ══ 5. Campaign notice ══════════════════════════════════════════════════════
 * The campaign line under the department bar: a brand-blue band with white
 * copy, as the webshop prototype draws it (kit/rwd/ShopShell.jsx, PromoBar).
 *
 * It is a sibling of the header rather than a child — the header is sticky and
 * this is not, because a two-line campaign pinned to the top would cost a phone
 * a third of its viewport on every screen of the shop.
 *
 * Drawn at every width. Below `full` the eyebrow goes and the band tightens —
 * --dl-promo-* in section 1 of base.css — which is what the prototype's
 * `compact` variant does.
 *
 * The blue is --surface-brand (--blue-700), not the --blue-600 the prototype
 * writes. That is the token split the design system already made and the README
 * records: --brand is the logo blue, declared non-text-bearing at 4.27:1, and
 * a brand fill with something on top of it is --blue-700 at 5.99:1. This band
 * carries a sentence, so it is the second one; the prototype predates the split.
 *
 * The eyebrow follows the same test. The prototype sets it at 72% white, which
 * is 3.38:1 here, so it is raised to the 86% that clears 4.5:1 and still reads a
 * step quieter than the message beside it.
 *
 * The design also draws a close button. See inc/promo-notice.php for why there
 * is none.
 */

.dl-promo-notice {
	background: var(--surface-brand);
	color: var(--text-inverse);
}

.dl-promo-notice__inner {
	display: flex;
	align-items: flex-start;
	gap: var(--dl-promo-gap);
	padding-block: var(--dl-promo-pad-block);
}

.dl-promo-notice__label {
	display: var(--dl-promo-label-display);
	flex: 0 0 auto;
	padding-block-start: 3px; /* no token — optical, the eyebrow's cap height against the first line */
	font: var(--type-eyebrow);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.86); /* no token — inverse text at 86%, the lowest that clears AA on --surface-brand */
}

/* min-width: 0 so a long unbroken campaign word wraps instead of widening the
   row past the container. */
.dl-promo-notice__text {
	flex: 1 1 auto;
	min-width: 0;
	font: var(--type-small);
	text-wrap: pretty;
}

.dl-promo-notice__text p {
	margin: 0;
}

.dl-promo-notice__text p + p {
	margin-block-start: var(--space-2);
}

.dl-promo-notice__strong {
	font-weight: var(--weight-medium);
}

/* White on white: the link is told apart from the copy by its underline alone,
   which is why the underline is not optional here. */
.dl-promo-notice__text a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px; /* no token — the theme has no underline-offset scale */
}

.dl-promo-notice__text a:hover {
	text-decoration-thickness: 2px; /* no token — one step up from the default hairline */
}

/* ══ 6. Menu drawer ══════════════════════════════════════════════════════════
 * The panel, the scrim and the behaviour are the generic Drawer in
 * components.css. What is here is only what the *menu* puts inside it: the flat
 * links under the department accordion, and the contact details in the footer.
 *
 * It is not hidden above 1024px. Nothing can open it there — the hamburger and
 * the bottom bar are both gone — and a rule that hid an open dialog would leave
 * the page scroll-locked behind an invisible panel.
 */

.dl-drawer__links {
	display: flex;
	flex-direction: column;
	padding-block: var(--space-5);
	border-top: var(--border-width) solid var(--border-subtle);
}

.dl-drawer__link {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-4) var(--space-5);
	border-radius: var(--radius-sm);
	font: var(--weight-light) var(--text-base) / 1 var(--font-body);
	color: var(--text-body);
	transition: var(--transition-control);
}

.dl-drawer__link:hover {
	background: var(--brand-subtle);
	color: var(--text-brand);
}

.dl-drawer__link-icon {
	color: var(--text-faint);
}

.dl-drawer__link:hover .dl-drawer__link-icon {
	color: var(--brand);
}

.dl-drawer__contact {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	font: var(--type-small);
	color: var(--text-muted);
}

.dl-drawer__contact + .dl-drawer__contact {
	margin-top: var(--space-3);
}

/* ══ 7. BottomNav ════════════════════════════════════════════════════════════
 * Five equal slots pinned to the foot of the viewport, mobile only. The bar is
 * `position: fixed`, so it is out of flow and cannot reserve its own space —
 * <body> carries the matching padding instead.
 *
 * Two of the five are not links: «Kategorier» opens the menu drawer and «Søk»
 * focuses the header field. Both look identical to the three that navigate,
 * which is why the shared class sits on <a> and <button> alike and every button
 * reset it needs is already in base.css.
 */

.dl-bottom-nav {
	display: var(--dl-bottom-nav-display);
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 50; /* no token — above the page, below the drawer's top layer */
	height: var(--dl-bottom-nav-space);
	padding-bottom: env(safe-area-inset-bottom);
	background: var(--surface-card);
	border-top: var(--border-width) solid var(--border-subtle);
}

/*
 * The space the bar reserves at the foot of every page is theme.json's root
 * bottom padding, not a rule here: theme.json emits it as `:root :where(body)`,
 * which outranks a bare `body` selector in this file. It resolves to the same
 * --dl-bottom-nav-space, so it is 0 from 768px up, where the bar is gone.
 */

.dl-bottom-nav__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-1);
	color: var(--text-faint);
	transition: var(--transition-control);
}

.dl-bottom-nav__item:hover,
.dl-bottom-nav__item[aria-current],
.dl-bottom-nav__item[aria-expanded="true"] {
	color: var(--brand);
}

.dl-bottom-nav__glyph {
	position: relative;
	display: flex;
}

.dl-bottom-nav__label {
	font: var(--weight-light) 10px / 1 var(--font-body); /* no token — below the type scale, as drawn */
}

.dl-bottom-nav__item[aria-current] .dl-bottom-nav__label {
	font-weight: var(--weight-medium);
}

/* Absolutely positioned so a count appearing never re-measures the slot. */
.dl-bottom-nav__badge {
	position: absolute;
	top: -5px; /* no token — optical, hangs off the glyph's corner */
	right: -9px; /* no token */
	min-width: 15px; /* no token — the badge is smaller than the component scale */
	height: 15px; /* no token */
	padding-inline: 4px; /* no token */
	display: grid;
	place-items: center;
	border-radius: var(--radius-pill);
	background: var(--brand-strong); /* 9px white digits — text, so not --brand */
	color: var(--text-inverse);
	font: var(--weight-medium) 9px / 1 var(--font-body); /* no token — see above */
}

/*
 * The chat bubble is a plugin's, and it is fixed to the same corner the BottomNav
 * occupies. Rather than out-specifying it rule by rule or racing its z-index, the
 * theme moves it up by the space the chrome already declares — one property, and
 * it collapses back to the plugin's own 20px from 768px up, where the bar is gone.
 *
 * The id is what carries the specificity: (1,1,0) against the plugin's (0,2,0),
 * so this also wins inside its own max-width: 640px block, and no !important is
 * needed anywhere.
 */
#ihumbak-chat-widget[data-position='bottom-right'],
#ihumbak-chat-widget[data-position='bottom-left'] {
	bottom: var(--dl-chat-bottom);
}

/* On the cart and the checkout the bottom-right corner is where the total and
   the place-order button end up (inc/order-summary.php). From 1024px up — where
   the summary becomes the sticky rail — the bubble moves to the other corner,
   which on those two screens is the form column's own whitespace. */
@media (min-width: 1024px) {
	body.woocommerce-cart #ihumbak-chat-widget[data-position='bottom-right'],
	body.woocommerce-checkout #ihumbak-chat-widget[data-position='bottom-right'] {
		right: auto;
		left: var(--dl-chat-inset);
	}
}

/* ══ 8. USP strip ════════════════════════════════════════════════════════════
 * A white band with a hairline above and below, sitting under the hero. Four
 * items on md and lg, two from tablet down — the `usp` track from bp.js, read
 * out of --dl-track-usp like every other grid in the theme.
 *
 * The pill and the glyph inside it shrink on mobile (40/18 → 34/16). The glyph
 * is a masked <span> whose size is --ds-icon-size, so the pill sets that
 * property rather than the markup carrying two icon sizes. 18 is the nearest
 * size in the design system to the 19px the prototype drew.
 */

.dl-usp {
	background: var(--surface-card);
	border-block: var(--border-width) solid var(--border-subtle);
}

.dl-usp__grid {
	display: grid;
	grid-template-columns: var(--dl-track-usp);
	gap: var(--dl-usp-gap);
	padding-block: var(--dl-usp-pad-block);
}

.dl-usp__item {
	display: flex;
	align-items: center;
	gap: var(--dl-usp-item-gap);
	min-width: 0; /* the text line may ellipsise rather than widen the track */
}

.dl-usp__pill {
	--ds-icon-size: var(--dl-usp-glyph-size);

	flex: none;
	width: var(--dl-usp-pill-size);
	height: var(--dl-usp-pill-size);
	display: grid;
	place-items: center;
	border-radius: var(--radius-pill);
	background: var(--brand-subtle);
	color: var(--brand);
}

.dl-usp__body {
	min-width: 0;
}

.dl-usp__title {
	font: var(--dl-usp-title-font);
	color: var(--text-heading);
}

.dl-usp__text {
	font: var(--dl-usp-text-font);
	color: var(--text-muted);
}

/* ══ 9. Footer ═══════════════════════════════════════════════════════════════
 * The dark band that closes every screen. Four columns on md and lg, two on
 * tablet, one on mobile — --dl-track-footer, the `footer` track from bp.js.
 *
 * Mobile is a shorter footer, not a narrowed one. The handoff drops the blurb,
 * the category column and the headings, and moves the payment chips below the
 * links. The one place the theme goes further than the drawing is the contact
 * column: it stays whole at every width — phone, company, address and org.
 * number included — because those are what a customer reaches for on a phone.
 *
 * Everything but the chip move is a display property resolved in base.css; the
 * move needs the brand column to stop being a column, which is what
 * --dl-footer-brand-display: contents does — its logo, blurb and chips become
 * grid items in their own right and take their place in the single column
 * through --dl-footer-order-*. From tablet up the property is `flex` again and
 * every order is 0, so the four columns are back in source order.
 */

.dl-footer {
	/*
	 * The one place the global focus ring is re-pointed rather than overridden.
	 * --focus-ring is rgba(0,127,205,.22), which all but disappears on
	 * --neutral-900; the rule in base.css is untouched and simply resolves this
	 * value inside the footer. WCAG 2.2 requires the indicator to be visible,
	 * and on an inverse surface that means white.
	 */
	--focus-ring: 0 0 0 3px rgba(255, 255, 255, 0.55); /* no token — inverse focus ring */

	background: var(--surface-inverse);
	/* 7.15:1 on --neutral-900 — AAA at this size, the floor the band is tuned to. */
	color: rgba(255, 255, 255, 0.62); /* no token — inverse body text, design system literal */
	/* The footer owns the last gap on every screen — the one no section closes.
	   It is the page rhythm, so it grows with the breakpoint instead of sitting
	   at the lg value everywhere, and no screen adds a closing padding of its own. */
	margin-top: var(--ds-section-rhythm);
}

.dl-footer__inner {
	display: grid;
	grid-template-columns: var(--dl-track-footer);
	gap: var(--dl-footer-gap);
	padding-block: var(--dl-footer-pad-block-start) var(--dl-footer-pad-block-end);
}

.dl-footer__brand {
	display: var(--dl-footer-brand-display);
	flex-direction: column;
	gap: var(--space-5);
}

.dl-footer__logo {
	order: var(--dl-footer-order-logo);
	display: block;
	width: var(--dl-footer-logo-w);
}

/*
 * One logo file, reversed here rather than shipped a second time in white. The
 * mark is never recoloured — brightness(0) flattens it to black and invert(1)
 * lifts it to white, which is a reversal, not a tint.
 */
.dl-footer__logo img {
	width: 100%;
	height: auto;
	filter: brightness(0) invert(1);
}

.dl-footer__blurb {
	display: var(--dl-footer-blurb-display);
	max-width: 300px; /* no token — the measure the blurb was drawn at */
	margin: 0;
	font: var(--type-small);
}

.dl-footer__pay {
	order: var(--dl-footer-order-pay);
	display: flex;
	flex-wrap: wrap;
	gap: 10px; /* no token — optical, between --space-3 and --space-4 */
}

/*
 * Text chips, not logos. The official Vipps and Klarna marks were not supplied
 * with the handoff and redrawing a trademark is not an option — see #10.
 */
.dl-footer__chip {
	padding: 6px 14px; /* no token — the chip is smaller than the control scale */
	border: var(--border-width) solid rgba(255, 255, 255, 0.16); /* no token — inverse hairline */
	border-radius: var(--radius-sm);
	font: var(--type-caption);
	color: rgba(255, 255, 255, 0.8); /* no token — inverse text at 80% */
}

.dl-footer__col {
	display: flex;
	flex-direction: column;
	gap: 9px; /* no token — optical, the column's line rhythm */
}

/* The two columns that move on mobile; the categories column is gone there. */
.dl-footer__col--categories {
	display: var(--dl-footer-categories-display);
}

.dl-footer__col--information {
	order: var(--dl-footer-order-information);
}

.dl-footer__col--contact {
	order: var(--dl-footer-order-contact);
}

.dl-footer__heading {
	display: var(--dl-footer-heading-display);
	font: var(--type-eyebrow);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	/*
	 * --text-faint is a light-surface token: --neutral-550 on --neutral-900 is
	 * 3.08:1, which fails AA for 11px text, never mind AAA. The heading is the
	 * one thing in the band that has to be read before the links under it, so
	 * it goes above them rather than below: .78 is 10.58:1, and the hierarchy
	 * now runs heading > link, the way an inverse band reads.
	 */
	color: rgba(255, 255, 255, 0.78); /* no token — inverse heading, 10.58:1 */
	margin: 0;
}

/*
 * The contact heading is the one that survives mobile. The other two columns
 * read as what they are — a list of links under the logo — but the contact
 * column is a block of five unlabelled facts without it. No variable: from
 * tablet up every heading shows anyway, so this only ever adds one.
 */
.dl-footer__col--contact .dl-footer__heading {
	display: block;
}

.dl-footer__list {
	display: flex;
	flex-direction: column;
	gap: 9px; /* no token — see .dl-footer__col */
	font: var(--type-small);
}

/*
 * Links inherit the band's own text colour and go white on hover. No opacity
 * change: the design moves the colour, and fading a link is the one hover the
 * handoff rules out.
 */
.dl-footer__link {
	color: inherit;
	text-decoration: none;
	transition: var(--transition-control);
}

.dl-footer__link:hover,
.dl-footer__link[aria-current] {
	color: var(--text-inverse);
}

.dl-footer__mail .dl-footer__link {
	display: inline-flex;
	align-items: center;
	gap: 6px; /* no token — optical, half the icon width */
}

/* On mobile the e-mail is the first line under the heading and the glyph tells
   it apart from the four plain-text facts below it. From tablet up the column
   is wide enough for that to be obvious, and the glyph goes. */
.dl-footer__mail-icon {
	display: var(--dl-footer-mail-icon-display);
}

.dl-footer__bar {
	border-top: var(--border-width) solid rgba(255, 255, 255, 0.1); /* no token — inverse hairline */
	font: var(--type-caption);
	/*
	 * The handoff draws this at .4, which is 4.17:1 on --neutral-900 and fails
	 * AA for 12px text. AAA wants 7:1 at this size, and white on this ground
	 * does not reach it until .612 — so the bar cannot stay quieter than the
	 * band's body text and pass. It sits at the same .62, 7.15:1, and the rule
	 * above it does the separating instead. See the contrast criterion on #10.
	 */
	color: rgba(255, 255, 255, 0.62); /* no token — inverse text, raised from .4 for AAA */
}

.dl-footer__bar > .dl-container {
	padding-block: var(--space-5);
}

.dl-footer__copy-full {
	display: var(--dl-footer-copy-full-display);
}

.dl-footer__copy-short {
	display: var(--dl-footer-copy-short-display);
}