/*
Theme Name: qwen38max_Shop21
Theme URI: https://shop21.dk/
Author: Shop21
Author URI: https://shop21.dk/
Description: Premium Danish WooCommerce theme for Shop21.dk. Scandinavian minimalism on a Smoky Black canvas with Bitcoin Yellow accents, built from the official Shop21 logo guideline (Be Vietnam Pro typeface, self-hosted). Mobile-first and touch optimised (44px targets, full-screen navigation, fixed cart bar), WCAG-minded (18px+ body copy with an 18pt large-text mode, 4.5:1 contrast, visible focus, ARIA landmarks) and fast (one deferred vanilla-JS file, no external font requests). Product language flags (sprog) keep the exact placement the Shop21 plugin uses on shop21.dk.
Version: 1.0.31
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: qwen38max-shop21
Domain Path: /languages
Tags: e-commerce, woocommerce, dark, one-column, two-columns, custom-logo, custom-menu, custom-colors, featured-images, translation-ready, accessibility-ready, block-styles, wide-blocks, sticky-post, threaded-comments
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
	/* Brand palette — Logo Guideline.pdf */
	--s21-black: #000000;            /* Black */
	--s21-smoky: #0c0c0c;              /* Smoky Black — page background */
	--s21-ghost: #f9f9f9;              /* Ghost White — primary text */
	--s21-accent: #ffb703;             /* Bitcoin Yellow — accent */
	--s21-accent-hover: #ffa500;       /* hover state */
	--s21-accent-contrast: #0c0c0c;    /* ink on accent (>= 4.5:1) */

	/* Surfaces (spec secondary #111111 + two steps for depth) */
	--s21-surface: #111111;
	--s21-surface-2: #161616;
	--s21-surface-3: #1d1d1d;
	--s21-surface-hover: #222222;
	--s21-line: #2a2a2a;
	--s21-line-soft: #1f1f1f;

	/* Text — #CCCCCC muted gives 12.2:1 on Smoky Black */
	--s21-text: #f9f9f9;
	--s21-text-muted: #cccccc;
	--s21-text-dim: #a3a3a3;
	--s21-on-accent: var(--s21-accent-contrast);

	/* Feedback */
	--s21-success: #6ee7a8;
	--s21-warning: #ffcc66;
	--s21-danger: #ff8a80;
	--s21-info: #8ecbff;

	/* Typography */
	--s21-font: 'Be Vietnam Pro', 'Segoe UI', Helvetica, Arial, system-ui, -apple-system, sans-serif;
	--s21-font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
	--s21-text-size: 18px;             /* WCAG floor: never below 18px */
	--s21-text-size-rem: 1.125rem;
	--s21-lh: 1.6;
	--s21-lh-tight: 1.2;

	--s21-fs-xs: 0.778rem;   /* 14px at 18px base */
	--s21-fs-sm: 0.889rem;   /* 16px */
	--s21-fs-base: 1rem;     /* 18px */
	--s21-fs-md: 1.111rem;   /* 20px */
	--s21-fs-lg: 1.333rem;   /* 24px */
	/* Heading clamps are deliberately capped: at 1440px+ (and for visitors who
	   run their OS at 150-200% UI scale) 2.75rem/4rem titles dwarfed the cards. */
	--s21-fs-xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
	--s21-fs-2xl: clamp(1.625rem, 1.35rem + 1.1vw, 2.125rem);
	/* The hero headline deliberately shares the row-heading scale: it must read
	   as the same size as "Udvalgte produkter" / "Bestsellere" below it, not as
	   a display shout. Its own clamp used to peak at 2.875rem (46px) and a
	   1200px+ override pushed it to 4.25rem (68px) — 2.4x the row titles, which
	   dwarfed the cards and the hero copy around it. Kept as an alias so child
	   themes and filters referencing --s21-fs-hero keep working and stay in
	   step with the row headings automatically. */
	--s21-fs-hero: var(--s21-fs-xl);

	/* Spacing scale */
	--s21-space-1: 0.25rem;
	--s21-space-2: 0.5rem;
	--s21-space-3: 0.75rem;
	--s21-space-4: 1rem;
	--s21-space-5: 1.5rem;
	--s21-space-6: 2rem;
	--s21-space-7: 3rem;
	--s21-space-8: 4rem;

	/* Layout */
	--s21-container: 1280px;
	--s21-container-narrow: 860px;
	/* The catalogue gets a wider shell than editorial pages so the filter
	   sidebar and four saxo-sized product columns (~246px) sit side by side
	   at 1440px without the cards collapsing to three. */
	--s21-container-shop: 1440px;
	--s21-gutter: 1rem;
	--s21-radius-sm: 6px;
	--s21-radius: 12px;
	--s21-radius-lg: 20px;
	--s21-radius-pill: 999px;

	/* Form controls */
	--s21-control: 22px;             /* checkbox / radio box size used everywhere */
	/*
	   WooCommerce Blocks draws the checkout/cart radio as an absolutely
	   positioned circle inside its row (left: 16px on the checkout, left: 0 in
	   the cart) and reserves room for it with the row's own left padding
	   (16px 16px 16px 48px). Our surface/border restyle of that row used to
	   reset the padding to 16px on all four sides, which put "Free shipping"
	   and "Cash on delivery" straight underneath the circle. The gutter is
	   inset + control + 12px of air, so the label always starts clear of it. */
	--s21-radio-inset: 16px;
	--s21-radio-gutter: 50px;        /* 16 + 22 + 12 — checkout rows */
	--s21-radio-gutter-cart: 34px;   /* 0 + 22 + 12 — cart rows */

	/* Touch + chrome */
	--s21-tap: 44px;                 /* WCAG 2.5.5 minimum target */
	--s21-header-h: 62px;
	--s21-announce-h: 34px;
	--s21-catstrip-h: 44px;
	--s21-header-position: sticky;

	/* Elevation */
	--s21-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.5);

	/* ----------------------------------------------------------------------
	   Product imagery — a light "stage" behind every product photo.
	   Dark products (e.g. sorte briller) and dark source art disappear on the
	   Smoky Black UI, so images sit on a light stage with a hairline border.
	   The art is never cropped or stretched: object-fit contain, centred both
	   axes.

	   The stage is warm ivory rather than pure white on purpose. Plenty of
	   product photos — book covers especially — are shot on white, so a #fff
	   stage makes the artwork boundary invisible: cover and stage melt into one
	   shape and the padding reads as a gap in the photo. #fff8e7 is the brand
	   Bitcoin Yellow (#FFB703) at ~9% over white: still essentially white
	   (lightness 96%), but cream enough to draw a soft edge around a white
	   photo. The hairline is warmed to match so the frame never looks grey
	   against the cream. Both tokens drive every product-image stage in the
	   theme (cards, gallery, thumbs, cart, blocks, widgets, tiles), so the tint
	   is changed in exactly one place.
	   ------------------------------------------------------------------- */
	--s21-image-bg: #fff8e7;
	--s21-image-line: #e7dfcc;
	--s21-image-radius: 10px;
	--s21-image-pad: var(--s21-space-3);

	/* Card image stage, sized after saxo.com/dk/bog/alle/dansk:
	   246 x 388 card, ~140 x 210 contained cover, 8px column gap, 24px row gap. */
	--s21-card-min-w: 150px;
	--s21-card-image-h: 170px;
	--s21-card-col-gap: var(--s21-space-3);
	--s21-card-row-gap: var(--s21-space-5);

	/* Single product gallery.
	   Above 900px the photo column is the narrow one and the buying information
	   the wide one, mirroring saxo.com/dk (cover ~38% of the content width,
	   details ~58%). Below 900px these are unused — mobile stays stacked. */
	--s21-gallery-image-max: 560px;
	--s21-single-gallery-w: 40%;
	--s21-single-summary-max: 760px;
	--s21-gallery-thumb: 84px;
	--s21-shadow: 0 8px 28px rgb(0 0 0 / 0.45);
	--s21-shadow-lg: 0 18px 50px rgb(0 0 0 / 0.6);
	--s21-glow: 0 0 0 1px rgb(255 183 3 / 0.35), 0 12px 40px rgb(255 183 3 / 0.12);

	/* Layers */
	--s21-z-header: 60;
	--s21-z-overlay: 90;
	--s21-z-cartbar: 80;
	--s21-z-dropdown: 70;

	/* Motion */
	--s21-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--s21-speed: 220ms;
}

/* Large text mode (18pt / 24px body) — toggled by the user, stored locally. */
.s21-textsize-stor { --s21-text-size: 20px; }
.s21-textsize-ekstra-stor { --s21-text-size: 24px; }

/* ==========================================================================
   2. Base
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
	/* Native controls (selects, scrollbars, autofill, date pickers) render dark,
	   including the React based WooCommerce Cart/Checkout blocks. */
	color-scheme: dark;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--s21-header-h) + var(--s21-announce-h) + 1rem);
}

body {
	margin: 0;
	background: var(--s21-smoky);
	color: var(--s21-text);
	font-family: var(--s21-font);
	font-size: var(--s21-text-size);
	font-weight: 400;
	line-height: var(--s21-lh);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

body.s21-nav-open,
body.s21-search-open,
body.s21-filters-open { overflow: hidden; }

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--s21-space-3);
	color: var(--s21-ghost);
	font-weight: 700;
	line-height: var(--s21-lh-tight);
	letter-spacing: -0.01em;
}

h1 { font-size: var(--s21-fs-2xl); }
h2 { font-size: var(--s21-fs-xl); }
h3 { font-size: var(--s21-fs-lg); }
h4 { font-size: var(--s21-fs-md); }
h5, h6 { font-size: var(--s21-fs-base); }

p { margin: 0 0 var(--s21-space-4); }

a {
	color: var(--s21-accent);
	text-decoration: none;
	transition: color var(--s21-speed) var(--s21-ease);
}

a:hover { color: var(--s21-accent-hover); }

/* Entry content links get an underline for non-colour affordance (WCAG 1.4.1). */
.entry-content a:not(.s21-btn),
.s21-comment__content a,
.widget a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

img, svg, video { max-width: 100%; height: auto; }
img { border-style: none; }

hr {
	border: 0;
	border-top: 1px solid var(--s21-line);
	margin: var(--s21-space-6) 0;
}

ul, ol { margin: 0 0 var(--s21-space-4); padding-left: 1.35em; }
li { margin-bottom: var(--s21-space-2); }

blockquote {
	margin: var(--s21-space-5) 0;
	padding: var(--s21-space-4) var(--s21-space-5);
	border-left: 3px solid var(--s21-accent);
	background: var(--s21-surface);
	border-radius: 0 var(--s21-radius) var(--s21-radius) 0;
	color: var(--s21-ghost);
	font-size: var(--s21-fs-md);
	font-style: italic;
}

blockquote p:last-child { margin-bottom: 0; }

code, kbd, pre, samp {
	font-family: var(--s21-font-mono);
	font-size: 0.9em;
}

code { background: var(--s21-surface-2); padding: 0.15em 0.4em; border-radius: var(--s21-radius-sm); color: var(--s21-accent); }

pre {
	background: var(--s21-black);
	border: 1px solid var(--s21-line);
	border-radius: var(--s21-radius);
	padding: var(--s21-space-4);
	overflow-x: auto;
	margin: 0 0 var(--s21-space-5);
}

pre code { background: none; padding: 0; color: var(--s21-text); }

table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 var(--s21-space-5);
	font-size: var(--s21-fs-sm);
}

th, td {
	padding: var(--s21-space-3) var(--s21-space-4);
	border-bottom: 1px solid var(--s21-line);
	text-align: left;
}

th { color: var(--s21-ghost); font-weight: 600; }

figure { margin: 0 0 var(--s21-space-5); }

figcaption {
	color: var(--s21-text-dim);
	font-size: var(--s21-fs-xs);
	margin-top: var(--s21-space-2);
}

::selection { background: var(--s21-accent); color: var(--s21-on-accent); }

/* ==========================================================================
   3. Accessibility primitives
   ========================================================================== */

.screen-reader-text,
.s21-sr-only {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	white-space: nowrap;
}

.screen-reader-text:focus,
.screen-reader-text:active {
	clip-path: none;
	background: var(--s21-accent);
	color: var(--s21-on-accent);
	display: block;
	font-size: var(--s21-fs-sm);
	font-weight: 600;
	height: auto;
	left: var(--s21-space-2);
	line-height: normal;
	margin: 0;
	padding: var(--s21-space-3) var(--s21-space-4);
	position: absolute !important;
	top: var(--s21-space-2);
	width: auto;
	z-index: 100000;
	border-radius: var(--s21-radius-sm);
}

.s21-skip-link {
	position: absolute;
	left: var(--s21-space-3);
	top: -100px;
	z-index: 100001;
	background: var(--s21-accent);
	color: var(--s21-on-accent);
	padding: var(--s21-space-3) var(--s21-space-5);
	border-radius: 0 0 var(--s21-radius) var(--s21-radius);
	font-weight: 700;
	transition: top var(--s21-speed) var(--s21-ease);
}

.s21-skip-link:focus { top: 0; color: var(--s21-on-accent); }

:focus-visible {
	outline: 3px solid var(--s21-focus, var(--s21-accent));
	outline-offset: 2px;
	border-radius: var(--s21-radius-sm);
}

/* Fallback for browsers without :focus-visible */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus {
	outline: 3px solid var(--s21-focus, var(--s21-accent));
	outline-offset: 2px;
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) { outline: none; }

[hidden] { display: none !important; }

.s21-live-region { position: absolute !important; }

/* ==========================================================================
   4. Layout primitives
   ========================================================================== */

.s21-container {
	width: 100%;
	max-width: var(--s21-container);
	margin-inline: auto;
	padding-inline: var(--s21-gutter);
}

.s21-container--narrow { max-width: var(--s21-container-narrow); }
.s21-container--wide { max-width: var(--s21-container); }

.s21-page { display: flex; flex-direction: column; min-height: 100vh; }

/* Grid/flex children that hold text: allow shrinking below content width. */
.s21-hero__copy,
.s21-campaign__copy,
.s21-newsletter__copy,
.s21-newsletter__form,
.s21-footer__col,
.s21-entry,
.s21-entry__header,
.s21-mobile-nav__menu,
.s21-mobile-nav__cats { min-width: 0; }

.s21-breadcrumbs__nav { display: block; }

.site-main { flex: 1 0 auto; padding-block: var(--s21-space-6); }
.site-main--front { padding-block: 0; }

.s21-content-layout { display: block; }

.s21-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--s21-space-3);
	justify-content: space-between;
	margin-bottom: var(--s21-space-5);
	padding-bottom: var(--s21-space-3);
	border-bottom: 1px solid var(--s21-line-soft);
}

.s21-section-head__title { margin: 0; font-size: var(--s21-fs-xl); }

.s21-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--s21-space-2);
	color: var(--s21-accent);
	font-size: var(--s21-fs-sm);
	font-weight: 600;
	min-height: var(--s21-tap);
	padding: var(--s21-space-2) 0;
}

.s21-link-arrow:hover { color: var(--s21-accent-hover); gap: var(--s21-space-3); }
.s21-link-arrow .s21-icon { transition: transform var(--s21-speed) var(--s21-ease); }
.s21-link-arrow:hover .s21-icon { transform: translateX(3px); }

.s21-page-header { margin-bottom: var(--s21-space-6); }
.s21-page-header__title { margin-bottom: var(--s21-space-2); }
.s21-page-header__lead { color: var(--s21-text-muted); max-width: 65ch; margin: 0; }

/* ==========================================================================
   5. Buttons, inputs, controls
   ========================================================================== */

.s21-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s21-space-2);
	min-height: var(--s21-tap);
	padding: 0.75em 1.4em;
	border: 1px solid transparent;
	border-radius: var(--s21-radius-pill);
	background: var(--s21-accent);
	color: var(--s21-on-accent) !important;
	font-family: inherit;
	font-size: var(--s21-fs-sm);
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.2;
	cursor: pointer;
	text-align: center;
	text-decoration: none !important;
	transition: background var(--s21-speed) var(--s21-ease), color var(--s21-speed) var(--s21-ease), transform var(--s21-speed) var(--s21-ease), box-shadow var(--s21-speed) var(--s21-ease);
	-webkit-tap-highlight-color: transparent;
}

.s21-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
	background: var(--s21-accent-hover);
	color: var(--s21-on-accent) !important;
	transform: translateY(-1px);
	box-shadow: var(--s21-shadow-sm);
}

.s21-btn:active,
.woocommerce a.button:active,
.woocommerce button.button:active { transform: translateY(0); }

.s21-btn--accent { background: var(--s21-accent); color: var(--s21-on-accent) !important; }
.s21-btn--accent:hover { background: var(--s21-accent-hover); }

/* Card sized add-to-cart (used by the WooCommerce loop). */
.s21-btn--card { width: 100%; min-height: var(--s21-tap); padding: 0.7em 1em; font-size: var(--s21-fs-sm); }

.s21-btn--ghost {
	background: transparent;
	border-color: var(--s21-line);
	color: var(--s21-text) !important;
}

.s21-btn--ghost:hover { background: var(--s21-surface-hover); border-color: var(--s21-accent); color: var(--s21-accent) !important; }

.s21-btn--outline {
	background: transparent;
	border-color: var(--s21-accent);
	color: var(--s21-accent) !important;
}

.s21-btn--outline:hover { background: var(--s21-accent); color: var(--s21-on-accent) !important; }

.s21-btn--lg { min-height: 52px; padding: 0.9em 1.8em; font-size: var(--s21-fs-base); }
.s21-btn--block { width: 100%; }

.s21-btn[disabled],
.s21-btn[aria-disabled="true"],
.woocommerce a.button.disabled,
.woocommerce button.button:disabled {
	opacity: 0.45;
	cursor: not-allowed;
	transform: none;
}

/* Loading state while an AJAX add-to-cart request is in flight. */
.s21-btn.is-loading,
.woocommerce a.button.loading,
.woocommerce button.button.loading {
	position: relative;
	color: transparent !important;
	pointer-events: none;
}

.s21-btn.is-loading::after,
.woocommerce a.button.loading::after,
.woocommerce button.button.loading::after {
	content: '';
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -9px;
	border: 2px solid rgb(12 12 12 / 0.35);
	border-top-color: var(--s21-on-accent);
	border-radius: 50%;
	animation: s21-spin 0.7s linear infinite;
}

@keyframes s21-spin { to { transform: rotate(360deg); } }

.s21-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--s21-tap);
	min-height: var(--s21-tap);
	padding: var(--s21-space-2);
	border: 1px solid transparent;
	border-radius: var(--s21-radius);
	background: transparent;
	color: var(--s21-text);
	cursor: pointer;
	transition: background var(--s21-speed) var(--s21-ease), color var(--s21-speed) var(--s21-ease), border-color var(--s21-speed) var(--s21-ease);
	-webkit-tap-highlight-color: transparent;
}

.s21-icon-btn:hover { background: var(--s21-surface-hover); color: var(--s21-accent); border-color: var(--s21-line); }

.s21-icon { display: inline-block; flex: none; vertical-align: middle; }

.s21-input,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="date"],
select,
textarea {
	width: 100%;
	min-height: var(--s21-tap);
	padding: 0.7em 1em;
	border: 1px solid var(--s21-line);
	border-radius: var(--s21-radius);
	background: var(--s21-surface);
	color: var(--s21-text);
	font-family: inherit;
	font-size: var(--s21-fs-base);
	line-height: 1.4;
	transition: border-color var(--s21-speed) var(--s21-ease), background var(--s21-speed) var(--s21-ease);
}

textarea { min-height: 140px; resize: vertical; }

input::placeholder,
textarea::placeholder { color: var(--s21-text-dim); opacity: 1; }

input:hover, select:hover, textarea:hover { border-color: #3a3a3a; }

input:focus, select:focus, textarea:focus {
	border-color: var(--s21-accent);
	background: var(--s21-surface-2);
	outline: 2px solid var(--s21-focus, var(--s21-accent));
	outline-offset: 1px;
}

select {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--s21-text-muted) 50%), linear-gradient(135deg, var(--s21-text-muted) 50%, transparent 50%);
	background-position: calc(100% - 20px) 52%, calc(100% - 14px) 52%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 2.6em;
}

label { display: block; margin-bottom: var(--s21-space-2); color: var(--s21-text-muted); font-size: var(--s21-fs-sm); font-weight: 600; }

/* Checkbox / radio with a visible, sized control. */
.s21-checkbox,
.woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: flex-start;
	gap: var(--s21-space-3);
	min-height: var(--s21-tap);
	padding: var(--s21-space-2) 0;
	color: var(--s21-text-muted);
	font-size: var(--s21-fs-sm);
	font-weight: 400;
	cursor: pointer;
}

.s21-checkbox input[type="checkbox"],
input[type="checkbox"],
input[type="radio"] {
	flex: none;
	width: 22px;
	height: 22px;
	min-height: 0;
	margin: 0;
	border: 1px solid var(--s21-line);
	border-radius: var(--s21-radius-sm);
	background: var(--s21-surface-2);
	accent-color: var(--s21-accent);
	cursor: pointer;
}

input[type="radio"] { border-radius: 50%; }

.s21-checkbox__box { display: none; }
.s21-checkbox__text { flex: 1 1 auto; }

/* ==========================================================================
   6. Announcement bar
   ========================================================================== */

.s21-announce {
	background: linear-gradient(90deg, var(--s21-black), #161616 45%, var(--s21-black));
	border-bottom: 1px solid var(--s21-line-soft);
	color: var(--s21-text-muted);
	font-size: var(--s21-fs-xs);
	min-height: var(--s21-announce-h);
	display: flex;
	align-items: center;
	position: relative;
	z-index: calc(var(--s21-z-header) + 1);
}

.s21-announce__inner { display: flex; align-items: center; justify-content: center; min-height: var(--s21-announce-h); }
.s21-announce__single { margin: 0; text-align: center; }

.s21-announce__rotator {
	margin: 0;
	position: relative;
	height: var(--s21-announce-h);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	overflow: hidden;
}

.s21-announce__slide {
	position: absolute;
	inset-inline: 0;
	text-align: center;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 500ms var(--s21-ease), transform 500ms var(--s21-ease);
	pointer-events: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-inline: var(--s21-space-2);
}

.s21-announce__slide.is-active { opacity: 1; transform: none; pointer-events: auto; }

/* ==========================================================================
   7. Header
   ========================================================================== */

.s21-header {
	position: var(--s21-header-position);
	inset-block-start: 0;
	z-index: var(--s21-z-header);
	background: rgb(12 12 12 / 0.82);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	backdrop-filter: saturate(160%) blur(14px);
	border-bottom: 1px solid var(--s21-line-soft);
	transition: background var(--s21-speed) var(--s21-ease), box-shadow var(--s21-speed) var(--s21-ease);
}

.s21-header.is-scrolled {
	background: rgb(0 0 0 / 0.92);
	box-shadow: 0 6px 24px rgb(0 0 0 / 0.5);
}

.s21-header__inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--s21-space-3);
	min-height: var(--s21-header-h);
}

.s21-brand { display: flex; align-items: center; min-width: 0; }

.s21-brand__link,
.s21-brand__custom,
.custom-logo-link { display: inline-flex; align-items: center; gap: var(--s21-space-3); min-height: var(--s21-tap); }

.s21-brand__link:hover,
.custom-logo-link:hover { color: var(--s21-ghost); }

.s21-brand__logo,
.custom-logo {
	display: block;
	height: 34px;
	width: auto;
	max-width: 190px;
	object-fit: contain;
}

.s21-brand__name { display: none; }

.s21-header__actions {
	display: flex;
	align-items: center;
	gap: var(--s21-space-1);
	justify-self: end;
}

.s21-account__label { display: none; }

/* Positioning context for the suggestions dropdown: `.s21-search__results` is
   absolutely positioned with `inset-inline: 0`, and without this it escapes to
   the sticky header and spans the whole bar instead of the search field. */
.s21-search { display: none; position: relative; }
.s21-nav { display: none; }
.s21-catstrip { display: none; }

/* Cart link */
.s21-cart-link {
	display: inline-flex;
	align-items: center;
	gap: var(--s21-space-2);
	min-height: var(--s21-tap);
	padding: var(--s21-space-2) var(--s21-space-3);
	border: 1px solid var(--s21-line);
	border-radius: var(--s21-radius-pill);
	background: var(--s21-surface);
	color: var(--s21-text) !important;
	font-size: var(--s21-fs-sm);
	font-weight: 600;
	transition: border-color var(--s21-speed) var(--s21-ease), background var(--s21-speed) var(--s21-ease);
	position: relative;
}

.s21-cart-link:hover { border-color: var(--s21-accent); background: var(--s21-surface-hover); }

.s21-cart-link__icon { position: relative; display: inline-flex; }

.s21-cart-link__count {
	position: absolute;
	inset-block-start: -8px;
	inset-inline-end: -10px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: var(--s21-radius-pill);
	background: var(--s21-accent);
	color: var(--s21-on-accent);
	font-size: 11px;
	font-weight: 800;
	line-height: 20px;
	text-align: center;
	box-shadow: 0 0 0 2px var(--s21-smoky);
}

.s21-cart-link__count.is-empty { display: none; }

/* Inline variant used in the mobile menu (fragment-safe: same class names). */
.s21-cart-link__count--inline {
	position: static;
	inset: auto;
	box-shadow: none;
	margin-inline-start: auto;
	font-size: 12px;
	min-width: 24px;
	height: 24px;
	line-height: 24px;
}
.s21-cart-link__count.is-bumped { animation: s21-bump 420ms var(--s21-ease); }

@keyframes s21-bump {
	0% { transform: scale(1); }
	40% { transform: scale(1.35); }
	100% { transform: scale(1); }
}

.s21-cart-link__text { display: none; flex-direction: column; line-height: 1.15; }
.s21-cart-link__title { font-size: var(--s21-fs-xs); color: var(--s21-text-muted); font-weight: 500; }
.s21-cart-link__total { font-size: var(--s21-fs-sm); font-weight: 700; color: var(--s21-ghost); }
.s21-cart-link__total .woocommerce-Price-currencySymbol { font-weight: 600; }

/* ==========================================================================
   8. Search (inline, overlay, suggestions)
   ========================================================================== */

.s21-search__form {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--s21-space-2);
	width: 100%;
}

/* The magnifier is absolutely positioned inside the form, so the field reserves
   its room: icon offset + icon box + 12px of air. Held in px, not em, because
   the field font-size moves with the text-size switcher. */
.s21-search__form { --s21-search-icon-x: 14px; --s21-search-icon-w: 20px; --s21-search-pad: calc(var(--s21-search-icon-x) + var(--s21-search-icon-w) + 12px); }
.s21-search__form--overlay { --s21-search-icon-w: 22px; }

.s21-search__icon { position: absolute; inset-inline-start: var(--s21-search-icon-x); display: inline-flex; color: var(--s21-text-dim); pointer-events: none; }

/* The base form styles use `input[type="search"]` — an attribute selector, so
   (0,1,1) outranks a lone class (0,1,0). Without repeating the type here the
   `padding: 0.7em 1em` shorthand wins and the "S" of the placeholder "Søg …"
   is typed underneath the magnifier. */
input.s21-search__input[type="search"],
.s21-search__form .s21-search__input { padding-inline-start: var(--s21-search-pad); border-radius: var(--s21-radius-pill); background: var(--s21-surface-2); }

.s21-search__submit {
	position: absolute;
	inset-inline-end: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 50%;
	background: var(--s21-accent);
	color: var(--s21-on-accent);
	cursor: pointer;
	transition: background var(--s21-speed) var(--s21-ease);
}

.s21-search__submit:hover { background: var(--s21-accent-hover); }

.s21-search__form--inline { max-width: 560px; margin-inline: auto; }

.s21-search__results {
	position: absolute;
	inset-inline: 0;
	inset-block-start: calc(100% + 8px);
	z-index: var(--s21-z-dropdown);
	max-height: min(60vh, 420px);
	overflow-y: auto;
	margin: 0;
	padding: var(--s21-space-2);
	list-style: none;
	background: var(--s21-surface);
	border: 1px solid var(--s21-line);
	border-radius: var(--s21-radius);
	box-shadow: var(--s21-shadow-lg);
}

.s21-search__results[hidden] { display: none; }

.s21-search__option {
	display: flex;
	align-items: center;
	gap: var(--s21-space-3);
	padding: var(--s21-space-2);
	border-radius: var(--s21-radius-sm);
	margin: 0;
	cursor: pointer;
}

.s21-search__option:hover,
.s21-search__option.is-active { background: var(--s21-surface-hover); }

.s21-search__option-thumb { flex: none; width: 44px; height: 44px; border-radius: var(--s21-radius-sm); background: var(--s21-image-bg); border: 1px solid var(--s21-image-line); box-sizing: border-box; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.s21-search__option-thumb img { width: 100%; height: 100%; object-fit: contain; object-position: center; padding: 3px; box-sizing: border-box; }
.s21-search__option-body { min-width: 0; }
.s21-search__option-title { display: block; color: var(--s21-ghost); font-size: var(--s21-fs-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s21-search__option-meta { display: block; color: var(--s21-text-dim); font-size: var(--s21-fs-xs); }
.s21-search__status { padding: var(--s21-space-3); color: var(--s21-text-muted); font-size: var(--s21-fs-sm); margin: 0; }

.s21-search-overlay {
	position: fixed;
	inset: 0;
	z-index: var(--s21-z-overlay);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: var(--s21-space-4);
	background: rgb(0 0 0 / 0.72);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.s21-search-overlay[hidden] { display: none; }

.s21-search-overlay__panel {
	width: min(720px, 100%);
	margin-top: 8vh;
	background: var(--s21-surface);
	border: 1px solid var(--s21-line);
	border-radius: var(--s21-radius-lg);
	box-shadow: var(--s21-shadow-lg);
	overflow: hidden;
	animation: s21-pop var(--s21-speed) var(--s21-ease);
}

@keyframes s21-pop { from { opacity: 0; transform: translateY(-10px) scale(0.98); } to { opacity: 1; transform: none; } }

.s21-search-overlay__head { display: flex; align-items: center; gap: var(--s21-space-2); padding: var(--s21-space-4); border-bottom: 1px solid var(--s21-line-soft); }
.s21-search__form--overlay { flex: 1 1 auto; }
.s21-search__results--overlay { position: static; border: 0; box-shadow: none; max-height: 55vh; border-radius: 0; }

/* ==========================================================================
   8b. Info tip + quiet inline note
   ========================================================================== */

/* Inline note (footer, mobile menu, 404). */
.s21-note--info { display: flex; align-items: flex-start; gap: var(--s21-space-2); color: var(--s21-text-dim); font-size: var(--s21-fs-xs); line-height: 1.55; }
.s21-note--info .s21-icon { flex: none; margin-top: 2px; }
.s21-footer__note { max-width: 46ch; }
.s21-error__note { justify-content: center; margin: var(--s21-space-3) auto 0; max-width: 46ch; }
.s21-mobile-nav__note { margin-block-start: calc(var(--s21-space-2) * -1); }

/* Hover/focus bubble. `visibility: hidden` (not `display: none`) keeps the text
   reachable for the `aria-describedby` reference on the phone link. */
.s21-tip { position: relative; display: inline-flex; align-items: center; }
.s21-tip__icon { display: inline-flex; color: var(--s21-text-dim); }
.s21-tip__body {
	position: absolute;
	inset-block-start: calc(100% + 10px);
	inset-inline-end: 0;
	z-index: var(--s21-z-dropdown);
	width: max-content;
	max-width: min(320px, 78vw);
	padding: var(--s21-space-3) var(--s21-space-4);
	border: 1px solid var(--s21-line);
	border-radius: var(--s21-radius);
	background: var(--s21-surface-2);
	box-shadow: 0 12px 32px rgb(0 0 0 / 0.45);
	color: var(--s21-text-muted);
	font-size: var(--s21-fs-xs);
	font-weight: 500;
	line-height: 1.55;
	text-align: start;
	white-space: normal;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity var(--s21-speed) var(--s21-ease), transform var(--s21-speed) var(--s21-ease), visibility var(--s21-speed) var(--s21-ease);
}
.s21-tip__body::before {
	content: '';
	position: absolute;
	inset-block-start: -5px;
	inset-inline-end: 14px;
	width: 8px;
	height: 8px;
	border-top: 1px solid var(--s21-line);
	border-left: 1px solid var(--s21-line);
	background: var(--s21-surface-2);
	transform: rotate(45deg);
}
.s21-tip:hover .s21-tip__body,
.s21-tip:focus-within .s21-tip__body,
.s21-catstrip__contact:hover .s21-tip__body,
.s21-catstrip__contact:focus-within .s21-tip__body { opacity: 1; visibility: visible; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.s21-tip__body { transition: none; }
}

/* ==========================================================================
   9. Mobile navigation (full-screen overlay)
   ========================================================================== */

.s21-mobile-nav {
	position: fixed;
	inset: 0;
	z-index: var(--s21-z-overlay);
	background: rgb(0 0 0 / 0.6);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.s21-mobile-nav[hidden] { display: none; }

.s21-mobile-nav__panel {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	display: flex;
	flex-direction: column;
	width: min(430px, 92vw);
	max-width: 92vw;
	background: var(--s21-smoky);
	border-inline-end: 1px solid var(--s21-line);
	box-shadow: var(--s21-shadow-lg);
	animation: s21-slide-in 260ms var(--s21-ease);
}

@keyframes s21-slide-in { from { transform: translateX(-100%); } to { transform: none; } }

.s21-mobile-nav__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s21-space-3);
	min-height: var(--s21-header-h);
	padding: var(--s21-space-3) var(--s21-space-4);
	border-bottom: 1px solid var(--s21-line-soft);
	background: var(--s21-black);
}

.s21-mobile-nav__title { font-size: var(--s21-fs-md); font-weight: 700; color: var(--s21-ghost); letter-spacing: 0.02em; text-transform: uppercase; }

.s21-mobile-nav__search { padding: var(--s21-space-4); border-bottom: 1px solid var(--s21-line-soft); }

.s21-mobile-nav__scroll { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: var(--s21-space-6); }

.s21-mobile-nav__heading {
	margin: 0;
	padding: var(--s21-space-4) var(--s21-space-4) var(--s21-space-2);
	font-size: var(--s21-fs-xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--s21-text-dim);
}

.s21-menu { list-style: none; margin: 0; padding: 0; }
.s21-menu li { margin: 0; }

.s21-menu--mobile a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s21-space-3);
	min-height: 52px;
	padding: var(--s21-space-3) var(--s21-space-4);
	border-bottom: 1px solid var(--s21-line-soft);
	color: var(--s21-text);
	font-size: var(--s21-fs-base);
	font-weight: 500;
}

.s21-menu--mobile a:hover,
.s21-menu--mobile .current-menu-item > a { color: var(--s21-accent); background: var(--s21-surface); }

.s21-menu--mobile .sub-menu { padding-inline-start: var(--s21-space-4); background: var(--s21-surface); }
.s21-menu--mobile .sub-menu a { font-size: var(--s21-fs-sm); min-height: var(--s21-tap); color: var(--s21-text-muted); }

.s21-catlist { list-style: none; margin: 0; padding: 0; }
.s21-catlist a { display: flex; align-items: center; justify-content: space-between; gap: var(--s21-space-3); min-height: var(--s21-tap); padding: var(--s21-space-3) var(--s21-space-4); color: var(--s21-text-muted); border-bottom: 1px solid var(--s21-line-soft); }
.s21-catlist a:hover { color: var(--s21-accent); }
.s21-catlist__count { font-size: var(--s21-fs-xs); color: var(--s21-text-dim); background: var(--s21-surface-2); border-radius: var(--s21-radius-pill); padding: 2px 10px; }

.s21-mobile-nav__utility { display: flex; flex-direction: column; padding-block: var(--s21-space-3); border-bottom: 1px solid var(--s21-line-soft); }
.s21-mobile-nav__utility-link { display: flex; align-items: center; gap: var(--s21-space-3); min-height: var(--s21-tap); padding: var(--s21-space-3) var(--s21-space-4); color: var(--s21-text); }
.s21-mobile-nav__utility-link:hover { color: var(--s21-accent); }

.s21-mobile-nav__settings { padding: var(--s21-space-4); border-bottom: 1px solid var(--s21-line-soft); }

.s21-mobile-nav__contact { padding: var(--s21-space-4); display: flex; flex-direction: column; gap: var(--s21-space-3); }
.s21-mobile-nav__contact a { display: inline-flex; align-items: center; gap: var(--s21-space-3); min-height: var(--s21-tap); color: var(--s21-text-muted); }
.s21-mobile-nav__contact a:hover { color: var(--s21-accent); }

/* Text size switcher */
.s21-textsize-switch { display: flex; align-items: center; justify-content: space-between; gap: var(--s21-space-3); flex-wrap: wrap; }
.s21-textsize-switch__legend { display: inline-flex; align-items: center; gap: var(--s21-space-2); color: var(--s21-text-muted); font-size: var(--s21-fs-sm); font-weight: 600; }
.s21-textsize-switch__options { display: flex; gap: var(--s21-space-2); }

.s21-textsize-switch__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--s21-tap);
	min-height: var(--s21-tap);
	border: 1px solid var(--s21-line);
	border-radius: var(--s21-radius);
	background: var(--s21-surface);
	color: var(--s21-text-muted);
	font-family: inherit;
	font-weight: 700;
	cursor: pointer;
	transition: all var(--s21-speed) var(--s21-ease);
}

.s21-textsize-switch__btn:nth-child(1) { font-size: 14px; }
.s21-textsize-switch__btn:nth-child(2) { font-size: 17px; }
.s21-textsize-switch__btn:nth-child(3) { font-size: 20px; }

.s21-textsize-switch__btn:hover { border-color: var(--s21-accent); color: var(--s21-accent); }
.s21-textsize-switch__btn.is-active { background: var(--s21-accent); border-color: var(--s21-accent); color: var(--s21-on-accent); }

/* Social icons */
.s21-social { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s21-space-2); margin: 0; padding: 0; }
.s21-social a { display: inline-flex; align-items: center; justify-content: center; width: var(--s21-tap); height: var(--s21-tap); border: 1px solid var(--s21-line); border-radius: var(--s21-radius); background: var(--s21-surface); color: var(--s21-text-muted); }
.s21-social a:hover { border-color: var(--s21-accent); color: var(--s21-accent); background: var(--s21-surface-hover); }

/* Knocked-out detail inside layered brand marks (Nostr) follows the button
   background so the negative space stays correct in every state. */
.s21-icon .s21-icon__cut { fill: var(--s21-icon-cut, var(--s21-surface)); }
.s21-social a:hover, .s21-social a:focus-visible { --s21-icon-cut: var(--s21-surface-hover); }

/* ==========================================================================
   10. USP / trust bar
   ========================================================================== */

.s21-usp { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s21-space-3); }

.s21-usp--bar { grid-template-columns: 1fr; gap: var(--s21-space-2); }
.s21-usp--bar .s21-usp__item { display: flex; align-items: center; gap: var(--s21-space-2); font-size: var(--s21-fs-xs); color: var(--s21-text-muted); }
.s21-usp--bar .s21-usp__text { display: none; }

.s21-usp--grid { grid-template-columns: 1fr; margin-block: var(--s21-space-6); }

.s21-usp__item {
	display: flex;
	align-items: flex-start;
	gap: var(--s21-space-3);
	padding: var(--s21-space-4);
	background: var(--s21-surface);
	border: 1px solid var(--s21-line-soft);
	border-radius: var(--s21-radius);
}

.s21-usp--grid .s21-usp__item { transition: border-color var(--s21-speed) var(--s21-ease), transform var(--s21-speed) var(--s21-ease); }
.s21-usp--grid .s21-usp__item:hover { border-color: var(--s21-line); transform: translateY(-2px); }

.s21-usp__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border-radius: var(--s21-radius); background: rgb(255 183 3 / 0.12); color: var(--s21-accent); }
.s21-usp__body { display: flex; flex-direction: column; gap: 2px; }
.s21-usp__title { color: var(--s21-ghost); font-size: var(--s21-fs-sm); font-weight: 700; }
.s21-usp__text { color: var(--s21-text-muted); font-size: var(--s21-fs-xs); }

/* ==========================================================================
   11. Hero
   ========================================================================== */

.s21-hero {
	position: relative;
	background:
		radial-gradient(1100px 420px at 88% -10%, rgb(255 183 3 / 0.16), transparent 62%),
		linear-gradient(180deg, var(--s21-black), var(--s21-smoky) 70%);
	border-bottom: 1px solid var(--s21-line-soft);
	overflow: hidden;
}

.s21-hero__inner { display: grid; grid-template-columns: 1fr; gap: var(--s21-space-6); padding-block: var(--s21-space-7); }

.s21-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--s21-space-2);
	margin: 0 0 var(--s21-space-4);
	padding: var(--s21-space-2) var(--s21-space-4);
	border: 1px solid rgb(255 183 3 / 0.35);
	border-radius: var(--s21-radius-pill);
	background: rgb(255 183 3 / 0.08);
	color: var(--s21-accent);
	font-size: var(--s21-fs-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.s21-hero__title { font-size: var(--s21-fs-hero); font-weight: 800; letter-spacing: -0.02em; margin-bottom: var(--s21-space-4); }
.s21-hero__title em { font-style: normal; color: var(--s21-accent); }
.s21-hero__text { color: var(--s21-text-muted); font-size: var(--s21-fs-md); max-width: 58ch; margin-bottom: var(--s21-space-5); }
.s21-hero__actions { display: flex; flex-wrap: wrap; gap: var(--s21-space-3); margin-bottom: var(--s21-space-5); }

.s21-hero__points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s21-space-2); }
.s21-hero__points li { display: flex; align-items: center; gap: var(--s21-space-2); margin: 0; color: var(--s21-text-muted); font-size: var(--s21-fs-sm); }
.s21-hero__points .s21-icon { color: var(--s21-accent); }

.s21-hero__visual { position: relative; }
.s21-hero__image { width: 100%; height: 100%; object-fit: cover; border-radius: var(--s21-radius-lg); border: 1px solid var(--s21-line); box-shadow: var(--s21-shadow-lg); }

.s21-hero__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: var(--s21-space-4);
	min-height: 300px;
	padding: var(--s21-space-5);
	border: 1px solid var(--s21-line);
	border-radius: var(--s21-radius-lg);
	background: linear-gradient(150deg, #171717, var(--s21-black) 60%);
	overflow: hidden;
}

.s21-hero__panel-glow {
	position: absolute;
	inset-block-start: -35%;
	inset-inline-end: -20%;
	width: 320px;
	height: 320px;
	border-radius: 50%;
	background: radial-gradient(circle, rgb(255 183 3 / 0.28), transparent 68%);
	filter: blur(6px);
	pointer-events: none;
}

.s21-hero__panel-mark { position: absolute; inset-block-start: var(--s21-space-5); inset-inline-start: var(--s21-space-5); color: rgb(255 183 3 / 0.55); }

/* Shop21's own 21 mark (replaces the ₿ watermark): slightly heavier strokes
   so the numerals read at 54px on the dark panel. */
.s21-hero__panel-mark .s21-icon--twenty-one { stroke-width: 1.9; }

/* Shop21's own 21 artwork (ring badge, brand gold, background keyed to alpha).
   Raster, so hold the intrinsic ratio and keep it crisp at the panel size. */
.s21-hero__panel-mark-img {
	display: block;
	inline-size: 54px;
	block-size: auto;
	aspect-ratio: 136 / 123;
	object-fit: contain;
	opacity: 0.85;
}

/* Links the theme adds to "Om Shop21" from the Customizer: same rhythm as the
   menu items, with a quiet marker when they leave the site. */
.s21-footer-menu .menu-item--extra a[target="_blank"]::after {
	content: "↗";
	margin-inline-start: 0.35em;
	font-size: 0.78em;
	opacity: 0.6;
}

.s21-hero__panel-product {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--s21-space-4);
	padding: var(--s21-space-4);
	border: 1px solid var(--s21-line);
	border-radius: var(--s21-radius);
	background: rgb(12 12 12 / 0.72);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: var(--s21-text) !important;
	transition: border-color var(--s21-speed) var(--s21-ease), transform var(--s21-speed) var(--s21-ease);
}

.s21-hero__panel-product:hover { border-color: var(--s21-accent); transform: translateY(-2px); }
.s21-hero__panel-product img { width: 96px; height: auto; aspect-ratio: 4 / 5; object-fit: contain; object-position: center; box-sizing: border-box; padding: 4px; border: 1px solid var(--s21-image-line); border-radius: var(--s21-radius-sm); background: var(--s21-image-bg); flex: none; }
.s21-hero__panel-caption { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.s21-hero__panel-label { font-size: var(--s21-fs-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--s21-accent); font-weight: 700; }
.s21-hero__panel-name { font-size: var(--s21-fs-md); font-weight: 700; color: var(--s21-ghost); }
.s21-hero__panel-price { color: var(--s21-text-muted); font-weight: 600; }

/* The panel's carousel: the newest podcast episodes, one slide at a time.
   A slide is a single link holding exactly two things — the episode artwork and
   the episode title — so the panel stays a doorway into the show instead of a
   second product card. Built on the same scroll-snap track as the product rows
   (`[data-s21-carousel]` in assets/js/theme.js); the slides are a full panel
   wide, so an arrow press moves exactly one episode and the dots say which one
   is showing. No JavaScript: the track still swipes, the controls stay hidden. */
/* Below 1024px the hero is a single column, so the panel would stretch to the
   whole container and take the 16:9 artwork with it: at 820px that made one
   slide 696x392 and the hero taller than the viewport, pushing the shop under
   the fold. The panel is capped and centred there instead — a card, not a
   billboard — and the 1024px block lifts the cap when the hero goes two-column
   and the panel has its own half of the grid. */
.s21-hero__panel { width: 100%; max-width: 560px; margin-inline: auto; }

.s21-hero__panel-carousel { position: relative; display: flex; flex-direction: column; gap: var(--s21-space-1); min-width: 0; }

.s21-hero__panel-track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	gap: var(--s21-space-4);
	list-style: none;
	min-width: 0;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
}

.s21-hero__panel-track::-webkit-scrollbar { width: 0; height: 0; display: none; }
.s21-hero__panel-track:focus-visible { outline: 2px solid var(--s21-accent); outline-offset: 4px; border-radius: var(--s21-radius); }
/* A flex li makes every card the same height: the grid row is as tall as the
   tallest slide, and the card inside stretches to fill it, so a two-line title
   on one slide and a one-line title on the next do not make the panel shift. */
.s21-hero__panel-slide { display: flex; min-width: 0; margin: 0; scroll-snap-align: start; scroll-snap-stop: always; }

/* Column, not the product card's row: artwork on top, title under it. */
.s21-hero__panel-slide .s21-hero__panel-product { flex: 1 1 auto; flex-direction: column; align-items: stretch; gap: var(--s21-space-3); padding: var(--s21-space-3); }
.s21-hero__panel-slide .s21-hero__panel-product:hover { transform: none; }
.s21-hero__panel-slide .s21-hero__panel-product:focus-visible { outline: 2px solid var(--s21-accent); outline-offset: 2px; }

/* Episodes are published as 16:9 video art, so a slide crops to 16:9 exactly
   like the "Fra bloggen" cards do (.s21-card-post__media): same pictures, same
   treatment, and no light product stage — this is editorial art, not a product
   on white. The long selector is load bearing. The product-card rule
   `.s21-hero__panel-product img` (96px wide, 4:5, contain, 4px padding) is more
   specific than a lone class, so a class-only rule here lost and the artwork
   rendered as a small book-cover-shaped thumbnail beside the title. */
.s21-hero__panel-slide .s21-hero__panel-product img.s21-hero__panel-product-img {
	display: block;
	flex: none;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	padding: 0;
	border: 0;
	border-radius: var(--s21-radius-sm);
	object-fit: cover;
	object-position: center;
	box-sizing: border-box;
	background: var(--s21-surface-2);
}
/* A promoted product is a photo on a light stage, not editorial 16:9 art, so it
   gets the same treatment every other product picture in the theme gets: the
   cream stage and `object-fit: contain`. The frame stays 16:9 — every slide in
   the track is then the same height and the carousel never jumps when it turns.
   Same specificity as the episode rule above, so this one has to come after it. */
.s21-hero__panel-slide--product .s21-hero__panel-product img.s21-hero__panel-product-img {
	padding: var(--s21-image-pad);
	border: 1px solid var(--s21-image-line);
	object-fit: contain;
	background: var(--s21-image-bg);
}

.s21-hero__panel-slide .s21-hero__panel-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--s21-fs-base); line-height: var(--s21-lh-tight); }

.s21-hero__panel-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s21-space-2); }
.s21-hero__panel-nav .s21-icon-btn { border: 1px solid var(--s21-line); background: rgb(12 12 12 / 0.6); }
.s21-hero__panel-nav .s21-icon-btn[hidden], .s21-hero__panel-dots[hidden] { display: none; }
.s21-hero__panel-dots { display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; }

/* 36x44 hit area, 9px visible dot: the row stays compact without dropping
   below the theme's WCAG 2.5.5 target size. */
.s21-hero__panel-dot {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 36px;
	block-size: var(--s21-tap);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--s21-radius-sm);
	background: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.s21-hero__panel-dot::before {
	content: "";
	inline-size: 9px;
	block-size: 9px;
	border: 1px solid var(--s21-text-dim);
	border-radius: 50%;
	background: transparent;
	transition: background var(--s21-speed) var(--s21-ease), border-color var(--s21-speed) var(--s21-ease), transform var(--s21-speed) var(--s21-ease);
}

.s21-hero__panel-dot:hover::before { border-color: var(--s21-accent); transform: scale(1.2); }
.s21-hero__panel-dot.is-active::before { background: var(--s21-accent); border-color: var(--s21-accent); transform: scale(1.2); }
.s21-hero__panel-dot:focus-visible { outline: 2px solid var(--s21-accent); outline-offset: -2px; }

/* ==========================================================================
   12. Category grid
   ========================================================================== */

.s21-catgrid { margin-block: var(--s21-space-6); }
.s21-catgrid__list { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s21-space-3); margin: 0; padding: 0; }
.s21-catgrid__item { margin: 0; }

.s21-catgrid__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--s21-line-soft);
	border-radius: var(--s21-radius);
	background: var(--s21-surface);
	overflow: hidden;
	color: var(--s21-text) !important;
	transition: border-color var(--s21-speed) var(--s21-ease), transform var(--s21-speed) var(--s21-ease), box-shadow var(--s21-speed) var(--s21-ease);
}

.s21-catgrid__link:hover { border-color: var(--s21-accent); transform: translateY(-3px); box-shadow: var(--s21-shadow); }

.s21-catgrid__media { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; background: linear-gradient(160deg, var(--s21-surface-2), var(--s21-black)); overflow: hidden; }

/* A tile carrying a product photo gets the same light stage as a product card
   and `object-fit: contain`, so a book cover keeps its title instead of being
   cut to a square. The dark gradient stays for the icon fallback, where the
   yellow glyph needs it for contrast. */
.s21-catgrid__media--image { background: var(--s21-image-bg); padding: var(--s21-image-pad); box-sizing: border-box; }
.s21-catgrid__media img { width: 100%; height: 100%; object-fit: contain; object-position: center; transition: transform 500ms var(--s21-ease); }
.s21-catgrid__link:hover .s21-catgrid__media img { transform: scale(1.05); }
.s21-catgrid__icon { color: rgb(255 183 3 / 0.65); }
.s21-catgrid__body { display: flex; flex-direction: column; gap: 2px; padding: var(--s21-space-4); }
.s21-catgrid__name { color: var(--s21-ghost); font-size: var(--s21-fs-base); font-weight: 700; }
.s21-catgrid__count { color: var(--s21-text-dim); font-size: var(--s21-fs-xs); }

.s21-cat-chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s21-space-2); margin: var(--s21-space-4) 0 0; padding: 0; }
.s21-cat-chips__item { margin: 0; }
.s21-cat-chips__link { display: inline-flex; align-items: center; gap: var(--s21-space-2); min-height: var(--s21-tap); padding: var(--s21-space-2) var(--s21-space-4); border: 1px solid var(--s21-line); border-radius: var(--s21-radius-pill); background: var(--s21-surface); color: var(--s21-text) !important; font-size: var(--s21-fs-sm); font-weight: 600; }
.s21-cat-chips__link:hover { border-color: var(--s21-accent); color: var(--s21-accent) !important; }
.s21-cat-chips__count { color: var(--s21-text-dim); font-size: var(--s21-fs-xs); }

/* ==========================================================================
   13. Campaign band
   ========================================================================== */

.s21-campaign {
	margin-block: var(--s21-space-7);
	border-block: 1px solid var(--s21-line-soft);
	background:
		radial-gradient(700px 300px at 10% 0%, rgb(255 183 3 / 0.1), transparent 60%),
		var(--s21-black);
}

.s21-campaign__inner { display: grid; grid-template-columns: 1fr; gap: var(--s21-space-6); padding-block: var(--s21-space-7); }
.s21-campaign__title { font-size: var(--s21-fs-2xl); margin-bottom: var(--s21-space-4); }
.s21-campaign__text { color: var(--s21-text-muted); max-width: 60ch; margin-bottom: var(--s21-space-5); }

.s21-campaign__stats { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s21-space-3); margin: 0; padding: 0; align-content: start; }
.s21-campaign__stats li { margin: 0; padding: var(--s21-space-4); border: 1px solid var(--s21-line-soft); border-radius: var(--s21-radius); background: var(--s21-surface); text-align: center; }
.s21-campaign__stat-value { display: block; color: var(--s21-accent); font-size: var(--s21-fs-lg); font-weight: 800; line-height: 1.1; }
.s21-campaign__stat-label { display: block; margin-top: var(--s21-space-2); color: var(--s21-text-muted); font-size: var(--s21-fs-xs); }

/* ==========================================================================
   14. Product rows + carousel
   ========================================================================== */

.s21-product-row { margin-block: var(--s21-space-7); }
.s21-product-row__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s21-space-3); margin-bottom: var(--s21-space-5); padding-bottom: var(--s21-space-3); border-bottom: 1px solid var(--s21-line-soft); }
.s21-product-row__title { margin: 0; font-size: var(--s21-fs-xl); }
.s21-product-row__tools { display: flex; align-items: center; gap: var(--s21-space-3); }

.s21-carousel { position: relative; }
.s21-carousel__controls { display: flex; gap: var(--s21-space-2); }

.s21-carousel__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(230px, 1fr);
	gap: var(--s21-space-4);
	list-style: none;
	margin: 0;
	padding: var(--s21-space-1) var(--s21-space-1) var(--s21-space-4);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	scrollbar-color: var(--s21-line) transparent;
	-webkit-overflow-scrolling: touch;
}

.s21-carousel__track > * { scroll-snap-align: start; }

.s21-carousel__track::-webkit-scrollbar { height: 6px; }
.s21-carousel__track::-webkit-scrollbar-thumb { background: var(--s21-line); border-radius: var(--s21-radius-pill); }

.s21-carousel--static .s21-carousel__track { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); overflow: visible; }

.s21-carousel__controls .s21-icon-btn { border: 1px solid var(--s21-line); }

/* ==========================================================================
   15. Blog grid, cards, entry content
   ========================================================================== */

.s21-post-grid { display: grid; grid-template-columns: 1fr; gap: var(--s21-space-5); margin-bottom: var(--s21-space-6); }

/* Post cards ("Fra bloggen", archive, search, blog index).
   Each story is its own bordered card on the raised surface, the excerpt is
   clamped to three lines and "Laes mere" is pinned to the bottom so cards in a
   row always line up regardless of title length. */
.s21-card-post {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	background: var(--s21-surface);
	border: 1px solid var(--s21-line-soft);
	border-radius: var(--s21-radius);
	overflow: hidden;
	transition: border-color var(--s21-speed) var(--s21-ease), transform var(--s21-speed) var(--s21-ease);
}

.s21-card-post:hover,
.s21-card-post:focus-within { border-color: var(--s21-line); transform: translateY(-2px); }

/* The card is one tap target. The title carries the real, focusable link and this
   overlay makes the image, the excerpt and "Laes mere" clickable as well. It is a
   direct child of the card because the clamped title has overflow:hidden, which
   would clip an overlay placed inside it, and the byline links are lifted above it
   so an author link still works. */
.s21-card-post__link {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	border-radius: inherit;
}

.s21-card-post__title-link { position: relative; z-index: 2; color: inherit; text-decoration: none; }
.s21-card-post__title-link:hover,
.s21-card-post__title-link:focus-visible { color: inherit; }
.s21-card-post .s21-entry-meta a { position: relative; z-index: 2; }

.s21-card-post__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--s21-surface-2); }
.s21-card-post__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

.s21-card-post__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: var(--s21-space-2);
	padding: var(--s21-space-4);
}

.s21-card-post__title {
	margin: 0;
	font-size: var(--s21-fs-md);
	line-height: var(--s21-lh-tight);
	color: var(--s21-ghost);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.s21-card-post:hover .s21-card-post__title { color: var(--s21-accent); }

.s21-card-post__excerpt {
	color: var(--s21-text-muted);
	font-size: var(--s21-fs-sm);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.s21-card-post__more { margin-top: auto; padding-top: var(--s21-space-2); color: var(--s21-accent); font-size: var(--s21-fs-sm); font-weight: 600; }

.s21-card-post { position: relative; border: 1px solid var(--s21-line-soft); border-radius: var(--s21-radius); background: var(--s21-surface); overflow: hidden; transition: border-color var(--s21-speed) var(--s21-ease), transform var(--s21-speed) var(--s21-ease); }
.s21-card-post:hover { border-color: var(--s21-line); transform: translateY(-3px); }
.s21-card-post__link { position: absolute; inset: 0; z-index: 1; display: block; }
.s21-card-post__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--s21-surface-2); }
.s21-card-post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--s21-ease); }
.s21-card-post:hover .s21-card-post__media img { transform: scale(1.04); }
.s21-card-post__body { display: flex; flex-direction: column; gap: var(--s21-space-3); padding: var(--s21-space-4); }
.s21-card-post__title { margin: 0; font-size: var(--s21-fs-md); }
.s21-card-post__excerpt { color: var(--s21-text-muted); font-size: var(--s21-fs-sm); }
.s21-card-post__more { margin-top: auto; color: var(--s21-accent); font-size: var(--s21-fs-sm); font-weight: 600; }

.s21-entry-meta { display: flex; flex-wrap: wrap; gap: var(--s21-space-3); color: var(--s21-text-dim); font-size: var(--s21-fs-xs); }
.s21-entry-meta__item { display: inline-flex; align-items: center; gap: var(--s21-space-2); }
.s21-entry-meta__item a { color: var(--s21-text-muted); }
.s21-entry-meta--single { margin-bottom: var(--s21-space-3); }

.s21-entry { margin-bottom: var(--s21-space-5); }
.s21-entry__header { margin-bottom: var(--s21-space-5); }
.s21-entry--single { max-width: 72ch; margin-inline: auto; }

.s21-editorial { margin-block: var(--s21-space-7); }

.s21-search-products { margin-block: var(--s21-space-6); }

.s21-mobile-nav__menu,
.s21-mobile-nav__cats { border-bottom: 1px solid var(--s21-line-soft); }

.s21-catlist__item { margin: 0; }

.s21-footer__col { display: flex; flex-direction: column; }
.s21-footer__col--brand { gap: var(--s21-space-3); }
.s21-footer__col--widget .s21-widget { background: none; border: 0; padding: 0; }

.s21-social--mobile { margin-top: var(--s21-space-2); }
.s21-header__cart { flex: none; }
.s21-toolbar--sidebar { padding-inline: 0; }

.s21-entry--single { max-width: 72ch; }
.s21-entry__title { font-size: var(--s21-fs-2xl); margin-bottom: var(--s21-space-4); }
.s21-entry__media { margin-bottom: var(--s21-space-5); border-radius: var(--s21-radius); overflow: hidden; border: 1px solid var(--s21-line-soft); }
.s21-entry__media img { width: 100%; display: block; }
.s21-entry__content > :first-child { margin-top: 0; }
.s21-entry__content .alignwide { max-width: 1100px; margin-inline: auto; }
.s21-entry__content .alignfull { width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw); }
.s21-entry__footer { margin-top: var(--s21-space-6); padding-top: var(--s21-space-4); border-top: 1px solid var(--s21-line-soft); }
.s21-entry__terms { color: var(--s21-text-muted); font-size: var(--s21-fs-sm); margin-bottom: var(--s21-space-2); }
.s21-entry__terms a { color: var(--s21-accent); }

.s21-page-links { display: flex; gap: var(--s21-space-2); margin-block: var(--s21-space-5); }
.s21-page-links .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: var(--s21-tap); min-height: var(--s21-tap); border: 1px solid var(--s21-line); border-radius: var(--s21-radius); color: var(--s21-text); }
.s21-page-links .page-numbers.current { background: var(--s21-accent); border-color: var(--s21-accent); color: var(--s21-on-accent); }

.s21-post-nav { display: grid; grid-template-columns: 1fr; gap: var(--s21-space-4); margin-block: var(--s21-space-6); }
.s21-post-nav__item { display: flex; flex-direction: column; gap: var(--s21-space-2); padding: var(--s21-space-4); border: 1px solid var(--s21-line-soft); border-radius: var(--s21-radius); background: var(--s21-surface); color: var(--s21-text) !important; }
.s21-post-nav__item:hover { border-color: var(--s21-accent); }
.s21-post-nav__dir { display: inline-flex; align-items: center; gap: var(--s21-space-2); color: var(--s21-accent); font-size: var(--s21-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.s21-post-nav__title { color: var(--s21-ghost); font-weight: 600; }

/* Comments */
.s21-comments { margin-top: var(--s21-space-7); padding-top: var(--s21-space-6); border-top: 1px solid var(--s21-line-soft); }
.s21-comments__title { font-size: var(--s21-fs-lg); margin-bottom: var(--s21-space-5); }
.s21-comment-list { list-style: none; margin: 0 0 var(--s21-space-6); padding: 0; }
.s21-comment { margin-bottom: var(--s21-space-4); }
.s21-comment .children { list-style: none; margin: var(--s21-space-4) 0 0; padding-inline-start: var(--s21-space-5); border-inline-start: 1px solid var(--s21-line); }
.s21-comment__body { padding: var(--s21-space-4); border: 1px solid var(--s21-line-soft); border-radius: var(--s21-radius); background: var(--s21-surface); }
.s21-comment__meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s21-space-3); margin-bottom: var(--s21-space-3); }
.s21-comment__avatar img { border-radius: 50%; display: block; }
.s21-comment__author { color: var(--s21-ghost); font-weight: 700; }
.s21-comment__date { color: var(--s21-text-dim); font-size: var(--s21-fs-xs); }
.s21-comment__content { color: var(--s21-text-muted); font-size: var(--s21-fs-sm); }
.s21-comment__content p:last-child { margin-bottom: 0; }
.s21-comment__moderation { color: var(--s21-warning); font-size: var(--s21-fs-sm); }
.s21-comment__reply a { display: inline-flex; align-items: center; min-height: var(--s21-tap); color: var(--s21-accent); font-size: var(--s21-fs-sm); font-weight: 600; }
.s21-comments__closed { color: var(--s21-text-muted); }
.comment-form { display: grid; gap: var(--s21-space-4); }
.comment-form-comment, .comment-form-author, .comment-form-email, .comment-form-url { margin: 0; }
.comment-form-cookies-consent { display: flex; align-items: flex-start; gap: var(--s21-space-3); }
.form-submit { margin: 0; }

/* Podcast — episode player, file links and the "Find podcasten" row.
   Two blocks, one look. The theme draws both itself (see inc/podcast.php) when
   nothing else has, and Blubrry PowerPress draws both when it is active — so
   the plugin's markup is repainted here too. PowerPress styles its subscribe
   widget for a white page (#FFFFFF slab, #444 text, #707070 hairlines,
   sans-serif) which lands on Smoky Black as a glare block with unreadable
   labels; every override below carries !important because the plugin's own
   "include" variant does, and a `body` prefix because its sheet is printed in
   the footer, after this one. */

/* --- The player, whichever of us drew it ---------------------------------- */
.s21-podcast-player { margin-block: 0 var(--s21-space-5); }
.s21-podcast-player__media { margin: 0; }

/* PowerPress prints a hard-coded inline `width: 640px` on its .wp-video
   wrapper. The old theme resized that with JS (bookshelf_resize); CSS does the
   same job without the script, so the player follows the 860px column and the
   390px phone instead of overflowing either. */
.s21-podcast-player__media .wp-video,
.s21-podcast-player__media .wp-audio,
.powerpress_player .wp-video,
.powerpress_player .wp-audio { width: 100% !important; max-width: 100% !important; }

.s21-podcast-player video,
.s21-podcast-player audio,
.powerpress_player video,
.powerpress_player audio,
.s21-entry__content video,
.s21-entry__content audio { max-width: 100%; }

.s21-podcast-media__fallback { display: block; width: 100%; background: var(--s21-black); border: 1px solid var(--s21-line); border-radius: var(--s21-radius); }
.mejs-container { max-width: 100%; }

/* --- The two file links under the player ---------------------------------- */
.s21-podcast-links,
.powerpress_links {
	color: var(--s21-text-muted) !important;
	font-family: var(--s21-font);
	font-size: var(--s21-fs-sm) !important;
	margin-block: var(--s21-space-3) var(--s21-space-6) !important;
}
.s21-podcast-links__label { color: var(--s21-text-dim); font-size: var(--s21-fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.s21-podcast-links a,
.powerpress_links a { color: var(--s21-accent); font-weight: 600; text-underline-offset: 3px; }
.s21-podcast-links a:hover,
.s21-podcast-links a:focus-visible,
.powerpress_links a:hover,
.powerpress_links a:focus-visible { color: var(--s21-accent-hover); text-decoration: underline; }
.s21-podcast-links__sep { color: var(--s21-line); padding-inline: var(--s21-space-1); }
.s21-podcast-player__duration { color: var(--s21-text-dim); font-size: var(--s21-fs-xs); margin-block: var(--s21-space-2) 0; }

/* --- The theme's own service row ------------------------------------------ */
.s21-podcast-services {
	margin-block: var(--s21-space-7);
	padding: var(--s21-space-6);
	border: 1px solid var(--s21-line-soft);
	border-radius: var(--s21-radius-lg);
	background: var(--s21-surface);
}
.s21-podcast-services__title { margin: 0 0 var(--s21-space-2); color: var(--s21-ghost); font-size: var(--s21-fs-lg); }
.s21-podcast-services__intro { margin: 0 0 var(--s21-space-5); color: var(--s21-text-muted); font-size: var(--s21-fs-sm); }
.s21-podcast-services__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s21-space-3); list-style: none; margin: 0; padding: 0; }
.s21-podcast-services__item { margin: 0; }
.s21-podcast-services__link {
	display: flex;
	align-items: center;
	gap: var(--s21-space-3);
	min-height: var(--s21-tap);
	padding: var(--s21-space-3) var(--s21-space-4);
	border: 1px solid var(--s21-line);
	border-radius: var(--s21-radius);
	background: var(--s21-surface-2);
	color: var(--s21-text);
	font-size: var(--s21-fs-sm);
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.s21-podcast-services__link:hover,
.s21-podcast-services__link:focus-visible { border-color: var(--s21-accent); background: var(--s21-surface-hover); color: var(--s21-accent); transform: translateY(-1px); }
.s21-podcast-services__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--s21-radius-sm);
	background: var(--s21-ghost);
	color: var(--s21-black);
	transition: background-color 0.18s ease, color 0.18s ease;
}
.s21-podcast-services__link:hover .s21-podcast-services__icon,
.s21-podcast-services__link:focus-visible .s21-podcast-services__icon { background: var(--s21-accent); color: var(--s21-on-accent); }
.s21-podcast-services__label { min-width: 0; overflow-wrap: anywhere; }

/* Tighter variant, used under a player on an episode page. */
.s21-podcast-services--episode { margin-block: var(--s21-space-5); padding: var(--s21-space-4); }
.s21-podcast-services--episode .s21-podcast-services__list { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--s21-space-2); }
.s21-podcast-services--episode .s21-podcast-services__link { padding: var(--s21-space-2) var(--s21-space-3); }
.s21-podcast-services--episode .s21-podcast-services__icon { width: 32px; height: 32px; }

/* --- PowerPress subscribe widget, repainted for this theme ---------------- */
body .pp-sub-widget,
body .pp-sub-widget-modern {
	width: 100% !important;
	max-width: 100%;
	margin-block: var(--s21-space-7) !important;
	padding: var(--s21-space-5) !important;
	border: 1px solid var(--s21-line-soft);
	border-radius: var(--s21-radius-lg);
	background-color: var(--s21-surface) !important;
	color: var(--s21-text);
	font-family: var(--s21-font) !important;
}
body .pp-sub-widget .pp-sub-l { max-width: 96px; height: auto; margin: 0 var(--s21-space-4) var(--s21-space-3) 0 !important; border-radius: var(--s21-radius); }
body .pp-sub-widget div.pp-sub-t,
body .pp-sub-widget-include div.pp-sub-t { color: var(--s21-ghost) !important; font-family: var(--s21-font) !important; }
body .pp-sub-widget .pp-sub-a,
body .pp-sub-widget-include .pp-sub-a { color: var(--s21-accent) !important; }
body .pp-sub-widget p.pp-sub-st,
body .pp-sub-widget-include p.pp-sub-st { color: var(--s21-text-muted) !important; }

body .pp-sub-btns { display: flex !important; flex-wrap: wrap; gap: var(--s21-space-3); margin-block-end: 0 !important; }
body .pp-sub-btns .filling-empty-space { display: none !important; }

body .pp-sub-widget-modern a.pp-sub-btn-sq,
body .pp-sub-widget-modern a.pp-sub-btn,
body .pp-sub-widget-modern.pp-sub-widget-include a.pp-sub-btn-sq,
body .pp-sub-widget-modern.pp-sub-widget-include a.pp-sub-btn {
	display: inline-flex !important;
	flex: 1 1 210px;
	align-items: center;
	gap: var(--s21-space-3);
	width: auto !important;
	height: auto !important;
	min-height: var(--s21-tap);
	margin: 0 !important;
	padding: var(--s21-space-3) var(--s21-space-4) !important;
	overflow: visible;
	border: 1px solid var(--s21-line) !important;
	border-radius: var(--s21-radius) !important;
	background-color: var(--s21-surface-2) !important;
	background-image: none !important;
	color: var(--s21-text) !important;
	font-family: var(--s21-font) !important;
	font-size: var(--s21-fs-sm) !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	text-align: left;
	text-decoration: none !important;
	transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}
body .pp-sub-widget-modern a.pp-sub-btn-sq:hover,
body .pp-sub-widget-modern a.pp-sub-btn:hover,
body .pp-sub-widget-modern a.pp-sub-btn-sq:focus-visible,
body .pp-sub-widget-modern a.pp-sub-btn:focus-visible {
	border-color: var(--s21-accent) !important;
	background: var(--s21-surface-hover) !important;
	color: var(--s21-accent) !important;
}
/* The plugin's 48px sprite icons keep their own position/size; a light chip
   behind them is all they need to read on a dark page. */
body .pp-sub-widget .pp-sub-ic { flex: 0 0 auto; border-radius: var(--s21-radius-sm); background-color: var(--s21-ghost); }

/* The plugin pushes whatever follows its widget 32px right and repaints the
   entry header; neither belongs to this theme. */
.s21-entry__content .pp-sub-widget ~ p,
.s21-entry__content .pp-sub-widget ~ h2,
.s21-entry__content .pp-sub-widget ~ h3 { margin-left: 0; }

@media (max-width: 600px) {
	.s21-podcast-services { padding: var(--s21-space-4); }
	.s21-podcast-services__list { grid-template-columns: 1fr; }
	body .pp-sub-widget, body .pp-sub-widget-modern { padding: var(--s21-space-4) !important; }
	body .pp-sub-widget-modern a.pp-sub-btn-sq,
	body .pp-sub-widget-modern a.pp-sub-btn { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.s21-podcast-services__link,
	.s21-podcast-services__icon,
	body .pp-sub-widget-modern a.pp-sub-btn-sq,
	body .pp-sub-widget-modern a.pp-sub-btn { transition: none; }
	.s21-podcast-services__link:hover { transform: none; }
}

/* ==========================================================================
   16. Pagination + breadcrumbs
   ========================================================================== */

.s21-pagination { margin-block: var(--s21-space-6); }
.s21-pagination__list { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s21-space-2); margin: 0; padding: 0; }
.s21-pagination__item { margin: 0; }

.s21-pagination__item > * {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--s21-tap);
	min-height: var(--s21-tap);
	padding: 0 var(--s21-space-3);
	border: 1px solid var(--s21-line);
	border-radius: var(--s21-radius);
	background: var(--s21-surface);
	color: var(--s21-text) !important;
	font-size: var(--s21-fs-sm);
	font-weight: 600;
}

.s21-pagination__item > *:hover { border-color: var(--s21-accent); color: var(--s21-accent) !important; }
.s21-pagination__item.is-current > *,
.s21-pagination__item .current { background: var(--s21-accent); border-color: var(--s21-accent); color: var(--s21-on-accent) !important; }
.s21-pagination__item .dots { border: 0; background: none; color: var(--s21-text-dim) !important; }

.s21-breadcrumbs { margin-bottom: var(--s21-space-4); }
.s21-breadcrumbs__list { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s21-space-2); margin: 0; padding: 0; font-size: var(--s21-fs-xs); color: var(--s21-text-dim); }
.s21-breadcrumbs__item { display: inline-flex; align-items: center; gap: var(--s21-space-2); margin: 0; }
.s21-breadcrumbs__item a { color: var(--s21-text-muted); }
.s21-breadcrumbs__item a:hover { color: var(--s21-accent); }
.s21-breadcrumbs__sep { color: var(--s21-line); }
.s21-breadcrumbs__item[aria-current="page"] { color: var(--s21-text); }

/* ==========================================================================
   17. Empty states + 404
   ========================================================================== */

.s21-empty { text-align: center; padding-block: var(--s21-space-7); max-width: 640px; margin-inline: auto; }
.s21-empty__icon { display: inline-flex; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: 50%; background: var(--s21-surface); border: 1px solid var(--s21-line); color: var(--s21-accent); margin-bottom: var(--s21-space-4); }
.s21-empty__title { font-size: var(--s21-fs-xl); margin-bottom: var(--s21-space-3); }
.s21-empty__text { color: var(--s21-text-muted); margin-bottom: var(--s21-space-5); }
.s21-empty__actions { display: flex; flex-wrap: wrap; gap: var(--s21-space-3); justify-content: center; margin-block: var(--s21-space-5); }
.s21-empty__cats { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s21-space-2); justify-content: center; margin: var(--s21-space-5) 0 0; padding: 0; }
.s21-empty__cats a { display: inline-flex; align-items: center; min-height: var(--s21-tap); padding: var(--s21-space-2) var(--s21-space-4); border: 1px solid var(--s21-line); border-radius: var(--s21-radius-pill); color: var(--s21-text) !important; font-size: var(--s21-fs-sm); }
.s21-empty__cats a:hover { border-color: var(--s21-accent); color: var(--s21-accent) !important; }

.s21-error { text-align: center; padding-block: var(--s21-space-7); }
.s21-error__code { margin: 0; font-size: clamp(4rem, 18vw, 9rem); font-weight: 800; line-height: 1; color: transparent; -webkit-text-stroke: 2px rgb(255 183 3 / 0.5); }
.s21-error__title { font-size: var(--s21-fs-2xl); margin-block: var(--s21-space-4); }
.s21-error__text { color: var(--s21-text-muted); max-width: 60ch; margin-inline: auto; margin-bottom: var(--s21-space-5); }
.s21-error__search { max-width: 560px; margin-inline: auto; margin-bottom: var(--s21-space-5); }
.s21-error__actions { display: flex; flex-wrap: wrap; gap: var(--s21-space-3); justify-content: center; }
.s21-error__cats, .s21-error__contact { margin-top: var(--s21-space-7); text-align: center; }
.s21-error__cats .s21-cat-chips { justify-content: center; }
.s21-contact-list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s21-space-4); justify-content: center; margin: var(--s21-space-4) 0 0; padding: 0; }
.s21-contact-list a { display: inline-flex; align-items: center; gap: var(--s21-space-2); min-height: var(--s21-tap); color: var(--s21-text) !important; }
.s21-contact-list a:hover { color: var(--s21-accent) !important; }

/* ==========================================================================
   18. Widgets
   ========================================================================== */

.s21-sidebar { padding-block: var(--s21-space-6); }

.s21-widget { margin-bottom: var(--s21-space-5); padding: var(--s21-space-4); border: 1px solid var(--s21-line-soft); border-radius: var(--s21-radius); background: var(--s21-surface); }
.s21-widget__title { font-size: var(--s21-fs-base); margin-bottom: var(--s21-space-3); color: var(--s21-ghost); }
.s21-widget ul { list-style: none; margin: 0; padding: 0; }
.s21-widget li { margin: 0; }
.s21-widget a { display: inline-flex; align-items: center; min-height: var(--s21-tap); color: var(--s21-text-muted); }
.s21-widget a:hover { color: var(--s21-accent); }

/* ==========================================================================
   19. Footer
   ========================================================================== */

.s21-footer {
	background: var(--s21-black);
	border-top: 1px solid var(--s21-line-soft);
	padding-block: var(--s21-space-7) var(--s21-space-5);
	color: var(--s21-text-muted);
	font-size: var(--s21-fs-sm);
	padding-bottom: calc(var(--s21-space-5) + env(safe-area-inset-bottom, 0px));
}

.s21-newsletter {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s21-space-5);
	padding: var(--s21-space-5);
	margin-bottom: var(--s21-space-6);
	border: 1px solid rgb(255 183 3 / 0.28);
	border-radius: var(--s21-radius-lg);
	background: linear-gradient(140deg, rgb(255 183 3 / 0.1), transparent 55%), var(--s21-surface);
}

.s21-newsletter__title { font-size: var(--s21-fs-xl); margin-bottom: var(--s21-space-3); }
.s21-newsletter__text { color: var(--s21-text-muted); margin: 0; max-width: 52ch; }
.s21-newsletter__hint { color: var(--s21-text-dim); font-size: var(--s21-fs-sm); margin: 0; }
.s21-newsletter-form__row { display: grid; grid-template-columns: 1fr; gap: var(--s21-space-3); }
.s21-newsletter-form__consent { margin: var(--s21-space-3) 0 0; font-size: var(--s21-fs-xs); }
.s21-newsletter-form__status { margin: var(--s21-space-3) 0 0; font-size: var(--s21-fs-sm); min-height: 1.4em; color: var(--s21-success); }
.s21-newsletter-form__status.is-error { color: var(--s21-danger); }
.s21-newsletter-form__status[aria-busy="true"] { color: var(--s21-text-dim); }
.s21-btn.is-busy { opacity: 0.65; cursor: progress; }

/* Honeypot: invisible, unreachable by keyboard, unannounced to screen readers. */
.s21-hp {
	position: absolute !important;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	width: 1px;
	height: 1px;
	margin: 0;
	overflow: hidden;
	white-space: nowrap;
}

/* MailPoet signup inside the newsletter box — brand colours instead of
   MailPoet's light defaults, so "Få nye bøger først" accepts a direct signup. */
.s21-newsletter .mailpoet_form { margin: 0; font-family: inherit; color: var(--s21-text); }
.s21-newsletter .mailpoet_paragraph,
.s21-newsletter .mailpoet_form p { margin: 0 0 var(--s21-space-3); font-size: var(--s21-fs-xs); color: var(--s21-text-dim); }
.s21-newsletter .mailpoet_form label,
.s21-newsletter .mailpoet_form .mailpoet_label { color: var(--s21-text-muted); font-size: var(--s21-fs-sm); }
.s21-newsletter .mailpoet_form .mailpoet_text,
.s21-newsletter .mailpoet_form input[type='text'],
.s21-newsletter .mailpoet_form input[type='email'],
.s21-newsletter .mailpoet_form textarea,
.s21-newsletter .mailpoet_form select {
	width: 100%;
	min-height: 48px;
	padding: var(--s21-space-3) var(--s21-space-4);
	background: var(--s21-surface-2);
	color: var(--s21-text);
	border: 1px solid var(--s21-line);
	border-radius: var(--s21-radius-pill);
	font: inherit;
}
.s21-newsletter .mailpoet_form .mailpoet_text:focus-visible,
.s21-newsletter .mailpoet_form input[type='email']:focus-visible,
.s21-newsletter .mailpoet_form textarea:focus-visible,
.s21-newsletter .mailpoet_form select:focus-visible {
	border-color: var(--s21-accent);
	outline: 2px solid var(--s21-accent);
	outline-offset: 2px;
}
.s21-newsletter .mailpoet_form input[type='checkbox'],
.s21-newsletter .mailpoet_form .mailpoet_checkbox { width: 20px; height: 20px; accent-color: var(--s21-accent); }
.s21-newsletter .mailpoet_form .mailpoet_submit,
.s21-newsletter .mailpoet_form input[type='submit'],
.s21-newsletter .mailpoet_form button[type='submit'] {
	min-height: 48px;
	padding: var(--s21-space-3) var(--s21-space-6);
	background: var(--s21-accent);
	color: var(--s21-on-accent);
	border: 0;
	border-radius: var(--s21-radius-pill);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}
.s21-newsletter .mailpoet_form .mailpoet_submit:hover,
.s21-newsletter .mailpoet_form input[type='submit']:hover,
.s21-newsletter .mailpoet_form button[type='submit']:hover { background: var(--s21-accent-hover); }
.s21-newsletter .mailpoet_form .mailpoet_submit:focus-visible,
.s21-newsletter .mailpoet_form input[type='submit']:focus-visible { outline: 2px solid var(--s21-ghost); outline-offset: 2px; }
.s21-newsletter .mailpoet_message_success,
.s21-newsletter .mailpoet_message_success p { color: var(--s21-success); font-size: var(--s21-fs-sm); }
.s21-newsletter .mailpoet_message_error,
.s21-newsletter .mailpoet_message_error p { color: var(--s21-danger); font-size: var(--s21-fs-sm); }
.s21-newsletter .mailpoet_form_loading { opacity: .6; }

/* Terms + cookie links belong to the footer legal bar, never to the box.
   Belt and braces: shop21_strip_legal_links() removes them server-side too. */
.s21-newsletter a[href*='handelsbetingelser'],
.s21-newsletter a[href*='conditions'],
.s21-newsletter a[href*='cookie'],
.s21-newsletter a[href*='privatliv'],
.s21-newsletter a[href*='privacy'] { display: none; }


.s21-footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--s21-space-6); padding-bottom: var(--s21-space-6); border-bottom: 1px solid var(--s21-line-soft); }
.s21-footer__logo img { height: 44px; width: auto; max-width: 200px; object-fit: contain; }
.s21-footer__tagline { color: var(--s21-text-dim); margin-block: var(--s21-space-3); font-size: var(--s21-fs-sm); }
.s21-footer__heading { font-size: var(--s21-fs-base); text-transform: uppercase; letter-spacing: 0.08em; color: var(--s21-ghost); margin-bottom: var(--s21-space-4); }
.s21-footer__address { font-style: normal; display: flex; flex-direction: column; gap: var(--s21-space-2); margin-bottom: var(--s21-space-4); }
.s21-footer__name { color: var(--s21-ghost); font-weight: 700; }
.s21-footer__street, .s21-footer__hours { display: inline-flex; align-items: flex-start; gap: var(--s21-space-2); color: var(--s21-text-muted); font-size: var(--s21-fs-sm); }
.s21-footer__hours .s21-icon { flex: none; margin-top: 2px; }
.s21-footer__link { display: inline-flex; align-items: center; gap: var(--s21-space-2); min-height: var(--s21-tap); color: var(--s21-text-muted) !important; font-size: var(--s21-fs-sm); }
.s21-footer__link:hover { color: var(--s21-accent) !important; }

.s21-footer-menu { list-style: none; margin: 0; padding: 0; }
.s21-footer-menu li { margin: 0; }
.s21-footer-menu a { display: inline-flex; align-items: center; min-height: 40px; color: var(--s21-text-muted); font-size: var(--s21-fs-sm); }
.s21-footer-menu a:hover { color: var(--s21-accent); }

.s21-footer__trust { display: flex; flex-direction: column; gap: var(--s21-space-4); padding-block: var(--s21-space-5); border-bottom: 1px solid var(--s21-line-soft); }
.s21-payments { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s21-space-2); margin: 0; padding: 0; }
.s21-payments__item { padding: var(--s21-space-2) var(--s21-space-4); border: 1px solid var(--s21-line); border-radius: var(--s21-radius-sm); background: var(--s21-surface); color: var(--s21-text-muted); font-size: var(--s21-fs-xs); font-weight: 600; margin: 0; }

.s21-footer__bottom { display: flex; flex-direction: column; gap: var(--s21-space-3); padding-top: var(--s21-space-5); font-size: var(--s21-fs-xs); color: var(--s21-text-dim); }
.s21-footer__copy { margin: 0; }
.s21-footer__cvr { margin-inline-start: var(--s21-space-2); color: var(--s21-text-muted); }
.s21-footer__legal { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s21-space-4); margin: 0; padding: 0; font-size: var(--s21-fs-sm); }
/* Same size as the footer menu links above: the legal row used to inherit
   --s21-fs-xs from .s21-footer__bottom, which made "Handelsbetingelser"
   visibly smaller than every other clickable line in the footer. */
.s21-footer__legal a { color: var(--s21-text-muted); font-size: var(--s21-fs-sm); font-weight: 500; min-height: var(--s21-tap); display: inline-flex; align-items: center; }
.s21-footer__legal a:hover { color: var(--s21-accent); }
.s21-footer__note, .s21-footer__theme { margin: 0; color: var(--s21-text-dim); }

/* ==========================================================================
   20. Fixed mobile cart bar + back to top
   ========================================================================== */

.s21-cartbar {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: var(--s21-z-cartbar);
	display: flex;
	align-items: stretch;
	gap: var(--s21-space-3);
	padding: var(--s21-space-3) var(--s21-gutter) calc(var(--s21-space-3) + env(safe-area-inset-bottom, 0px));
	background: rgb(0 0 0 / 0.94);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-top: 1px solid var(--s21-line);
	box-shadow: 0 -8px 28px rgb(0 0 0 / 0.55);
	animation: s21-rise 260ms var(--s21-ease);
}

@keyframes s21-rise { from { transform: translateY(100%); } to { transform: none; } }

.s21-cartbar__info { display: flex; align-items: center; gap: var(--s21-space-3); flex: 1 1 auto; min-width: 0; color: var(--s21-text) !important; }
.s21-cartbar__icon { position: relative; display: inline-flex; color: var(--s21-accent); }
.s21-cartbar__count { position: absolute; inset-block-start: -6px; inset-inline-end: -8px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--s21-radius-pill); background: var(--s21-accent); color: var(--s21-on-accent); font-size: 10px; font-weight: 800; line-height: 18px; text-align: center; }
.s21-cartbar__count.is-empty { display: none; }
.s21-cartbar[hidden] { display: none !important; }
.s21-cartbar__text { display: flex; flex-direction: column; min-width: 0; }
.s21-cartbar__label { font-size: var(--s21-fs-xs); color: var(--s21-text-muted); }
.s21-cartbar__total { font-weight: 700; color: var(--s21-ghost); }
.s21-cartbar__cta { flex: none; }

.s21-totop {
	position: fixed;
	inset-inline-end: var(--s21-gutter);
	inset-block-end: calc(var(--s21-space-4) + env(safe-area-inset-bottom, 0px));
	z-index: calc(var(--s21-z-cartbar) - 1);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--s21-tap);
	height: var(--s21-tap);
	border: 1px solid var(--s21-line);
	border-radius: 50%;
	background: rgb(0 0 0 / 0.85);
	color: var(--s21-accent);
	cursor: pointer;
	box-shadow: var(--s21-shadow);
	opacity: 0;
	transform: translateY(10px);
	transition: opacity var(--s21-speed) var(--s21-ease), transform var(--s21-speed) var(--s21-ease);
}

.s21-totop[hidden] { display: none; }
.s21-totop.is-visible { opacity: 1; transform: none; }
body.s21-has-cartbar .s21-totop { inset-block-end: calc(84px + env(safe-area-inset-bottom, 0px)); }

/* Keep content clear of the fixed cart bar on small screens. */
body.s21-has-cartbar .s21-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }

/* Checkout flow: hide the announcement and category strip so the visitor can
   focus on completing the order (conversion pattern used by matas/proshop). */
body.s21-checkout-flow .s21-announce,
body.s21-checkout-flow .s21-catstrip { display: none; }

body.s21-checkout-flow .s21-header { background: rgb(0 0 0 / 0.95); }

/* Toast (AJAX add-to-cart feedback) */
.s21-toast {
	position: fixed;
	inset-inline: var(--s21-gutter);
	inset-block-end: calc(var(--s21-space-5) + env(safe-area-inset-bottom, 0px));
	z-index: calc(var(--s21-z-overlay) + 1);
	margin-inline: auto;
	max-width: 420px;
	padding: var(--s21-space-4) var(--s21-space-5);
	border: 1px solid var(--s21-line);
	border-inline-start: 3px solid var(--s21-success);
	border-radius: var(--s21-radius);
	background: rgb(0 0 0 / 0.94);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: var(--s21-shadow-lg);
	color: var(--s21-ghost);
	font-size: var(--s21-fs-sm);
	font-weight: 600;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity var(--s21-speed) var(--s21-ease), transform var(--s21-speed) var(--s21-ease);
	pointer-events: none;
}

.s21-toast.is-visible { opacity: 1; transform: none; }
.s21-toast--success { border-inline-start-color: var(--s21-success); }
.s21-toast--error { border-inline-start-color: var(--s21-danger); }

/* ==========================================================================
   21. Responsive — 768px / 1024px / 1200px
   ========================================================================== */

@media (min-width: 768px) {
	:root { --s21-gutter: 1.5rem; --s21-header-h: 70px; }

	.s21-brand__logo,
	.custom-logo { height: 40px; max-width: 220px; }

	.s21-usp--grid { grid-template-columns: repeat(2, 1fr); }
	.s21-catgrid__list { grid-template-columns: repeat(3, 1fr); gap: var(--s21-space-4); }
	.s21-post-grid { grid-template-columns: repeat(2, 1fr); }
	.s21-post-grid--three { grid-template-columns: repeat(3, 1fr); }
	.s21-hero__inner { gap: var(--s21-space-7); padding-block: var(--s21-space-8); }
	.s21-campaign__inner { grid-template-columns: 1.4fr 1fr; gap: var(--s21-space-7); }
	.s21-post-nav { grid-template-columns: 1fr 1fr; }
	.s21-newsletter { grid-template-columns: 1fr 1fr; align-items: center; }
	.s21-newsletter-form__row { grid-template-columns: 1fr auto; }
	.s21-footer__grid { grid-template-columns: repeat(2, 1fr); }
	.s21-footer__trust { flex-direction: row; align-items: center; justify-content: space-between; }
	.s21-footer__bottom { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s21-space-4); }
	.s21-cartbar { inset-inline: auto; inset-inline-end: var(--s21-space-5); inset-block-end: var(--s21-space-5); border-radius: var(--s21-radius-pill); border: 1px solid var(--s21-line); padding: var(--s21-space-2) var(--s21-space-2) var(--s21-space-2) var(--s21-space-4); max-width: 420px; }
	.s21-cartbar__cta { border-radius: var(--s21-radius-pill); }
	.s21-carousel--static .s21-carousel__track { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
	:root { --s21-gutter: 2rem; --s21-header-h: 78px; --s21-catstrip-h: 46px; }

	.s21-menu-toggle { display: none; }

	/* Tracks: brand / search / nav / actions. The search field owns the
	   flexible track so the navigation always receives its full `nowrap`
	   content width — a label like "Alle produkter" can then never break over
	   two lines, no matter how many menu items are added. */
	.s21-header__inner { grid-template-columns: auto minmax(140px, 1fr) auto auto; gap: var(--s21-space-3); }

	/* DOM order is brand → search → nav → actions, which matches the grid. */
	.s21-search { display: block; min-width: 0; }
	/* No `min-width: 0` here on purpose: the nav sits in an `auto` grid track,
	   and an auto track only keeps its min-content floor while the item's
	   automatic minimum size is intact. Zeroing it let the track collapse below
	   the nowrap menu, which then overflowed on top of the header actions. */
	.s21-nav { display: block; }
	.s21-search-toggle { display: none; }

	/* Compact logo between 1024px and 1199px — every pixel goes to the
	   navigation so its labels stay on one line. Restored at 1200px. */
	.s21-brand__logo,
	.custom-logo { height: 40px; max-width: 200px; }

	/* The "Konto" label only appears from 1200px up; below that the icon alone
	   keeps the header narrow enough for the nowrap navigation to fit. */
	.s21-account { display: inline-flex; flex-direction: row; align-items: center; gap: var(--s21-space-2); padding-inline: var(--s21-space-3); border-radius: var(--s21-radius-pill); }
	.s21-account:hover { background: var(--s21-surface-hover); }
	.s21-account:hover .s21-account__label { color: var(--s21-accent); }

	.s21-cart-link__text { display: flex; }
	/* The count badge hangs 12px outside the cart symbol (10px offset + 2px
	   ring), so the 8px mobile gap put it right on top of the "Kurv" label.
	   18px keeps symbol, badge and text visibly apart. */
	.s21-cart-link { gap: 1.125rem; padding-inline-end: var(--s21-space-4); }

	.s21-catstrip { display: block; border-top: 1px solid var(--s21-line-soft); background: rgb(0 0 0 / 0.35); }
	.s21-catstrip__inner { display: flex; align-items: center; gap: var(--s21-space-5); min-height: var(--s21-catstrip-h); }
	.s21-catstrip__all { display: inline-flex; align-items: center; gap: var(--s21-space-2); color: var(--s21-accent) !important; font-size: var(--s21-fs-sm); font-weight: 700; min-height: var(--s21-catstrip-h); }
	.s21-catstrip__nav { flex: 1 1 auto; overflow-x: auto; scrollbar-width: none; }
	.s21-catstrip__nav::-webkit-scrollbar { display: none; }
	.s21-catstrip__list { list-style: none; display: flex; gap: var(--s21-space-5); margin: 0; padding: 0; }
	.s21-catstrip__item { margin: 0; position: relative; }
	.s21-catstrip__item a { display: inline-flex; align-items: center; min-height: var(--s21-catstrip-h); color: var(--s21-text-muted); font-size: var(--s21-fs-sm); font-weight: 500; white-space: nowrap; }
	.s21-catstrip__item a:hover, .s21-catstrip__item.is-current a { color: var(--s21-accent); }
	.s21-catstrip__item.is-current a::after { content: ''; position: absolute; inset-inline: 0; inset-block-end: 0; height: 2px; background: var(--s21-accent); border-radius: 2px; }
	.s21-catstrip__phone { display: inline-flex; align-items: center; gap: var(--s21-space-2); color: var(--s21-text-muted) !important; font-size: var(--s21-fs-sm); white-space: nowrap; min-height: var(--s21-catstrip-h); }
	.s21-catstrip__phone:hover { color: var(--s21-accent) !important; }
	.s21-catstrip__contact { position: relative; display: inline-flex; align-items: center; gap: var(--s21-space-2); flex: none; min-height: var(--s21-catstrip-h); }
	.s21-catstrip__contact .s21-tip__icon { color: var(--s21-text-dim); }
	.s21-catstrip__contact:hover .s21-tip__icon, .s21-catstrip__contact:focus-within .s21-tip__icon { color: var(--s21-accent); }

	/* Desktop primary navigation.
	   `white-space: nowrap` + `flex: 0 0 auto` guarantee a menu label is always
	   rendered on a single line; the items can never be squeezed by the grid.
	   Padding and font size step up again at 1200px (see below). */
	.s21-menu--primary { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--s21-space-1); list-style: none; margin: 0; padding: 0; }
	.s21-menu--primary > li { position: relative; margin: 0; flex: 0 0 auto; }
	.s21-menu--primary > li > a { display: inline-flex; align-items: center; min-height: var(--s21-header-h); padding-inline: var(--s21-space-2); color: var(--s21-text); font-size: var(--s21-fs-xs); font-weight: 600; position: relative; white-space: nowrap; }
	.s21-menu--primary > li > a:hover, .s21-menu--primary > .current-menu-item > a, .s21-menu--primary > .current-menu-ancestor > a { color: var(--s21-accent); }
	.s21-menu--primary > li > a::after { content: ''; position: absolute; inset-inline: var(--s21-space-2); inset-block-end: calc(50% - var(--s21-header-h) / 2 + 8px); height: 2px; background: var(--s21-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--s21-speed) var(--s21-ease); }
	.s21-menu--primary > li > a:hover::after, .s21-menu--primary > .current-menu-item > a::after { transform: scaleX(1); }

	.s21-menu--primary .menu-item-has-children > a { padding-inline-end: calc(var(--s21-space-2) + 16px); }
	.s21-menu--primary .menu-item-has-children > a::before { content: ''; position: absolute; inset-inline-end: var(--s21-space-2); inset-block-start: 50%; width: 7px; height: 7px; margin-top: -5px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); opacity: 0.7; }

	.s21-menu--primary .sub-menu {
		position: absolute;
		inset-block-start: 100%;
		inset-inline-start: 0;
		z-index: var(--s21-z-dropdown);
		min-width: 240px;
		list-style: none;
		margin: 0;
		padding: var(--s21-space-2);
		background: var(--s21-surface);
		border: 1px solid var(--s21-line);
		border-radius: var(--s21-radius);
		box-shadow: var(--s21-shadow-lg);
		opacity: 0;
		visibility: hidden;
		transform: translateY(8px);
		transition: opacity var(--s21-speed) var(--s21-ease), transform var(--s21-speed) var(--s21-ease), visibility var(--s21-speed);
	}

	.s21-menu--primary li:hover > .sub-menu,
	.s21-menu--primary li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
	.s21-menu--primary .sub-menu a { display: flex; align-items: center; min-height: 40px; padding: var(--s21-space-2) var(--s21-space-3); border-radius: var(--s21-radius-sm); color: var(--s21-text-muted); font-size: var(--s21-fs-sm); }
	.s21-menu--primary .sub-menu a:hover { background: var(--s21-surface-hover); color: var(--s21-accent); }

	/* `width: 100%` is load bearing. `.s21-page` is a column flexbox, and
	   `margin-inline: auto` on a flex item cancels the default
	   `align-items: stretch`, so without an explicit width the layout
	   shrink-to-fits its content. That collapsed the cart to ~99px, because the
	   WooCommerce cart/checkout blocks set `container-type: inline-size`, which
	   makes them contribute no intrinsic width at all. */
	.s21-content-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s21-space-7); align-items: start; width: 100%; min-width: 0; max-width: var(--s21-container); margin-inline: auto; padding-inline: var(--s21-gutter); }
	.s21-content-layout.s21-content-layout--full { grid-template-columns: minmax(0, 1fr); }
	.s21-content-layout .site-main { padding-block: var(--s21-space-6); }
	.s21-content-layout > .site-main > .s21-container { padding-inline: 0; max-width: none; }
	.s21-sidebar { position: sticky; top: calc(var(--s21-header-h) + var(--s21-space-4)); padding-block: var(--s21-space-6) 0; }

	.s21-hero__inner { grid-template-columns: 1.05fr 0.95fr; align-items: center; }
	.s21-hero__panel { min-height: 420px; max-width: none; margin-inline: 0; }
	.s21-usp--grid { grid-template-columns: repeat(4, 1fr); }
	.s21-catgrid__list { grid-template-columns: repeat(6, 1fr); }
	.s21-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
	.s21-carousel__track { grid-auto-columns: minmax(250px, 1fr); }
	.s21-carousel--static .s21-carousel__track { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1200px) {
	/* No .s21-hero__title bump here on purpose: the desktop-only
	   clamp(2.75rem, 2rem + 3vw, 4.25rem) made the hero headline 68px against
	   the 28px row headings. The hero title now tracks --s21-fs-xl at every
	   width, so it is the same size as "Udvalgte produkter" everywhere. */
	.s21-carousel__track { grid-auto-columns: minmax(272px, 1fr); }
	/* `:not(--full)` — a plain `.s21-content-layout` rule here would sit later
	   in the cascade than `.s21-content-layout--full` above and re-introduce the
	   phantom 340px sidebar column on every full width page (cart, checkout,
	   my account), squeezing the real content column. */
	.s21-content-layout:not(.s21-content-layout--full) { grid-template-columns: minmax(0, 1fr) 340px; }

	/* Roomy header: the search field grows back and the navigation returns to
	   the regular label size now that there is enough horizontal space. */
	.s21-header__inner { grid-template-columns: auto minmax(200px, 340px) auto auto; gap: var(--s21-space-5); }
	.s21-brand__logo,
	.custom-logo { height: 46px; max-width: 250px; }
	.s21-account__label { display: inline; font-size: var(--s21-fs-xs); color: var(--s21-text-muted); }
	.s21-menu--primary > li > a { padding-inline: var(--s21-space-3); font-size: var(--s21-fs-sm); }
	.s21-menu--primary > li > a::after { inset-inline: var(--s21-space-3); }
	.s21-menu--primary .menu-item-has-children > a { padding-inline-end: calc(var(--s21-space-3) + 16px); }
	.s21-menu--primary .menu-item-has-children > a::before { inset-inline-end: var(--s21-space-3); }
}

/* Short screens: keep the header compact */
@media (max-height: 620px) {
	:root { --s21-announce-h: 30px; }
	.s21-mobile-nav__panel { justify-content: flex-start; }
}

/* ==========================================================================
   22. Motion, forced colours, print
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	.s21-announce__slide { transition: none; }
}

@media (forced-colors: active) {
	.s21-btn, .s21-icon-btn, .s21-cart-link { border: 1px solid ButtonText; }
	.s21-header { border-bottom: 1px solid CanvasText; }
}

@media print {
	.s21-header, .s21-footer, .s21-cartbar, .s21-totop, .s21-mobile-nav, .s21-search-overlay, .s21-announce { display: none !important; }
	body { background: #fff; color: #000; font-size: 12pt; }
	a { color: #000; text-decoration: underline; }
	.site-main { padding: 0; }
}