/**
Theme Name: Astra Child
Author: Ronnie Jakobsen
Author URI: https://rsj.design
Description: Child theme for stel-glas.dk
Version: 1.0.203
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

/* ==========================================================================
   Design tokens not covered by the Customizer
   ========================================================================== */

:root {
	/* Overlay UI (dropdowns, popovers). Based on Astra's desktop submenu shadow
	   (0 4px 10px -2px), with a 16px blur and 20% instead of 10% opacity. */
	--stel-shadow-overlay: 0 4px 16px -2px rgba(0, 0, 0, 0.2);

	/* Hint text: helper and error text under form fields (smaller than body text). */
	--stel-hint-font-size: 14px;
	--stel-hint-line-height: 20px;

	/* Overlay UI corner radius. Matches the cookie banner's 12px, which is set in
	   Complianz's banner settings, not here. */
	--stel-radius-overlay: 12px;

	/* Small elements on top of others (cart count badge, tooltips). */
	--stel-shadow-small: 0 1px 3px rgba(0, 0, 0, 0.3);

	/* Soft, even shadow with no offset, for large surfaces over the page (sticky header). */
	--stel-shadow-soft: 0 0 16px rgba(0, 0, 0, 0.1);

	/* Notices (system feedback). Text and icons use the palette's text colour; the
	   sentiment is carried by background colour and icon shape only. */
	--stel-notice-radius: 8px;
	--stel-notice-padding-y: 12px;
	--stel-notice-padding-x: 16px;
	--stel-notice-gap: 16px;
	--stel-notice-icon-size: 24px;
	--stel-notice-line-height: 24px;
	--stel-notice-text: var(--ast-global-color-3);

	--stel-notice-success-bg: #e8fade;
	--stel-notice-info-bg: #e1f4fc;
	--stel-notice-warning-bg: #fcf6d7;
	--stel-notice-error-bg: #fce6e6;
	--stel-notice-neutral-bg: #f7f7f7;

	/* Sentiment colours at full strength, for small marks like the store status dot: the
	   background colour's hue at 100% saturation and 40% lightness. */
	--stel-notice-success-strong: #49cc00;
	--stel-notice-info-strong: #0090cc;
	--stel-notice-warning-strong: #ccab00;

	/* Ionicons (outline, 24px stroke like the site's other icons), used as CSS masks. */
	--stel-notice-icon-success: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M448,256c0-106-86-192-192-192S64,150,64,256s86,192,192,192S448,362,448,256Z' style='fill:none;stroke:%23000;stroke-miterlimit:10;stroke-width:24px'/%3E%3Cpolyline points='352 176 217.6 336 160 272' style='fill:none;stroke:%23000;stroke-linecap:round;stroke-linejoin:round;stroke-width:24px'/%3E%3C/svg%3E");
	--stel-notice-icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M248,64C146.39,64,64,146.39,64,248s82.39,184,184,184,184-82.39,184-184S349.61,64,248,64Z' style='fill:none;stroke:%23000;stroke-miterlimit:10;stroke-width:24px'/%3E%3Cpolyline points='220 220 252 220 252 336' style='fill:none;stroke:%23000;stroke-linecap:round;stroke-linejoin:round;stroke-width:24px'/%3E%3Cline x1='208' y1='340' x2='296' y2='340' style='fill:none;stroke:%23000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:24px'/%3E%3Cpath d='M248,130a26,26,0,1,0,26,26A26,26,0,0,0,248,130Z'/%3E%3C/svg%3E");
	--stel-notice-icon-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M85.57,446.25H426.43a32,32,0,0,0,28.17-47.17L284.18,82.58c-12.09-22.44-44.27-22.44-56.36,0L57.4,399.08A32,32,0,0,0,85.57,446.25Z' style='fill:none;stroke:%23000;stroke-linecap:round;stroke-linejoin:round;stroke-width:24px'/%3E%3Cpath d='M250.26,195.39l5.74,122,5.73-121.95a5.74,5.74,0,0,0-5.79-6h0A5.74,5.74,0,0,0,250.26,195.39Z' style='fill:none;stroke:%23000;stroke-linecap:round;stroke-linejoin:round;stroke-width:24px'/%3E%3Cpath d='M256,397.25a20,20,0,1,1,20-20A20,20,0,0,1,256,397.25Z'/%3E%3C/svg%3E");
	--stel-notice-icon-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M448,256c0-106-86-192-192-192S64,150,64,256s86,192,192,192S448,362,448,256Z' style='fill:none;stroke:%23000;stroke-miterlimit:10;stroke-width:24px'/%3E%3Cpath d='M250.26,166.05,256,288l5.73-121.95a5.74,5.74,0,0,0-5.79-6h0A5.74,5.74,0,0,0,250.26,166.05Z' style='fill:none;stroke:%23000;stroke-linecap:round;stroke-linejoin:round;stroke-width:24px'/%3E%3Cpath d='M256,367.91a20,20,0,1,1,20-20A20,20,0,0,1,256,367.91Z'/%3E%3C/svg%3E");
	--stel-notice-icon-neutral: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M427.68,351.43C402,320,383.87,304,383.87,217.35,383.87,138,343.35,109.73,310,96c-4.43-1.82-8.6-6-9.95-10.55C294.2,65.54,277.8,48,256,48S217.79,65.55,212,85.47c-1.35,4.6-5.52,8.71-9.95,10.53-33.39,13.75-73.87,41.92-73.87,121.35C128.13,304,110,320,84.32,351.43,73.68,364.45,83,384,101.61,384H410.49C429,384,438.26,364.39,427.68,351.43Z' style='fill:none;stroke:%23000;stroke-linecap:round;stroke-linejoin:round;stroke-width:24px'/%3E%3Cpath d='M320,384v16a64,64,0,0,1-128,0V384' style='fill:none;stroke:%23000;stroke-linecap:round;stroke-linejoin:round;stroke-width:24px'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Page width — one edge for header, content, footer and Elementor sections
   ==========================================================================

   Three values, each set in one place:
   - Content width: Customizer > Global > Container > Container Width (Astra's
     --ast-normal-container-width). Header, page content and footer content.
   - Text width: Customizer > Global > Container > Narrow Container Width (Astra's
     --ast-narrow-container-width). Pages set to the "Narrow" container layout. Both
     widths are the width of the content itself; the gutter is added outside.
   - Gutter: the minimum space between content and the screen edge (below).

   --stel-edge is where content starts, measured from the edge of a full-width element:
   the gutter, or more once the screen is wider than the content plus two gutters. Its
   100% is the width of the element it's used on. Used by the Elementor class
   "sideindhold" and the hero's text container (both set to var(--stel-edge) in
   Elementor), so full-width Elementor sections line up with everything else. */

:root {
	--stel-gutter: 24px;
	--stel-edge: max(var(--stel-gutter), calc((100% - var(--ast-normal-container-width)) / 2));
}
/* Breakpoints: tablet from 545px, desktop from 992px (Astra's tablet breakpoint, moved
   from 921px in inc/layout.php). The gutter must never get smaller at a wider breakpoint,
   or content would get wider as the screen gets narrower. Desktop content reaches the
   full content width at 1200 + 2 × 64 = 1328px. */
@media (min-width: 545px) {
	:root {
		--stel-gutter: 40px;
	}
}
@media (min-width: 992px) {
	:root {
		--stel-gutter: 64px;
	}
}

/* Header (desktop) and page content. Astra: 20px padding, max-width content + 40px. */
.ast-container,
.ast-container-fluid {
	padding-left: var(--stel-gutter);
	padding-right: var(--stel-gutter);
}
@media (min-width: 992px) {
	.ast-container,
	.ast-woo-shop-archive .site-content > .ast-container {
		max-width: calc(var(--ast-normal-container-width) + 2 * var(--stel-gutter));
	}
	.ast-narrow-container .site-content > .ast-container {
		max-width: calc(var(--ast-narrow-container-width) + 2 * var(--stel-gutter));
	}
}

/* Header (mobile header, which shows up to 991px: inc/layout.php). Astra: 20px. */
.ast-header-break-point #masthead .ast-mobile-header-wrap :is(.ast-primary-header-bar, .ast-below-header-bar, .ast-above-header-bar) {
	padding-left: var(--stel-gutter);
	padding-right: var(--stel-gutter);
}

/* Footer rows. Their content is already capped at the content width by Astra; this adds
   the gutter. Wins over the rows' side padding in the Customizer (keep that empty; top
   and bottom padding are still set there). */
#colophon :is(.site-above-footer-wrap, .site-primary-footer-wrap, .site-below-footer-wrap) {
	padding-left: var(--stel-gutter);
	padding-right: var(--stel-gutter);
}

/* Browser canvas (the area past the end of the page: the overscroll bounce, behind mobile
   browsers' toolbars, below a short page) in the subfooter's grey while the subfooter is in
   view, so the page seems to end in it; white otherwise, also for the bounce above the
   header. Class set by inc/page-canvas.php.
   iOS browsers (WebKit) colour that area with the html background blended with the body
   background, body on top, so an opaque body hides html's colour. The page's white (the
   Customizer's site background, global colour 4) therefore sits on #page, the wrapper
   around everything visible, and body is transparent. :root body outranks Astra's body and
   .ast-plain-container / .ast-separate-container rules. */
html {
	background-color: var(--ast-global-color-4);
}
html.stel-canvas-footer {
	background-color: var(--ast-global-color-7);
}
:root body {
	background-color: transparent;
}
#page {
	background-color: var(--ast-global-color-4);
}

/* Footer main row (copyright + menu).
   - Up to 1087px: stacked and centred, the copyright above a vertical menu. Up to 991px
     that's the Customizer's tablet and mobile layout (Footer > Primary Footer > Layout,
     and the Footer Menu's tablet layout and margin). From 992px Astra would switch to the
     desktop layout, but the menu only fits beside the copyright from about 1060px, so the
     tablet layout is repeated here up to 1087px (Astra's tablet values, copied).
   - From 1088px: side by side. Astra's "2-rheavy" layout splits the row 1/3 + 2/3, which
     would wrap the copyright line; its column takes the width of its text instead, and
     the menu gets the rest. */
@media (min-width: 992px) and (max-width: 1087px) {
	#colophon .site-primary-footer-wrap .ast-builder-grid-row {
		grid-template-columns: 1fr;
	}
	#colophon .site-primary-footer-wrap .site-footer-section {
		margin-bottom: 10px;
	}
	#colophon .ast-footer-copyright {
		text-align: center;
	}
	#colophon .footer-widget-area[data-section="section-footer-menu"] .astra-footer-tablet-vertical-menu {
		display: grid;
		justify-content: center;
		margin-top: 22px;
	}
	#colophon .astra-footer-tablet-vertical-menu .menu-item {
		align-items: center;
	}
}
@media (min-width: 1088px) {
	#colophon .site-primary-footer-wrap.ast-builder-grid-row-2-rheavy .ast-builder-grid-row {
		grid-template-columns: auto 1fr;
	}
}

/* ==========================================================================
   Font smoothing
   ========================================================================== */

/* Use the browser's default font smoothing instead of Astra's antialiased/grayscale. */
body {
	-webkit-font-smoothing: auto;
	-moz-osx-font-smoothing: auto;
}

/* ==========================================================================
   Headings
   ========================================================================== */

/* H1: word spacing 6px tighter. Courier New's wide space reads large at heading sizes,
   and the Customizer's typography settings have no word spacing option. */
h1 {
	word-spacing: -6px;
}

/* Page text (the content area of every page: block editor pages such as privatlivspolitik,
   Elementor pages, WooCommerce pages): tighter word spacing, as Courier New's space reads
   wide in running text. Body text (paragraphs, list items, table cells) and H5/H6 1px
   tighter, H4 2px, H3 3px. Links and other inline text inside them follow their parent.
   Elements with their own word spacing keep it (opening hours table, status pill,
   inverted buttons); the opening hours table needs the :not() as its cells are matched. */
.entry-content :is(p, li, td, th, h5, h6):not(.stel-hours *) {
	word-spacing: -1px;
}
.entry-content h4 {
	word-spacing: -2px;
}
.entry-content h3 {
	word-spacing: -3px;
}

/* Breadcrumbs: page titles 4px tighter, separators unchanged. Covers Astra's breadcrumb
   (normal pages) and WooCommerce's (shop pages, separator wrapped in functions.php). */
.ast-breadcrumbs .trail-items li > span,
.woocommerce-breadcrumb {
	word-spacing: -4px;
}
.woocommerce-breadcrumb .stel-breadcrumb-separator {
	word-spacing: 0;
}

/* ==========================================================================
   Above-header banner
   ========================================================================== */

/* White on black. Overrides the background set in the Customizer (Above Header).
   The dismiss icon colour is set in inc/banner-dismiss.php. */
.ast-above-header.ast-above-header-bar,
.ast-header-break-point .ast-above-header-bar {
	background-color: #000;
}
.ast-above-header-bar,
.ast-above-header-bar a {
	color: #fff;
}

/* Keep the link ("se hvordan") on one line. */
.ast-above-header-bar .ast-builder-html-element a {
	white-space: nowrap;
}

/* Keep the text clear of the dismiss icon (24px wide, 20px from the right edge).
   Padded on both sides so centred text stays centred. */
.ast-above-header-bar .ast-builder-html-element {
	padding-left: 32px;
	padding-right: 32px;
}

/* ==========================================================================
   Page titles
   ========================================================================== */

/* Normalise heading font-weight to 400.
   !important on .entry-title is required to beat Astra Pro's inline style output. */
h1, h2, h3, h4, h5, h6,
.entry-title,
h1.page-title {
	font-weight: 400 !important;
}
/* ==========================================================================
   Breadcrumbs
   ========================================================================== */

/* WordPress pages use .ast-breadcrumbs-wrapper; WooCommerce category/shop pages
   use .woocommerce-breadcrumb. Both need overriding to normalise size and colour. */
.ast-breadcrumbs-wrapper,
.ast-breadcrumbs-wrapper *,
.woocommerce-breadcrumb,
.woocommerce-breadcrumb a {
	font-size: 16px !important;
	color: #000 !important;
}

/* ==========================================================================
   Link hover state
   ========================================================================== */

/* Links styled as buttons (Astra's global button classes) are excluded. :where() keeps
   the specificity of a plain a:hover, so other components can still override it. */
a:where(:not(.ast-button, .ast-outline-button, .button)):hover {
	text-decoration: underline;
}

/* Keyboard focus on buttons: the site's focus style, as on links (dotted, thin, 3px to thin
   in 0.2s). Astra and WooCommerce leave it invisible on primary buttons: white like their
   text, transparent or none. An outline takes up no space, and an animation leaves the
   buttons' transitions (hover) alone. Dark backgrounds set their own colour, e.g.
   .stel-consent-notice__button. */
:is(#page, .astra-cart-drawer) :is(.ast-button, .ast-outline-button, .button, .wp-block-button__link, .wc-block-components-button:not(.is-link), input[type="submit"], input[type="button"]):focus-visible {
	outline: thin dotted var(--ast-global-color-3);
	outline-offset: 1px;
	animation: stel-focus-outline 0.2s linear;
}
@keyframes stel-focus-outline {
	from {
		outline-width: 3px;
		outline-offset: 0;
	}
}

/* Astra adds a thin dotted border on focus to the add to cart button, which grew it by 2px. */
body.woocommerce-js div.product form.cart .button.single_add_to_cart_button:focus {
	border-width: 0;
}

/* Links styled as buttons behave like <button> elements: no link colour transition. */
a.ast-button,
a.ast-outline-button,
a.button {
	transition: none;
}

/* Buttons with an icon: add .stel-button-icon to an Astra button (.ast-button or
   .ast-outline-button) and put the label in a <span> before an Ionicon (stel_get_icon()).
   The icon is 16px, 8px to the right of the label, like the arrow in the home hero's
   button. Used on the coming soon page and the 404 page (chevron-forward-outline). */
:is(.ast-button, .ast-outline-button).stel-button-icon {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.stel-button-icon svg.ionicon {
	flex: none;
	width: 16px;
	height: 16px;
}

/* Higher specificity needed to beat Astra's header nav rules. */
.main-header-menu .menu-link:hover,
.main-header-menu > a:hover {
	text-decoration: underline;
}

/* The current page's menu item is underlined too, like on hover: in the header menu (and
   its sticky copy) and in the off-canvas menu, not in the footer menu. WordPress marks the
   current page's link with aria-current="page". */
.main-header-menu .menu-link[aria-current="page"] {
	text-decoration: underline;
}

/* ==========================================================================
   Form fields
   ========================================================================== */

/* 8px corner radius instead of Astra's hardcoded 4px. Same field types as Astra's rule,
   plus the WooCommerce selectors Astra uses to set 3px on selects in shop pages, and
   the WooCommerce Blocks fields in the cart (coupon) and checkout (4px there). */
#page .wc-block-components-text-input input,
#page .wc-blocks-components-select .wc-blocks-components-select__container,
#page .wc-blocks-components-select .wc-blocks-components-select__select,
#page .wc-block-components-textarea,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="reset"],
input[type="tel"],
input[type="date"],
select,
textarea,
.woocommerce select,
.woocommerce-page select,
.woocommerce .select2-container .select2-selection--single,
.woocommerce-page .select2-container .select2-selection--single {
	border-radius: 8px;
}

/* Replace Astra's dropdown arrow with the chevron-down-outline Ionicon. Stroke hardcoded
   to #000 (data URIs can't use currentColor). Extra right padding keeps text clear of it.
   The checkout's country select (WooCommerce Blocks) draws its own chevron as an inline
   SVG next to the select; that one is hidden below. */
#page .wc-blocks-components-select .wc-blocks-components-select__select,
select,
.select2-container .select2-selection--single,
.woocommerce select,
.woocommerce-page select,
.woocommerce .select2-container .select2-selection--single,
.woocommerce-page .select2-container .select2-selection--single {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'%3E%3Cpolyline points='112 184 256 328 400 184' style='fill:none;stroke:%23000;stroke-linecap:round;stroke-linejoin:round;stroke-width:24px'/%3E%3C/svg%3E");
	background-size: 24px;
	background-repeat: no-repeat;
	background-position: calc(100% - 12px) center;
	padding-right: 48px;
}
#page .wc-blocks-components-select .wc-blocks-components-select__expand {
	display: none;
}

/* WooCommerce Blocks fields: the border colour from the Customizer (Global > Colors >
   Border, like Astra's fields) instead of WooCommerce's near-black. Only in the resting
   state; WooCommerce's error state (red) is kept. */
#page .wc-block-components-text-input input:not(:focus, .has-error *),
#page .wc-blocks-components-select .wc-blocks-components-select__select:not(:focus, .has-error *),
#page .wc-block-components-textarea:not(:focus) {
	border-color: var(--ast-border-color);
}

/* Focus state, site-wide standard for all fields: the border changes from the border
   colour to the text colour (Customizer), animated over 0.2s. The border stays 1px solid:
   Astra's focus style made it dotted, WooCommerce Blocks made it 1.5px (and nudged the
   select's padding by 0.5px to compensate), and the product page selects had none.
   Checkboxes and radios keep their own focus style; error states keep their red border. */
#page :is(input[type="text"], input[type="number"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="tel"], input[type="date"], select, textarea) {
	transition: border-color 0.2s linear;
}
#page :is(input[type="text"], input[type="number"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="tel"], input[type="date"], select, textarea):focus:not(.has-error *) {
	border: 1px solid var(--ast-global-color-3);
	box-shadow: none;
}
/* Hint text: helper and error text under fields, site-wide (e.g. "du handler i
   øjeblikket som gæst", "indtast venligst en gyldig e-mailadresse"). WooCommerce Blocks
   uses 13px with a fractional line height; WooCommerce's classic forms use .description. */
#page :is(.wc-block-checkout__guest-checkout-notice, .wc-block-components-validation-error, .wc-block-components-validation-error > p, .form-row .description) {
	font-size: var(--stel-hint-font-size);
	line-height: var(--stel-hint-line-height);
}

/* Floating labels (WooCommerce Blocks): once the field is active, the label sits 6px from
   the top, as on the checkout address fields. Astra's WooCommerce stylesheet moves it to
   -2px in the cart and checkout; WooCommerce's form rule overrides that for the address
   fields, but not for the coupon field, which sits outside the form. */
#page .wc-block-components-text-input.is-active label {
	top: 6px;
}
#page .has-error :is(input, select, textarea):focus {
	box-shadow: none;
}
#page .wc-blocks-components-select .wc-blocks-components-select__select:focus,
#page .wc-block-components-text-input.is-active input:focus {
	padding-left: 9px;
}

/* ==========================================================================
   Mini-cart buttons (cart drawer / dropdown)
   ========================================================================== */

/* Astra's secondary button (.ast-outline-button) gets its border width and colour from
   Customizer > Global > Buttons > Secondary, but no border style, so no border shows.
   Applies site-wide. */
.ast-outline-button {
	border-style: solid;
}

/* Desktop cart dropdown: 400px wide instead of Astra's fixed 280px (no Customizer
   setting), with the overlay shadow and corner radius. It's anchored to the right of the cart icon, so it grows leftwards.
   Below 992px Astra uses the slide-in drawer, whose width is a Customizer setting
   (Header Builder > Cart > Slide-In Cart Width).
   Text uses the body font size (1rem, which Astra derives from the Customizer's body
   font size) instead of Astra's .875em, matching the drawer. */
@media (min-width: 992px) {
	.ast-site-header-cart .widget_shopping_cart,
	.woocommerce .ast-site-header-cart .widget_shopping_cart {
		width: 400px;
		font-size: 1rem;
		box-shadow: var(--stel-shadow-overlay);
		border-radius: var(--stel-radius-overlay);
	}

	/* Pointer clear of the rounded corner, centred on the cart icon. The icon is centred
	   in its container, so the open dropdown's right edge is placed 32px right of the
	   container's centre (12px further right than Astra's right: 0), and the pointer's
	   centre 32px in from that edge. */
	.ast-site-header-cart:hover .widget_shopping_cart,
	.ast-site-header-cart:focus .widget_shopping_cart,
	.woocommerce .ast-site-header-cart:hover .widget_shopping_cart,
	.woocommerce .ast-site-header-cart:focus .widget_shopping_cart {
		right: calc(50% - 32px);
	}

	/* Spacing on the 8px grid (Astra's em-based values were 7/14/21/28/70px):
	   - list and buttons: 24px from the dropdown's sides; 24px around the buttons;
	   - 24px above each item's content (from the list top, and from each divider):
	     16px gap + the item's own 8px top padding, and 24px below the last item
	     (8px + 16px). The gap is outside the item so the thumbnail and remove icon
	     stay centred on the item's content;
	   - items: 8px top/bottom, 72px left (56px thumbnail + 16px), 32px right
	     (20px remove icon + 12px), min-height 72px (56px thumbnail + 2 × 8px);
	   - "I alt" line: 16px / 24px.
	   With 24px lines and a 4px gap below the product name, item heights are always
	   even (72px min, 92px for 2 lines), so the centred thumbnail and icon land on
	   whole pixels. */
	.ast-site-header-cart .widget_shopping_cart p.buttons,
	.woocommerce .ast-site-header-cart .widget_shopping_cart p.buttons {
		padding: 24px;
	}
	.ast-site-header-cart .widget_shopping_cart ul.woocommerce-mini-cart,
	.woocommerce .ast-site-header-cart .widget_shopping_cart ul.woocommerce-mini-cart {
		padding: 16px 24px;
	}
	.ast-site-header-cart .widget_shopping_cart li.woocommerce-mini-cart-item + li.woocommerce-mini-cart-item {
		margin-top: 16px;
	}
	.woocommerce-js .ast-site-header-cart .widget_shopping_cart ul.woocommerce-mini-cart li.woocommerce-mini-cart-item {
		padding: 8px 32px 8px 72px;
		min-height: 72px;
		line-height: 24px;
	}
	.ast-site-header-cart .widget_shopping_cart p.total,
	.woocommerce .ast-site-header-cart .widget_shopping_cart p.total {
		padding: 16px 24px;
	}
	.ast-site-header-cart .widget_shopping_cart p.total > * {
		line-height: 24px;
	}
	.woocommerce-js .ast-site-header-cart .widget_shopping_cart li.woocommerce-mini-cart-item > a:not(.remove) {
		margin-bottom: 4px;
	}

	/* 8px more space above each divider between items: 16px bottom padding on items that
	   have a divider (all but the last), with min-height grown to match (56px thumbnail
	   + 8px + 16px, + the 1px divider, so the content area stays an even 56px). */
	.woocommerce-js .ast-site-header-cart .widget_shopping_cart ul.woocommerce-mini-cart li.woocommerce-mini-cart-item:not(:last-child) {
		padding-bottom: 16px;
		min-height: calc(80px + 1px);
	}

	/* Thumbnail and remove icon vertically centred on the item's content area (between its
	   top and bottom padding), so they stay centred on the text when the bottom padding is
	   larger. Replaces Astra's top: 50% / translateY(-50%) and the remove icon's fixed
	   position near the top. */
	.woocommerce-js .ast-site-header-cart .widget_shopping_cart .cart_list li.woocommerce-mini-cart-item img,
	.woocommerce-js .ast-site-header-cart .widget_shopping_cart .cart_list li.woocommerce-mini-cart-item a.remove {
		top: 8px;
		bottom: 8px;
		margin-top: auto;
		margin-bottom: auto;
		transform: none;
	}
	.woocommerce-js .ast-site-header-cart .widget_shopping_cart .cart_list li.woocommerce-mini-cart-item:not(:last-child) img,
	.woocommerce-js .ast-site-header-cart .widget_shopping_cart .cart_list li.woocommerce-mini-cart-item:not(:last-child) a.remove {
		bottom: 16px;
	}

	/* 4px gap between the cart icon and the dropdown. */
	.ast-site-header-cart .widget_shopping_cart,
	.woocommerce .ast-site-header-cart .widget_shopping_cart {
		top: calc(100% + 4px);
	}

	/* Pointer drawn as one 12px square rotated 45°, with a 1px border on its two upper
	   sides in the dropdown's own border and background colours. Unlike Astra's two
	   stacked border-triangles (7px + 6px, at bottom: 99.9% / -0.3px), this gives a true
	   1px diagonal stroke and a continuous outline. Its centre sits on the outer edge of
	   the dropdown's top border (top: -7px = -1px border - 6px half size), so the white
	   lower half covers that border where the pointer joins it. right is measured from
	   inside the dropdown's 1px border: 24px = 32px - 1px border - 6px half size - 1px.
	   The extra 1px moves the tip from the icon box's centre (x.0) to below the cart's
	   basket and wheels, whose centre is 1.5px right of it; the nearest whole pixel. */

	/* ::before (Astra's triangle border, no longer used) becomes an invisible hover
	   bridge across the 4px gap, so the dropdown stays open while the pointer moves
	   from the icon to it. Spans from the cart's bottom edge to the dropdown's border. */
	.ast-site-header-cart .widget_shopping_cart::before,
	.woocommerce .ast-site-header-cart .widget_shopping_cart::before {
		content: "";
		display: block;
		top: -5px;
		bottom: auto;
		left: 0;
		right: 0;
		width: auto;
		height: 4px;
		margin: 0;
		border: 0;
		background: transparent;
		pointer-events: auto;
		transition: none;
	}
	.ast-site-header-cart .widget_shopping_cart::after,
	.woocommerce .ast-site-header-cart .widget_shopping_cart::after {
		content: "";
		top: -7px;
		bottom: auto;
		right: 24px;
		left: auto;
		width: 12px;
		height: 12px;
		box-sizing: border-box;
		margin: 0;
		border-style: solid;
		border-width: 1px 0 0 1px;
		border-color: inherit;
		background-color: inherit;
		transform: rotate(45deg);
		transition: none;
	}
}

/* Cart items (drawer and dropdown): keep text clear of the remove icon (20px wide, at
   the item's right edge) with 32px right padding = icon + 12px. The drawer had none,
   so long names ran under the icon. Long words without spaces wrap instead of
   overflowing the panel. */
.woocommerce-js .widget_shopping_cart ul.woocommerce-mini-cart li.woocommerce-mini-cart-item {
	padding-right: 32px;
	overflow-wrap: anywhere;
}

/* Slide-in cart drawer (mobile/tablet): same 8px-grid spacing as the desktop dropdown
   instead of Astra's em-based values (fractional at the 14.592px mobile font size), with
   roomier 16px item padding for touch. 24px above each item's content (8px gap + 16px)
   and below the last (16px + 8px). Item heights stay even (2 × 16px + 24px lines
   + 4px), so the centred 56px thumbnail and 20px remove icon land on whole pixels. */
.woocommerce-js .astra-cart-drawer .astra-cart-drawer-content ul.woocommerce-mini-cart {
	padding: 8px 24px;
}
.woocommerce-js .astra-cart-drawer .astra-cart-drawer-content ul.woocommerce-mini-cart li.woocommerce-mini-cart-item {
	padding: 16px 32px 16px 72px;
	min-height: 88px;
	line-height: 24px;
}

/* 8px more space above each divider between items (24px bottom padding on all but the
   last item), with min-height = 56px thumbnail + 16px + 24px + the 1px divider. */
.woocommerce-js .astra-cart-drawer .astra-cart-drawer-content ul.woocommerce-mini-cart li.woocommerce-mini-cart-item:not(:last-child) {
	padding-bottom: 24px;
	min-height: calc(96px + 1px);
}
.woocommerce-js .astra-cart-drawer .astra-cart-drawer-content li.woocommerce-mini-cart-item + li.woocommerce-mini-cart-item {
	margin-top: 8px;
}
.woocommerce-js .astra-cart-drawer .astra-cart-drawer-content li.woocommerce-mini-cart-item > a:not(.remove) {
	margin-bottom: 4px;
	line-height: 24px;
}
.woocommerce-js .astra-cart-drawer .astra-cart-drawer-content li.woocommerce-mini-cart-item img {
	width: 56px;
	height: 56px;
}

/* Thumbnail and remove icon vertically centred on the item's content area (between its
   top and bottom padding), as in the desktop dropdown. */
.woocommerce-js .astra-cart-drawer .astra-cart-drawer-content .cart_list li.woocommerce-mini-cart-item img,
.woocommerce-js .astra-cart-drawer .astra-cart-drawer-content .cart_list li.woocommerce-mini-cart-item a.remove {
	top: 16px;
	bottom: 16px;
	margin-top: auto;
	margin-bottom: auto;
	transform: none;
}
.woocommerce-js .astra-cart-drawer .astra-cart-drawer-content .cart_list li.woocommerce-mini-cart-item:not(:last-child) img,
.woocommerce-js .astra-cart-drawer .astra-cart-drawer-content .cart_list li.woocommerce-mini-cart-item:not(:last-child) a.remove {
	bottom: 24px;
}
.woocommerce-js .astra-cart-drawer .astra-cart-drawer-content p.woocommerce-mini-cart__total {
	padding: 16px 24px;
}
.woocommerce-js .astra-cart-drawer .astra-cart-drawer-content p.woocommerce-mini-cart__total > * {
	line-height: 24px;
}

/* Drawer header: 56px (20px + 16px title line + 20px) instead of Astra's em-based
   51.06px (capped by max-height: 3.5em), and the content offset below it to match
   (Astra: a fixed 3.5em). The 1px divider is drawn inside the 56px (inset shadow)
   instead of as a border that would make it 57px. The 56px height centres both the
   16px title and the 22px close icon on whole pixels. The close button fills the
   header's height and centres its icon; its 24px side padding lines the icon up with
   the right edge of the content below. */
.astra-cart-drawer .astra-cart-drawer-header {
	padding: 20px 24px;
	max-height: none;
	border-bottom: 0;
	box-shadow: inset 0 -1px 0 var(--ast-border-color);
}
.astra-cart-drawer .astra-cart-drawer-header .astra-cart-drawer-title {
	line-height: 16px;
}
.astra-cart-drawer .astra-cart-drawer-close {
	top: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	padding: 0 24px;
}
.astra-cart-drawer .astra-cart-drawer-content {
	padding-top: 56px;
}
.woocommerce-js .astra-cart-drawer .astra-cart-drawer-content p.woocommerce-mini-cart__buttons {
	padding: 24px;
}

/* "I alt" line (drawer and dropdown): its 1px top and bottom dividers are drawn inside the
   box (inset shadows) instead of as borders, so the line is exactly 56px
   (16px + 24px + 16px) rather than 58px. No bottom margin (WooCommerce: 1.3em), so the
   space before the buttons is just their own 24px. */
.woocommerce-js .widget_shopping_cart p.woocommerce-mini-cart__total {
	border-top: 0;
	border-bottom: 0;
	box-shadow: inset 0 1px 0 var(--ast-border-color), inset 0 -1px 0 var(--ast-border-color);
	margin-bottom: 0;
}

/* Layout only: full width, stacked, 8px apart. Colours, border, radius, padding and
   typography come from Astra's global button styles (Customizer > Global > Buttons)
   via the .ast-button / .ast-outline-button classes set in inc/mini-cart.php. */
.woocommerce-js .woocommerce-mini-cart__buttons.buttons a.stel-mini-cart-button {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	text-align: center;
}
.woocommerce-js .woocommerce-mini-cart__buttons.buttons a.stel-mini-cart-button + a.stel-mini-cart-button {
	margin-top: 8px;
}

/* ==========================================================================
   Footer menu
   ========================================================================== */

/* Space between the menu items, not inside the links, so each link's click and focus
   area is exactly its text. Customizer > Footer Builder > Footer Menu > Menu Spacing
   should stay empty or 0 (it pads the links); Astra's own 0.5em link padding is removed
   here. 32px between items side by side (desktop), 16px between stacked items (tablet,
   mobile: Astra switches the list to a single-column grid). */
.footer-nav-wrap .astra-footer-horizontal-menu {
	column-gap: 32px;
	row-gap: 16px;
}
.footer-nav-wrap .astra-footer-horizontal-menu a {
	padding: 0;
}

/* ==========================================================================
   Tables
   ========================================================================== */

/* Rounded outer corners. The Table block's collapsed borders ignore border-radius,
   so switch to separate borders with no spacing: cells draw right + bottom, the
   table draws top + left, and the corner cells carry the radius. This also replaces
   the block's 3px header border with the cells' 1px bottom border. */
.wp-block-table table {
	border-collapse: separate;
	border-spacing: 0;
	border-style: solid;
	border-width: 1px 0 0 1px;
	border-color: #ccc;
	border-radius: 8px;
}
.wp-block-table td,
.wp-block-table th {
	border-width: 0 1px 1px 0;
	border-color: #ccc;
}
.wp-block-table table > :first-child > tr:first-child > :first-child {
	border-top-left-radius: 8px;
}
.wp-block-table table > :first-child > tr:first-child > :last-child {
	border-top-right-radius: 8px;
}
.wp-block-table table > :last-child > tr:last-child > :first-child {
	border-bottom-left-radius: 8px;
}
.wp-block-table table > :last-child > tr:last-child > :last-child {
	border-bottom-right-radius: 8px;
}

/* Opening hours (<table class="stel-hours">, e.g. in an Elementor HTML widget on the
   store page): plain text in columns, no borders, body text style, no bold. Rows are
   <th><span>day</span></th><td>hours</td>, e.g. "onsdag d. 4. november (i dag)" /
   "10 – 18". Word spacing 4px tighter than body text: Courier New's 9.6px space reads
   wide between the short words of a date. */
table.stel-hours {
	width: auto;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	word-spacing: -4px;
}
table.stel-hours :is(th, td) {
	padding: 0;
	border: 0;
	font-weight: inherit;
	line-height: 32px;
	text-align: left;
	vertical-align: top;
}
table.stel-hours td,
table.stel-hours th > span {
	white-space: nowrap;
}
table.stel-hours td {
	padding-left: 24px;
}

/* Store status ([stel_butiksstatus], inc/opening-hours.php): a pill with a blinking dot and
   a label, in hint text size: white, with the text colour, and the sentiment carried by
   the dot (the notices' colour at full strength). 28px tall: 20px line + 4px above and
   below. Shadow: like the home hero's text and button (0 2px 12px, set in Elementor
   there), but black at 35% instead of 50%: on a solid white shape it reads stronger.
   .is-open "Åben nu": success (green). .is-closing "Lukker snart" (the last 30 minutes
   before closing): warning (yellow). .is-opening "Åbner snart" (the last 30 minutes
   before opening): info (blue). Otherwise the pill is hidden. */
.stel-store-status {
	--stel-store-status-dot: var(--stel-notice-success-strong);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: fit-content;
	padding: 4px 14px 4px 12px; /* 2px more on the right: the round dot on the left reads as more space than the text's edge on the right */
	border-radius: 999px;
	background-color: var(--ast-global-color-4);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
	color: var(--stel-notice-text);
	font-size: var(--stel-hint-font-size);
	line-height: var(--stel-hint-line-height);
	word-spacing: -2px; /* Courier New's wide space between the short words */
	white-space: nowrap;
}
.stel-store-status[hidden] {
	display: none;
}
.stel-store-status.is-closing {
	--stel-store-status-dot: var(--stel-notice-warning-strong);
}
.stel-store-status.is-opening {
	--stel-store-status-dot: var(--stel-notice-info-strong);
}
.stel-store-status__dot {
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--stel-store-status-dot);
	/* Fades from fully opaque to 10% and back, every 2s. */
	animation: stel-status-blink 2s ease-in-out infinite;
}
@keyframes stel-status-blink {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.1;
	}
}
@media (prefers-reduced-motion: reduce) {
	.stel-store-status__dot {
		animation: none;
	}
}

/* Contact details ([stel_kontakt], inc/contact.php): one row per item, 32px tall like the
   opening hours rows, 24px Ionicon + 16px gap + text. The icon is part of the link, for a
   larger tap target. */
.entry-content .stel-contact {
	margin: 0;
	padding: 0;
	list-style: none;
}
.stel-contact li {
	display: flex;
	margin: 0;
	line-height: 32px;
}
.stel-contact a {
	display: flex;
	align-items: center;
	gap: 16px;
}

/* Underline on hover only, like the main menu links (Astra underlines links in page
   content permanently). The #page prefix outranks Astra's rule. */
#page .stel-contact a {
	text-decoration: none;
}
#page .stel-contact a:hover {
	text-decoration: underline;
}
.stel-contact svg {
	display: block;
	width: 24px;
	height: 24px;
}

/* With JavaScript, a row is hidden until the script has written its text (no empty rows
   while the page loads; .stel-js: inc/consent-placeholders.php). Without JavaScript the
   row shows its icon and, where the text would be, a light grey box saying "kræver
   javascript.", like the notice over blocked embeds. The same box replaces a contact link
   in running text ([stel_email], [stel_telefon]). */
.stel-js .stel-contact > li:has(.stel-contact__value:empty) {
	display: none;
}
.stel-contact__nojs {
	display: inline-block;
	padding: 0 8px;
	background-color: var(--ast-global-color-7);
	color: var(--ast-global-color-2);
	line-height: 24px;
}
/* In the 32px rows: 24px tall and centred, so the boxes of two rows are 8px apart. */
.stel-contact .stel-contact__nojs {
	align-self: center;
}

/* ==========================================================================
   Sticky header
   ========================================================================== */

/* The header that slides back in when scrolling up (Astra Pro's fixed copy of the header,
   #ast-fixed-header): the soft shadow, instead of Astra Pro's 0 1px 2px at 20%. The body
   prefix outranks Astra Pro's rule.
   The shadow sits on ::after so it can fade: over the last header height before the top
   of the page, inc/sticky-header.php sets --stel-sticky-shadow from 1 down to 0, so at the
   top the copy has no shadow and looks exactly like the real header it is swapped for. */
body #ast-fixed-header .main-header-bar {
	box-shadow: none;
}
body #ast-fixed-header .main-header-bar::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	box-shadow: var(--stel-shadow-soft);
	opacity: var(--stel-sticky-shadow, 1);
	pointer-events: none;
}

/* Kept in place on the way back to the top, then removed without animation once it
   covers the real header exactly (inc/sticky-header.php). !important outranks the inline
   styles Astra Pro sets when it releases the header. */
#ast-fixed-header.stel-sticky-pinned {
	top: var(--stel-sticky-top, 0px) !important;
	visibility: visible !important;
	transform: translateY(0) !important;
}
#ast-fixed-header.stel-sticky-instant {
	transition: none !important;
}

/* ==========================================================================
   Header icons (Ionicons)
   ========================================================================== */

.ast-addon-cart-wrap svg,
.mobile-menu-toggle-icon svg {
	width: 24px;
	height: 24px;
}

/* First main menu item: no left padding, so its text starts on the page content's left
   edge. The other items keep their spacing, and it follows the Customizer's menu padding. */
#ast-desktop-header .main-header-menu > li:first-child > a.menu-link {
	padding-left: 0;
}

/* Icon-only header links added through a header builder HTML element (e.g. the map pin):
   <a class="stel-header-icon" href="…" aria-label="…"><svg class="ionicon" …></svg></a>.
   Same box as the cart icon: 24px icon + 8px padding = 40px, flex instead of inline text
   layout so it sits on whole pixels, text colour, no hover underline. */
.stel-header-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	color: var(--ast-global-color-3);
	line-height: 0;
}
.stel-header-icon:hover {
	color: var(--ast-global-color-3);
	text-decoration: none;
}
.stel-header-icon svg {
	display: block;
	width: 24px;
	height: 24px;
}

/* Tooltip showing the button's aria-label, so screen readers and the tooltip share one
   text, on the icon links and the menu toggle. CSS rather than the title attribute, whose
   delay can't be changed: appears after 1s on hover, at once on keyboard focus, and hides
   straight away. Hint text size, text colour as background, with an 8x4px pointer on top,
   centred under the icon. --stel-tooltip-top is the tooltip's distance from the button:
   the 48px toggle reaches 4px lower than the 40px links, so all tooltips line up. */
.stel-header-icon,
.ast-button-wrap .menu-toggle {
	--stel-tooltip-top: 4px;
	position: relative;
}
.ast-button-wrap .menu-toggle {
	--stel-tooltip-top: 0px;
}
.stel-header-icon::before,
.stel-header-icon::after,
.ast-button-wrap .menu-toggle::before,
.ast-button-wrap .menu-toggle::after {
	position: absolute;
	z-index: 1;
	left: 50%;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.1s linear;
}
.stel-header-icon::before,
.ast-button-wrap .menu-toggle::before {
	content: "";
	top: calc(100% + var(--stel-tooltip-top) - 4px);
	margin-left: -4px;
	border: solid transparent;
	border-width: 0 4px 4px;
	border-bottom-color: var(--ast-global-color-3);
	filter: drop-shadow(var(--stel-shadow-small)); /* A triangle made of borders has no box-shadow. */
}
.stel-header-icon::after,
.ast-button-wrap .menu-toggle::after {
	content: attr(aria-label);
	top: calc(100% + var(--stel-tooltip-top));
	padding: 2px 8px;
	border-radius: 4px;
	background-color: var(--ast-global-color-3);
	color: var(--ast-global-color-4);
	font-size: var(--stel-hint-font-size);
	line-height: var(--stel-hint-line-height);
	white-space: nowrap;
	box-shadow: var(--stel-shadow-small);
	transform: translateX(-50%);
	-webkit-font-smoothing: auto; /* The toggle has Astra's antialiased; see "Font smoothing". */
	-moz-osx-font-smoothing: auto;
}
.stel-header-icon:focus-visible::before,
.stel-header-icon:focus-visible::after,
.ast-button-wrap .menu-toggle:focus-visible::before,
.ast-button-wrap .menu-toggle:focus-visible::after {
	opacity: 1;
}
@media (hover: hover) {
	.stel-header-icon:hover::before,
	.stel-header-icon:hover::after,
	.ast-button-wrap .menu-toggle:hover::before,
	.ast-button-wrap .menu-toggle:hover::after {
		opacity: 1;
		transition-delay: 1s;
	}
}

/* Desktop header, right side: 32px between the icons themselves, while each keeps its
   own clickable area. Astra pads every header element 10px left and right (20px between
   clickable areas), and the icons sit at different insets inside their clickable areas
   (icon links 8px, cart 10px, menu toggle 12px), which gave uneven gaps of 38px and 42px.
   Gap between clickable areas = 32px - right inset of one - left inset of the next. */
#ast-desktop-header .site-header-primary-section-right > .ast-builder-layout-element {
	padding-right: 0;
	padding-left: 0;
}
#ast-desktop-header .site-header-primary-section-right > :has(.stel-header-icon) + :has(.stel-header-icon) {
	margin-left: 16px; /* 32 - 8 - 8 */
}
#ast-desktop-header .site-header-primary-section-right > :has(.stel-header-icon) + .ast-header-woo-cart {
	margin-left: 14px; /* 32 - 8 - 10 */
}
#ast-desktop-header .site-header-primary-section-right > .ast-header-woo-cart + [data-section="section-header-mobile-trigger"] {
	margin-left: 10px; /* 32 - 10 - 12 */
}

/* Icon buttons keep the same size and position in every state. */

/* Cart: Astra switches the link to inline-block on keyboard focus, which makes the
   header's 64px line-height take effect and pushes the icon 8px up. Block in all states. */
.ast-site-header-cart .cart-container,
.ast-site-header-cart .cart-container:focus-visible {
	display: block;
}

/* Menu toggle: a fixed 48px square (24px icon + 12px padding). Astra sizes it in em
   (height: 2.1em at a 24px font size = 50.39px). On focus Astra also adds a thin border
   (on top of the outline), which grew the button by 2px; the outline alone is the focus
   indicator, as elsewhere on the site.
   Focus style as for links: no corner radius (Astra gives the toggle 2px) and the same
   0.2s linear outline transition as links (from Astra's `a` rule), so the dotted outline
   animates in. Only the outline is transitioned, so nothing else animates. */
[data-section="section-header-mobile-trigger"] .ast-button-wrap .ast-mobile-menu-trigger-minimal {
	box-sizing: border-box;
	height: 48px;
	padding: 12px;
	border-radius: 0;
	transition: outline-width 0.2s linear, outline-offset 0.2s linear;
	/* Astra's script hides the toggle (inline display: none) while the off-canvas menu is
	   open and sets it back to flex on close, so the icon vanished on click. Keeping it
	   displayed lets the panel and overlay slide over it instead. */
	display: flex !important;
}
/* "button" prefix: Astra's focus border rule has the same specificity and loads later. */
[data-section="section-header-mobile-trigger"] .ast-button-wrap button.ast-mobile-menu-trigger-minimal:focus {
	border: 0;
}

/* Override inline style attributes present in Ionicon SVG files. */
svg.ionicon * {
	stroke: currentColor !important;
	stroke-width: 24px !important;
}

/* ==========================================================================
   WooCommerce product category — product cards
   ========================================================================== */

/* The cart page's product sections use the category page's card: image with the centred
   name over its bottom edge, in 4 / 3 / 2 columns with a 20px column gap and no row gap.
   Covers "Nyheder" (empty cart, Newest Products block) and "Har du overvejet disse?"
   (filled cart, cross-sells via Product Collection, 3 columns on desktop since the items
   column is too narrow for 4). Price and button are switched off in the blocks' settings. */
#page :is(.wp-block-woocommerce-empty-cart-block .wc-block-grid__products, .wp-block-woocommerce-product-collection .wc-block-product-template) {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}
#page .wp-block-woocommerce-product-collection .wc-block-product-template {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 991px) {
	#page .wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (max-width: 544px) {
	#page :is(.wp-block-woocommerce-empty-cart-block .wc-block-grid__products, .wp-block-woocommerce-product-collection .wc-block-product-template) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
#page :is(.wp-block-woocommerce-empty-cart-block .wc-block-grid__product, .wp-block-woocommerce-product-collection .wc-block-product) {
	position: relative;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 1rem; /* Newest Products shrinks it, which would also shrink the hover button. */
	flex: none;
}
#page :is(.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-link, .wp-block-woocommerce-product-collection .wc-block-components-product-image a) {
	display: block;
}
#page :is(.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image, .wp-block-woocommerce-product-collection .wc-block-components-product-image) {
	display: block;
	margin: 0;
}
#page :is(.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image img, .wp-block-woocommerce-product-collection .wc-block-components-product-image img) {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	border-radius: 0;
}
#page :is(.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title, .wp-block-woocommerce-product-collection .wp-block-post-title) {
	position: absolute;
	right: 0;
	bottom: 24px;
	left: 0;
	margin: 0;
	font-size: 1rem;
	font-weight: 400;
	line-height: 20.8px;
	text-align: center;
}
#page .wp-block-woocommerce-product-collection .wp-block-post-title a {
	font: inherit;
	text-decoration: none;
}
#page .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title:hover,
#page .wp-block-woocommerce-product-collection .wp-block-post-title a:hover {
	text-decoration: underline;
}

/* Hover button (Astra's, added in inc/product-cards.php): Astra only reveals it inside its
   own category card wrapper, so it's revealed here too, on hover and on keyboard focus. */
#page :is(.wp-block-woocommerce-empty-cart-block .wc-block-grid__product, .wp-block-woocommerce-product-collection .wc-block-product):is(:hover, :focus-within) .ast-on-card-button:not(.ast-onsale-card) {
	opacity: 1;
	visibility: visible;
}

/* "Se alle ..." buttons below "Nyheder": block buttons, styled by the Customizer's primary and
   secondary buttons, minus what .ast-button and .ast-outline-button don't have: the
   transition on both, the shadow on the secondary. */
#page .wp-block-woocommerce-empty-cart-block .wp-block-button__link {
	transition: none;
}
#page .wp-block-woocommerce-empty-cart-block .is-style-outline .wp-block-button__link {
	box-shadow: none;
}

/* Empty cart: exactly 64px between the "Se alle ..." buttons and the footer on every screen
   (the buttons' own block margin), without Astra's extra 60px from 1200px up. */
.ast-plain-container.ast-no-sidebar #primary:has(.wp-block-woocommerce-empty-cart-block) {
	margin-bottom: 0;
}

/* Empty cart: the "Kurven er tom." heading (an H2) in body text style, like the coming soon
   and 404 messages. Set here because WooCommerce dropped its own font-size: inherit for this
   heading in 11.3.0, and Astra's H2 size took over. */
#page .wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title {
	font-size: 1rem;
	line-height: 24px;
}

/* Cart page while WooCommerce's cart script loads (inc/cart-page.php):
   - WooCommerce's own container setting for the cart block, set here too so it applies from
     the first frame: before WooCommerce's stylesheet arrives, the empty cart image's top
     margin would otherwise collapse with the title's, and the content would move 24px when
     it does. Also on the stand-in copy of the empty cart.
   - Empty cart (.stel-cart-empty, only when the cart really is empty): the empty view instead
     of the loading skeleton of a filled cart (WooCommerce's own rule hides the empty view
     during loading). With JavaScript, a stand-in copy of it is shown while the real block is
     hidden (.stel-cart-waiting), until WooCommerce has drawn its own empty view. */
.wp-block-woocommerce-cart,
.stel-cart-clone {
	container-type: inline-size;
	width: 100%;
}
.stel-cart-empty .wp-block-woocommerce-cart.is-loading > .wp-block-woocommerce-filled-cart-block {
	display: none;
}
.stel-cart-empty .wp-block-woocommerce-cart.is-loading > .wp-block-woocommerce-empty-cart-block {
	display: block;
}
.stel-cart-waiting .wp-block-woocommerce-cart {
	display: none;
}

/* Coming soon (inc/coming-soon.php): while the store is in coming soon mode, the empty cart
   page leaves out "Nyheder": everything after "Kurven er tom." (the heading, the Newest
   Products block and the "Se alle ..." buttons). It comes back by itself when the store is
   switched to "Live". The message then keeps the 64px to the footer that the buttons had
   (its own 160px bottom margin is set in the cart page's block content). */
.stel-store-coming-soon .wp-block-woocommerce-empty-cart-block > .wc-block-cart__empty-cart__title ~ * {
	display: none;
}
.stel-store-coming-soon .wp-block-woocommerce-empty-cart-block > .wc-block-cart__empty-cart__title {
	margin-bottom: 64px !important;
}

/* Coming soon page (inc/coming-soon.php), laid out like the 404 page: the content area fills
   the space between header and footer (Astra's sticky footer) and the content is centred in
   it, with at least 120px above and below on short screens. It replaces a shop, category
   or product page, so the page's normal 64px above a title is cancelled (the extra classes
   outrank that rule, in "Vertical spacing"). WooCommerce wraps the content in
   .wp-site-blocks (its block template), which joins the chain too. */
.site-content:has(.stel-coming-soon),
.site-content > .ast-container:has(.stel-coming-soon),
.site-content .wp-site-blocks:has(> .stel-coming-soon),
.site-content #primary.stel-coming-soon {
	display: flex;
}
.site-content > .ast-container:has(.stel-coming-soon),
.site-content .wp-site-blocks:has(> .stel-coming-soon),
.site-content #primary.stel-coming-soon {
	flex: 1 1 auto;
}
html body .site .site-content #primary.content-area.primary.stel-coming-soon {
	flex-direction: column;
	justify-content: center;
	margin-block: 0 !important;
}

/* Illustration with the message below, centred, 32px apart (as on the empty cart page). The
   illustration is shown at its own size from 720px; below that it scales with the screen,
   from 481px wide at 720px to 240px at 375px (and 240px on narrower phones), rounded down
   to whole pixels. The H1 looks like body text: the page has no visible title. */
.stel-coming-soon__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	margin-block: 120px;
	text-align: center;
}
.stel-coming-soon__image,
.stel-coming-soon__image img {
	display: block;
	max-width: 100%;
	height: auto;
}
/* Size. --stel-cs-size: the size before rounding; --stel-cs-ratio: height / width.
   Portrait (below 992px): 240px + 0.7px per px of screen width above 375px (241px over
   345px), between 240px and its own 481px.
   Whole pixels when centred: the width is rounded down to be even when the content box is
   even and odd when it's odd (100cqw: the content box is a container), and the height is
   rounded to the nearest pixel; object-fit keeps the proportions. Browsers without round()
   use the unrounded size. */
.stel-coming-soon__content {
	container-type: inline-size;
}
.stel-coming-soon__image img {
	--stel-cs-size: clamp(240px, 240px + (100vw - 375px) * 0.7, 481px);
	--stel-cs-ratio: 380 / 481;
	width: var(--stel-cs-size);
	width: calc(100cqw - round(up, 100cqw - var(--stel-cs-size), 2px));
	height: round(calc(100cqw - round(up, 100cqw - var(--stel-cs-size), 2px)) * var(--stel-cs-ratio), 1px);
	object-fit: contain;
}
@media (min-width: 992px) {
	.stel-coming-soon__image img {
		--stel-cs-size: 740px;
		--stel-cs-ratio: 240 / 740;
	}
}
/* "besøg butikken": a secondary button with a chevron (.stel-button-icon, "Buttons with an
   icon"). */
.stel-coming-soon .stel-coming-soon__message {
	margin: 0;
	font-size: 1rem;
	font-weight: inherit;
	line-height: 24px;
	word-spacing: normal;
}

/* Remove bottom margin from product cards on category pages. */
body.archive ul.products li.product.ast-article-post {
	margin-bottom: 0;
}

/* Remove bottom margin from product thumbnail images. */
.woocommerce-js ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
	margin-bottom: 0;
}

/* Pin the title over the bottom of the product thumbnail image. */
.woocommerce ul.products li.product {
	position: relative;
}
.woocommerce ul.products li.product .astra-shop-summary-wrap {
	position: absolute;
	bottom: 16px;
	left: 0;
	right: 0;
	pointer-events: none;
}
.woocommerce ul.products li.product .astra-shop-summary-wrap a {
	pointer-events: auto;
}

/* ==========================================================================
   WooCommerce product page
   ========================================================================== */

/* Remove bottom margin from the primary content area on single product pages. */
body.single-product #primary.content-area {
	margin-bottom: 0;
}

/* Gallery zoom trigger: replace the CSS-drawn magnifier (::before/::after) with the
   search-outline Ionicon. Stroke hardcoded to #000 (data URIs can't use currentColor). */
.woocommerce-js div.product div.images .woocommerce-product-gallery__trigger {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'%3E%3Cpath d='M221.09,64A157.09,157.09,0,1,0,378.18,221.09,157.1,157.1,0,0,0,221.09,64Z' style='fill:none;stroke:%23000;stroke-miterlimit:10;stroke-width:24px'/%3E%3Cline x1='338.29' y1='338.29' x2='448' y2='448' style='fill:none;stroke:%23000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:24px'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 24px;
}
.woocommerce-js div.product div.images .woocommerce-product-gallery__trigger::before,
.woocommerce-js div.product div.images .woocommerce-product-gallery__trigger::after {
	display: none;
}

/* Stock label ("På lager:") — regular weight instead of Astra's bold. */
.woocommerce-js div.product p.ast-stock-detail .ast-stock-avail {
	font-weight: 400;
}

/* Style the product title (h1) to match h2 size and line-height. */
.woocommerce div.product h1.product_title {
	font-size: 1.7em;
	line-height: 1.3;
}

/* Remove the negative left margin Astra applies to the add-to-cart button on
   sold-individually products (where the quantity input is hidden). */
.woocommerce-js .sold-individually .button.single_add_to_cart_button,
.woocommerce-js .product:has(.quantity input[type=hidden]) .button.single_add_to_cart_button {
	margin-left: 0;
}

/* Remove the divider between the variation selectors and the add-to-cart button. */
.woocommerce-js div.product form.cart .variations {
	border-bottom: none;
}

/* Remove bottom margin below variation label cells set by Astra. */
.woocommerce-js div.product form.cart .variations th.label {
	margin-bottom: 0;
}

/* Space below each variation select. */
.woocommerce-js div.product form.cart .variations select {
	margin-bottom: 16px;
}

/* "Ryd" reset link — match body text style with underline. */
.woocommerce div.product form.cart a.reset_variations {
	font-size: 1rem;
	font-weight: 400;
	text-transform: none;
	text-decoration: underline;
	color: inherit;
}

/* ==========================================================================
   WooCommerce sort dropdown
   ========================================================================== */

/* Shrink select to content width, right-align text, replace native arrow with
   chevron-down-outline Ionicon. Stroke hardcoded to #000 (data URIs can't use
   currentColor). */
.woocommerce-ordering select.orderby {
	color: #000;
	cursor: pointer;
	width: auto;
	direction: rtl;
	padding-right: 40px !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'%3E%3Cpolyline points='112 184 256 328 400 184' style='fill:none;stroke:%23000;stroke-linecap:round;stroke-linejoin:round;stroke-width:24px'/%3E%3C/svg%3E") !important;
	background-size: 24px !important;
}

/* ==========================================================================
   Vertical spacing — header → breadcrumbs → title → content
   Gaps: 24px / 24px / 32px
   ========================================================================== */

/* Header → content: 24px. Excludes page-builder pages (Elementor full-width). */
body.archive .site .site-content #primary,
body.wp-singular:not(.ast-page-builder-template) .site .site-content #primary {
	margin-top: 24px !important;
}

body.ast-page-builder-template .site .site-content #primary {
	margin-top: 0 !important;
}

/* Pages with an H1 and no breadcrumb (inc/breadcrumbs.php): header → H1 64px. This includes
   page-builder pages with a title; those without an H1, like the home hero, stay at 0. */
body.archive .site .site-content #primary:has(h1):not(:has(.ast-breadcrumbs-wrapper, .woocommerce-breadcrumb)),
body.wp-singular .site .site-content #primary:has(h1):not(:has(.ast-breadcrumbs-wrapper, .woocommerce-breadcrumb)) {
	margin-top: 64px !important;
}

/* Breadcrumbs → title: 24px. */
.ast-breadcrumbs-wrapper {
	margin-top: 0 !important;
	margin-bottom: 24px !important;
}

/* Title → content: 32px — singular pages.
   Excludes empty entry-header elements on page-builder pages. */
.entry-header:not(.ast-no-title.ast-no-thumbnail) {
	margin-bottom: 32px !important;
}

/* Title → content: 32px — archive/WooCommerce pages.
   Removes Astra's padding-bottom and border that would add to the gap. */
.ast-archive-description {
	margin-bottom: 32px !important;
	padding-bottom: 0 !important;
	border-bottom: none !important;
}

/* Pages with an H1 and no breadcrumb: H1 → content 24px on every page type. Category pages
   also get the same H1 line height as other pages (Astra: 1.4 instead of 1.2), and the
   checkout block's own 24px top padding goes, so it doesn't add to the gap. */
#primary:not(:has(.ast-breadcrumbs-wrapper, .woocommerce-breadcrumb)) .entry-header:not(.ast-no-title.ast-no-thumbnail) {
	margin-bottom: 24px !important;
}
#primary:not(:has(.ast-breadcrumbs-wrapper, .woocommerce-breadcrumb)) .entry-title {
	margin-bottom: 0; /* The wrapper's 24px above is the whole gap (Astra: 0.6em = 19.2px). */
}
#primary:not(:has(.ast-breadcrumbs-wrapper, .woocommerce-breadcrumb)) .woocommerce-products-header__title {
	margin-bottom: 24px;
	line-height: 1.2;
}
#primary:not(:has(.ast-breadcrumbs-wrapper, .woocommerce-breadcrumb)) .wp-block-woocommerce-checkout {
	padding-top: 0;
}

/* ==========================================================================
   Typewriter headline (inc/typewriter.php)
   ========================================================================== */

/* Cursor: a thin bar in the text colour, as tall as the letters. It blinks while a word
   rests and stays solid while typing; hidden with reduced motion. */
.stel-typewriter__cursor {
	display: inline-block;
	width: 2px;
	height: 0.9em;
	margin-left: 2px;
	background-color: currentColor;
	vertical-align: -0.1em;
	animation: stel-cursor-blink 1s steps(1) infinite;
}
.stel-typewriter.is-typing .stel-typewriter__cursor {
	animation: none;
}
@keyframes stel-cursor-blink {
	50% {
		opacity: 0;
	}
}
@media (prefers-reduced-motion: reduce) {
	.stel-typewriter__cursor {
		display: none;
	}
}

/* ==========================================================================
   404 page (template-parts/404/404-layout.php)
   ========================================================================== */

/* The content area fills the space between header and footer (Astra's sticky footer), and
   the content is centred in it, with at least 120px above and below on short screens. */
.error404 .site-content,
.error404 .site-content > .ast-container,
.error404 #primary {
	display: flex;
}
.error404 .site-content > .ast-container,
.error404 #primary {
	flex: 1 1 auto;
}
.error404 #primary {
	flex-direction: column;
	justify-content: center;
	margin-block: 0;
}

/* Centred illustration, message and button, 32px apart. The H1 looks like body text: the
   page has no visible page title. */
.stel-404 {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	margin-block: 120px;
	text-align: center;
}
.stel-404__image {
	display: block;
}
.stel-404 .stel-404__message {
	margin: 0;
	font-size: 1rem;
	font-weight: inherit;
	line-height: 24px;
	word-spacing: normal;
}

/* ==========================================================================
   Off-canvas menu
   ========================================================================== */

/* Add "menu" label to the left of the popup header, opposite the close button. */
.ast-mobile-popup-header {
	justify-content: space-between !important;
	align-items: center;
	padding-top: 8px;
	margin-bottom: 8px;
}
.ast-mobile-popup-header::before {
	content: "menu";
	padding-left: 20px;
	font-size: 1.5em;
	line-height: 32px;
	font-weight: 400;
}

/* Close button: a fixed 48px square (24px icon + 12px padding), like the menu toggle.
   Astra sizes it in em (24px font, .6em padding = 52.8px). Astra focuses it when the
   menu opens, and its focus style adds a thin border only while the drawer is .active,
   so on close the header shrank by 2px and the menu items jumped up. The outline alone
   is the focus indicator, with the same radius and transition as the menu toggle. */
#ast-mobile-popup-wrapper .ast-mobile-popup-header .menu-toggle-close,
#ast-mobile-popup-wrapper .ast-mobile-popup-header .menu-toggle-close:focus {
	box-sizing: border-box;
	width: 48px;
	height: 48px;
	padding: 12px;
	border: 0;
	border-radius: 0;
	transition: outline-width 0.2s linear, outline-offset 0.2s linear;
}
/* Keyboard focus indicator. Astra removes the outline from this button (its focus cue
   was the border removed above), so it had none; this is the site's default focus style. */
#ast-mobile-popup-wrapper .ast-mobile-popup-header .menu-toggle-close:focus-visible {
	outline-style: dotted;
	outline-color: inherit;
	outline-width: thin;
}
/* Astra focuses the close button as the menu opens. Hold its focus ring back (transparent)
   while the panel slides in, then let it animate in as usual (3px to thin, 0.2s), so the
   two animations run one after the other instead of at once. Runs each time the drawer
   becomes .active; later keyboard focus shows the ring immediately. */
#ast-mobile-popup-wrapper .ast-mobile-popup-drawer.active .menu-toggle-close {
	animation:
		stel-offcanvas-focus-hold var(--stel-offcanvas-duration) step-end,
		stel-offcanvas-focus-in 0.2s linear var(--stel-offcanvas-duration);
}
@keyframes stel-offcanvas-focus-hold {
	from, to { outline-color: transparent; }
}
@keyframes stel-offcanvas-focus-in {
	from { outline-width: 3px; }
	to { outline-width: thin; }
}

/* Footer: site logo, centred, 16px above the panel's bottom edge (markup:
   inc/offcanvas-footer.php). The content area grows to fill the panel and the logo is
   pinned to its bottom; the bottom padding reserves room for it (16px gap + 24px logo +
   16px offset), so a long menu scrolls instead of running into it. Astra toggles the
   content areas' display inline, so they stay block and the logo is positioned. */
#ast-mobile-popup-wrapper .ast-mobile-popup-inner > .ast-mobile-popup-content,
#ast-mobile-popup-wrapper .ast-mobile-popup-inner > .ast-desktop-popup-content {
	position: relative;
	flex: 1 0 auto;
	padding-bottom: 56px;
}
#ast-mobile-popup-wrapper .stel-offcanvas-footer {
	position: absolute;
	right: 0;
	bottom: 16px;
	left: 0;
	display: flex;
	justify-content: center;
	padding: 0;
	line-height: 0;
}
#ast-mobile-popup-wrapper .stel-offcanvas-footer a {
	display: flex;
}

/* Width: 400px (same as the cart dropdown) on every screen, instead of Astra's percentages
   (desktop: Customizer, Header Builder > Off-Canvas > width, % only, sub-pixel widths;
   tablet and mobile: 90%). On narrow phones it stops 48px short of the screen edge, so a
   strip of the overlay stays visible to tap the menu closed.
   Colours: the Customizer's off-canvas menu colours are set on desktop only, with tablet
   and mobile left empty so they inherit (Astra's tablet defaults were grey links and a
   tinted hover background). */
#ast-mobile-popup-wrapper .ast-mobile-popup-drawer .ast-mobile-popup-inner,
#ast-mobile-popup-wrapper .ast-mobile-popup-drawer.active .ast-mobile-popup-inner {
	width: 100%;
	max-width: min(400px, 100% - 48px);
}

/* Open/close animation. Astra hides the drawer (visibility) and drops the panel's
   Customizer background colour (only set while .active) the instant it closes, while
   the menu items, which force visibility: visible, keep sliding out on their own.
   Delaying those switches until the slide has finished makes the panel leave as one
   piece. One duration and easing for every part, in both directions.
   The panel only slides; the overlay is the only thing that fades. Astra also fades the
   whole drawer layer and the panel itself, which compounded into a see-through panel
   for the first part of the slide, so both are kept fully opaque. While closed, the
   drawer is still invisible: visibility: hidden and moved off-screen. */
#ast-mobile-popup-wrapper {
	--stel-offcanvas-duration: 0.5s;
	--stel-offcanvas-easing: ease-in-out;
}
#ast-mobile-popup-wrapper .ast-mobile-popup-drawer,
#ast-mobile-popup-wrapper .ast-mobile-popup-drawer .ast-mobile-popup-inner {
	opacity: 1;
}
#ast-mobile-popup-wrapper .ast-mobile-popup-drawer {
	transition:
		left 0s var(--stel-offcanvas-duration),
		right 0s var(--stel-offcanvas-duration),
		visibility 0s var(--stel-offcanvas-duration);
	/* Astra only sets z-index: 100000 while .active, so on close the header (z-index 99)
	   jumped in front of the panel and overlay mid-animation. Keeping it in both states
	   is harmless: when closed the drawer is hidden and moved off-screen. */
	z-index: 100000;
}
#ast-mobile-popup-wrapper .ast-mobile-popup-drawer.active {
	transition: none;
}
#ast-mobile-popup-wrapper .ast-mobile-popup-drawer .ast-mobile-popup-inner {
	transition:
		transform var(--stel-offcanvas-duration) var(--stel-offcanvas-easing),
		visibility 0s var(--stel-offcanvas-duration),
		background-color 0s var(--stel-offcanvas-duration);
}
#ast-mobile-popup-wrapper .ast-mobile-popup-drawer.active .ast-mobile-popup-inner {
	transition: transform var(--stel-offcanvas-duration) var(--stel-offcanvas-easing);
}
#ast-mobile-popup-wrapper .ast-mobile-popup-drawer .ast-mobile-popup-overlay {
	transition:
		opacity var(--stel-offcanvas-duration) var(--stel-offcanvas-easing),
		visibility 0s var(--stel-offcanvas-duration);
}
#ast-mobile-popup-wrapper .ast-mobile-popup-drawer.active .ast-mobile-popup-overlay {
	transition: opacity var(--stel-offcanvas-duration) var(--stel-offcanvas-easing);
}

/* ==========================================================================
   Cart and checkout pages (WooCommerce Cart / Checkout blocks)
   ========================================================================== */

/* All cart and checkout text uses the body text style (Customizer > Global > Typography
   > Body): font, size, weight, line height, letter spacing and lower case. WooCommerce
   Blocks sets its own sizes (11–20px), weights and uppercase labels. Exceptions:
   - buttons keep the Customizer's button style;
   - fields (text inputs, the country select) keep WooCommerce's field metrics, so the
     placeholder text inside them (which floats up once filled) keeps its position;
   - hint text under fields ("du handler i øjeblikket som gæst", field error messages)
     keeps WooCommerce's smaller size;
   - checkout headlines (step titles, "ordreoversigt") keep their heading style;
   - the item quantity badge on the order summary thumbnail stays small.
   Scoped to the filled cart; the empty-cart view is built from editable blocks
   (headings, product grid) with their own styles. */
#page .wp-block-woocommerce-filled-cart-block,
#page .wp-block-woocommerce-filled-cart-block *:not(svg, svg *, .wc-block-components-button, .wc-block-components-button *, .wc-block-components-text-input *, .wp-block-woocommerce-product-collection, .wp-block-woocommerce-product-collection *),
#page .wp-block-woocommerce-checkout,
#page .wp-block-woocommerce-checkout *:not(svg, svg *, .wc-block-components-button, .wc-block-components-button *, .wc-block-components-text-input *, .wc-blocks-components-select *, .wc-block-components-title, .wc-block-components-title *, .wc-block-components-checkout-order-summary__title, .wc-block-components-checkout-order-summary__title *, .wc-block-components-order-summary-item__quantity, .wc-block-components-order-summary-item__quantity *, .wc-block-checkout__guest-checkout-notice, .wc-block-checkout__guest-checkout-notice *, .wc-block-components-validation-error, .wc-block-components-validation-error *) {
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}

/* Checkout: 16px more space below each form section (fieldset: contact, shipping and
   billing address, shipping options, payment), 40px instead of WooCommerce's 24px. */
#page .wp-block-woocommerce-checkout fieldset.wc-block-components-checkout-step {
	margin-bottom: 40px;
}

/* Cart: "samlet beløb" heading with 12px bottom padding instead of 10px. */
#page .wp-block-woocommerce-cart .wc-block-cart__totals-title {
	padding-bottom: 12px;
}

/* Checkout: order summary box ("ordreoversigt") with 8px corners instead of 5px. */
#page .wp-block-woocommerce-checkout-order-summary-block {
	border-radius: 8px;
}

/* Remove item button: replace WordPress's filled "trash" icon (inline SVG from the Cart
   block script) with the trash-outline Ionicon, 24px with the site's 24px stroke like the
   other icons. Same mask technique as the cookie banner close button: drawn on ::before
   in currentColor; the button, its label and focus outline are untouched. */
#page .wc-block-cart-item__remove-link {
	width: 24px;
	height: 24px;
}

/* Expandable panels (e.g. "tilføj rabatkode", cart and checkout): replace WordPress's
   chevron (inline SVG, swapped between up and down) with the chevron-down-outline
   Ionicon, turned upside down while open. Pinned to the top of the toggle, so it doesn't
   move 4px down when the open toggle gets its 8px bottom padding. */
#page .wc-block-components-panel__button-icon {
	display: none;
}
#page .wc-block-components-panel__button::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 24px;
	height: 24px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpolyline points='112 184 256 328 400 184' style='fill:none;stroke:%23000;stroke-linecap:round;stroke-linejoin:round;stroke-width:24px'/%3E%3C/svg%3E") center / 24px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpolyline points='112 184 256 328 400 184' style='fill:none;stroke:%23000;stroke-linecap:round;stroke-linejoin:round;stroke-width:24px'/%3E%3C/svg%3E") center / 24px no-repeat;
}
#page .wc-block-components-panel__button[aria-expanded="true"]::after {
	transform: rotate(180deg);
}

/* 8px more space between the product details and the remove button (4px → 12px). */
#page .wc-block-cart-item__quantity {
	margin-top: 8px;
}
#page .wc-block-cart-item__remove-link svg {
	display: none;
}
#page .wc-block-cart-item__remove-link::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M112,112l20,320c.95,18.49,14.4,32,32,32H348c17.67,0,30.87-13.51,32-32l20-320' style='fill:none;stroke:%23000;stroke-linecap:round;stroke-linejoin:round;stroke-width:24px'/%3E%3Cline x1='80' y1='112' x2='432' y2='112' style='stroke:%23000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:24px'/%3E%3Cpath d='M192,112V72h0a23.93,23.93,0,0,1,24-24h80a23.93,23.93,0,0,1,24,24h0v40' style='fill:none;stroke:%23000;stroke-linecap:round;stroke-linejoin:round;stroke-width:24px'/%3E%3Cline x1='256' y1='176' x2='256' y2='400' style='fill:none;stroke:%23000;stroke-linecap:round;stroke-linejoin:round;stroke-width:24px'/%3E%3Cline x1='184' y1='176' x2='192' y2='400' style='fill:none;stroke:%23000;stroke-linecap:round;stroke-linejoin:round;stroke-width:24px'/%3E%3Cline x1='328' y1='176' x2='320' y2='400' style='fill:none;stroke:%23000;stroke-linecap:round;stroke-linejoin:round;stroke-width:24px'/%3E%3C/svg%3E") center / 24px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M112,112l20,320c.95,18.49,14.4,32,32,32H348c17.67,0,30.87-13.51,32-32l20-320' style='fill:none;stroke:%23000;stroke-linecap:round;stroke-linejoin:round;stroke-width:24px'/%3E%3Cline x1='80' y1='112' x2='432' y2='112' style='stroke:%23000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:24px'/%3E%3Cpath d='M192,112V72h0a23.93,23.93,0,0,1,24-24h80a23.93,23.93,0,0,1,24,24h0v40' style='fill:none;stroke:%23000;stroke-linecap:round;stroke-linejoin:round;stroke-width:24px'/%3E%3Cline x1='256' y1='176' x2='256' y2='400' style='fill:none;stroke:%23000;stroke-linecap:round;stroke-linejoin:round;stroke-width:24px'/%3E%3Cline x1='184' y1='176' x2='192' y2='400' style='fill:none;stroke:%23000;stroke-linecap:round;stroke-linejoin:round;stroke-width:24px'/%3E%3Cline x1='328' y1='176' x2='320' y2='400' style='fill:none;stroke:%23000;stroke-linecap:round;stroke-linejoin:round;stroke-width:24px'/%3E%3C/svg%3E") center / 24px no-repeat;
}

/* ==========================================================================
   Background video controls (Elementor background videos)
   ========================================================================== */

/* One background overlay, also before the video plays. Elementor draws the container's
   overlay (e.g. the hero's dark gradient) twice: on the container itself, over the still
   image, and on the video layer. Once the video plays it covers the container's overlay,
   but before that the video layer is transparent, so the still image got both and looked
   darker than the video. The video layer's overlay is enough on its own. */
.e-con:has(> .elementor-background-video-container, > .e-con-inner > .elementor-background-video-container)::before {
	display: none;
}

/* Pause/play button added to every container with a background video
   (inc/background-video.php). Icon-only, 24px Ionicon (pause-circle-outline /
   play-circle-outline) in a 40px button (8px padding), white like the hero text (set in
   Elementor). Bottom-right corner on all devices, placed from the video container's own
   edges (not the page gutter): the icon's edges sit 24px from the container's right and
   bottom edges, so the button itself sits 16px from them (24px minus its 8px padding). */
.e-con .stel-video-toggle,
.e-con .stel-video-toggle:hover,
.e-con .stel-video-toggle:focus {
	position: absolute;
	z-index: 1;
	right: 16px;
	bottom: 16px;
	display: block;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 8px;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: #fff;
	cursor: pointer;
	/* Focus outline animates in like links and the header icons (3px to thin, 0.2s). */
	transition: outline-width 0.2s linear, outline-offset 0.2s linear;
}
.e-con .stel-video-toggle:focus-visible {
	outline: thin dotted currentColor;
}
.e-con .stel-video-toggle::before {
	content: "";
	display: block;
	width: 24px;
	height: 24px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M448,256c0-106-86-192-192-192S64,150,64,256s86,192,192,192S448,362,448,256Z' style='fill:none;stroke:%23000;stroke-miterlimit:10;stroke-width:24px'/%3E%3Cline x1='208' y1='192' x2='208' y2='320' style='fill:none;stroke:%23000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:24px'/%3E%3Cline x1='304' y1='192' x2='304' y2='320' style='fill:none;stroke:%23000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:24px'/%3E%3C/svg%3E") center / 24px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M448,256c0-106-86-192-192-192S64,150,64,256s86,192,192,192S448,362,448,256Z' style='fill:none;stroke:%23000;stroke-miterlimit:10;stroke-width:24px'/%3E%3Cline x1='208' y1='192' x2='208' y2='320' style='fill:none;stroke:%23000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:24px'/%3E%3Cline x1='304' y1='192' x2='304' y2='320' style='fill:none;stroke:%23000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:24px'/%3E%3C/svg%3E") center / 24px no-repeat;
}
.e-con .stel-video-toggle.is-paused::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M448,256c0-106-86-192-192-192S64,150,64,256s86,192,192,192S448,362,448,256Z' style='fill:none;stroke:%23000;stroke-miterlimit:10;stroke-width:24px'/%3E%3Cpath d='M216.32,334.44,330.77,265.3a10.89,10.89,0,0,0,0-18.6L216.32,177.56A10.78,10.78,0,0,0,200,186.87V325.13A10.78,10.78,0,0,0,216.32,334.44Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M448,256c0-106-86-192-192-192S64,150,64,256s86,192,192,192S448,362,448,256Z' style='fill:none;stroke:%23000;stroke-miterlimit:10;stroke-width:24px'/%3E%3Cpath d='M216.32,334.44,330.77,265.3a10.89,10.89,0,0,0,0-18.6L216.32,177.56A10.78,10.78,0,0,0,200,186.87V325.13A10.78,10.78,0,0,0,216.32,334.44Z'/%3E%3C/svg%3E");
}

/* Reduced motion (OS setting): show the container's still fallback image (set in
   Elementor as the video fallback) instead of the video. Only the video is hidden: the
   video layer stays, as it carries the overlay (see the top of this section). */
@media (prefers-reduced-motion: reduce) {
	.elementor-background-video-container video {
		display: none;
	}
}

/* ==========================================================================
   Notices (system feedback)
   ========================================================================== */

/* One notice component for both WooCommerce notice systems, built from the
   --stel-notice-* tokens:
   - classic notices (product pages, shop, my account): .woocommerce-message (success),
     .woocommerce-info (info), .woocommerce-error (error);
   - block notices (cart, checkout): .wc-block-components-notice-banner with .is-success,
     .is-info, .is-warning, .is-error, .is-default (neutral, e.g. the toasts).
   No borders or accents: background colour + Ionicon (in the text colour) only, 8px
   radius, 8px / 16px padding, 24px icon centred on the text, 16px gap.
   Selectors start with #page (the site wrapper) because the WooCommerce Blocks
   stylesheet loads after this one on cart/checkout. */

/* Classic notices. The icon sits in a 24px column (16px padding + 24px icon + 16px gap
   = 56px left padding), vertically centred. */
#page .woocommerce-message,
#page .woocommerce-info,
#page .woocommerce-error {
	display: block;
	position: relative;
	margin: 0 0 24px;
	padding: var(--stel-notice-padding-y) var(--stel-notice-padding-x) var(--stel-notice-padding-y) calc(var(--stel-notice-padding-x) + var(--stel-notice-icon-size) + var(--stel-notice-gap));
	border: 0;
	border-radius: var(--stel-notice-radius);
	color: var(--stel-notice-text);
	line-height: var(--stel-notice-line-height);
	list-style: none;
}
#page .woocommerce-message::before,
#page .woocommerce-info::before,
#page .woocommerce-error::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--stel-notice-padding-x);
	width: var(--stel-notice-icon-size);
	height: var(--stel-notice-icon-size);
	margin: auto 0;
	color: var(--stel-notice-text); /* Astra colours the error icon red */
	background-color: currentColor;
	-webkit-mask: var(--stel-notice-icon) center / var(--stel-notice-icon-size) no-repeat;
	mask: var(--stel-notice-icon) center / var(--stel-notice-icon-size) no-repeat;
}
#page .woocommerce-message { --stel-notice-icon: var(--stel-notice-icon-success); background-color: var(--stel-notice-success-bg); }
#page .woocommerce-info { --stel-notice-icon: var(--stel-notice-icon-info); background-color: var(--stel-notice-info-bg); }
#page .woocommerce-error { --stel-notice-icon: var(--stel-notice-icon-error); background-color: var(--stel-notice-error-bg); }

#page .woocommerce-error li {
	margin: 0;
	padding: 0;
}

/* Text links inside notices: text colour, permanently underlined. */
#page :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a:not(.button, .ast-button, .ast-outline-button) {
	color: inherit;
	text-decoration: underline;
}

/* Notice with a button (e.g. "Se kurv" after adding to cart; made a secondary button in
   inc/notices.php): a row with the text on the left and the button on the right, all
   vertically centred. The notice grows with the button's height, which comes from the
   Customizer (e.g. 40px button = 56px notice). In error notices the message (and its
   button) sits in a list item, so the row is the list item there. */
#page :is(.woocommerce-message, .woocommerce-info, .woocommerce-error):has(> a.button, > a.ast-outline-button),
#page .woocommerce-error > li:has(> a.button, > a.ast-outline-button) {
	display: flex;
	align-items: center;
	gap: var(--stel-notice-gap);
}
#page :is(.woocommerce-message, .woocommerce-info, .woocommerce-error):has(> a.button, > a.ast-outline-button)::after {
	display: none;
}
#page :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) > :is(a.button, a.ast-outline-button),
#page .woocommerce-error > li > :is(a.button, a.ast-outline-button) {
	float: none;
	order: 0;
	flex-shrink: 0;
	margin: 0 0 0 auto;
}

/* Narrow screens: the button goes below the text (8px gap), left-aligned with it, so long
   messages get the full width. The icon then lines up with the first line of text
   (24px icon = 24px line) instead of being centred between text and button. */
@media (max-width: 544px) {
	#page :is(.woocommerce-message, .woocommerce-info, .woocommerce-error):has(> a.button, > a.ast-outline-button),
	#page .woocommerce-error > li:has(> a.button, > a.ast-outline-button) {
		display: block;
	}
	#page :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) > :is(a.button, a.ast-outline-button),
	#page .woocommerce-error > li > :is(a.button, a.ast-outline-button) {
		display: block;
		width: fit-content;
		margin: 8px 0 0;
	}
	#page :is(.woocommerce-message, .woocommerce-info, .woocommerce-error):has(> a.button, > a.ast-outline-button)::before,
	#page .woocommerce-error:has(> li > a.button, > li > a.ast-outline-button)::before {
		top: var(--stel-notice-padding-y);
		bottom: auto;
		margin: 0;
	}
}

/* Block notices (cart, checkout, toasts). */
#page .wc-block-components-notice-banner {
	--stel-notice-icon: var(--stel-notice-icon-neutral);
	align-items: center;
	gap: var(--stel-notice-gap);
	padding: var(--stel-notice-padding-y) var(--stel-notice-padding-x) !important; /* WooCommerce: 16px !important */
	border: 0;
	border-radius: var(--stel-notice-radius);
	background-color: var(--stel-notice-neutral-bg);
	color: var(--stel-notice-text);
	font-size: inherit;
	line-height: var(--stel-notice-line-height);
}
#page .wc-block-components-notice-banner > svg {
	display: none;
}
#page .wc-block-components-notice-banner::before {
	content: "";
	flex: 0 0 var(--stel-notice-icon-size);
	height: var(--stel-notice-icon-size);
	background-color: currentColor;
	-webkit-mask: var(--stel-notice-icon) center / var(--stel-notice-icon-size) no-repeat;
	mask: var(--stel-notice-icon) center / var(--stel-notice-icon-size) no-repeat;
}
#page .wc-block-components-notice-banner.is-success { --stel-notice-icon: var(--stel-notice-icon-success); background-color: var(--stel-notice-success-bg); }
#page .wc-block-components-notice-banner.is-info { --stel-notice-icon: var(--stel-notice-icon-info); background-color: var(--stel-notice-info-bg); }
#page .wc-block-components-notice-banner.is-warning { --stel-notice-icon: var(--stel-notice-icon-warning); background-color: var(--stel-notice-warning-bg); }
#page .wc-block-components-notice-banner.is-error { --stel-notice-icon: var(--stel-notice-icon-error); background-color: var(--stel-notice-error-bg); }

/* Dismiss button (×): vertically centred instead of WooCommerce's 6px top offset. */
#page .wc-block-components-notice-banner > .wc-block-components-button {
	align-self: center;
	margin: 0 0 0 auto !important;
}

/* Toasts float over the page: no border, overlay shadow. */
#page .wc-block-components-notice-snackbar-list .wc-block-components-notice-banner,
#page .wc-block-components-notice-banner.wc-block-components-notice-snackbar {
	border: 0;
	box-shadow: var(--stel-shadow-overlay);
}

/* ==========================================================================
   Complianz cookie banner
   ========================================================================== */

/* Offset the banner from the bottom by the same 10px Complianz uses on the right. Done
   with margin because Complianz's slide-in animation ends at bottom: 0. Desktop only:
   below 769px Complianz makes the banner full-width and flush with the bottom. */
@media (min-width: 769px) {
	.cmplz-cookiebanner {
		margin-bottom: 10px;
	}
}

/* Mobile (up to 768px, where Complianz makes the banner full-width and flush with the
   bottom): 8px from the screen edges on all sides, so the rounded corners show. Bottom by
   margin, as above; top by the maximum height, which also uses the visible screen height
   (dvh, where supported) so a tall banner ("vis formål") stays clear of mobile toolbars. */
@media (max-width: 768px) {
	#cmplz-cookiebanner-container .cmplz-cookiebanner {
		width: calc(100% - 16px);
		max-height: calc(100vh - 16px);
		max-height: calc(100dvh - 16px);
		margin: 0 8px 8px;
	}
}

/* Keyboard focus: match Astra's site-wide style (thin dotted outline in the text colour)
   instead of the browser's blue ring. The category switches are visually hidden inputs,
   so Complianz draws their focus ring on the label as a blue box-shadow; replace it too. */
.cmplz-cookiebanner :focus-visible,
#cmplz-manage-consent :focus-visible {
	outline: thin dotted currentColor;
}
.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:focus + .cmplz-label:before {
	box-shadow: none;
}
.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:focus-visible + .cmplz-label:before {
	outline: thin dotted currentColor;
}

/* No document links (cookie policy, privacy policy) at the bottom of the banner: the
   policies are linked in the footer, and the cookie policy is section 9 of the privacy
   policy. Complianz still gets both addresses (Complianz > Wizard > Documents) for its
   own use. ID-based selector because Complianz's stylesheet loads after this one. */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-documents {
	display: none;
}

/* 24px from the buttons to the banner's outer edge: 23px padding + the 1px border.
   (Complianz's own 15px + 1px = 16px looks tight without the links row.) */
#cmplz-cookiebanner-container .cmplz-cookiebanner {
	padding-bottom: 23px;
}

/* Overlay shadow instead of Complianz's heavier two-layer shadow (which also grows on
   hover). ID-based selectors because Complianz's stylesheet loads after this one. */
#cmplz-cookiebanner-container .cmplz-cookiebanner,
body #cmplz-manage-consent .cmplz-manage-consent {
	box-shadow: var(--stel-shadow-overlay);
}

/* No shadow on any button in the banner (Astra's global button shadow), in any state:
   godkend / afvis / vis formål / gem valg and the category toggles. */
.cmplz-cookiebanner button {
	box-shadow: none;
}

/* Remove Astra's global paragraph margin from the banner text (Complianz's JS wraps the
   message in a <p>). */
.cmplz-cookiebanner p {
	margin-bottom: 0;
}

/* Permanent underline on banner links. Excludes .cmplz-btn, which is a link styled
   as a button ("vis formål"). */
.cmplz-cookiebanner a:not(.cmplz-btn),
.cmplz-cookiebanner a:not(.cmplz-btn):hover {
	text-decoration: underline;
}

/* Close button: replace the Font Awesome "times" SVG with the close-outline Ionicon.
   Drawn as a mask filled with currentColor so it follows the banner's text colour.
   The mask sits on ::before so it doesn't clip the button's keyboard focus outline. */
.cmplz-cookiebanner .cmplz-close {
	width: 24px;
	height: 24px;
}
.cmplz-cookiebanner .cmplz-close::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'%3E%3Cline x1='368' y1='368' x2='144' y2='144' style='fill:none;stroke:%23000;stroke-linecap:round;stroke-linejoin:round;stroke-width:24px'/%3E%3Cline x1='368' y1='144' x2='144' y2='368' style='fill:none;stroke:%23000;stroke-linecap:round;stroke-linejoin:round;stroke-width:24px'/%3E%3C/svg%3E") center / 24px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'%3E%3Cline x1='368' y1='368' x2='144' y2='144' style='fill:none;stroke:%23000;stroke-linecap:round;stroke-linejoin:round;stroke-width:24px'/%3E%3Cline x1='368' y1='144' x2='144' y2='368' style='fill:none;stroke:%23000;stroke-linecap:round;stroke-linejoin:round;stroke-width:24px'/%3E%3C/svg%3E") center / 24px no-repeat;
}
.cmplz-cookiebanner .cmplz-close svg {
	display: none;
}

/* Rounded corners on the light grey preference category accordions. */
.cmplz-cookiebanner .cmplz-categories .cmplz-category {
	border-radius: 8px;
}

/* Preference category chevrons: replace the Font Awesome SVG with the chevron-down-outline
   Ionicon, same mask technique as the close button. Complianz still rotates .cmplz-icon
   180° when a category is expanded. The grid's icon column is widened from 15px to fit. */
.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header {
	grid-template-columns: 1fr auto 24px;
}
.cmplz-cookiebanner .cmplz-category-toggle .cmplz-icon {
	width: 24px;
	height: 24px;
}
.cmplz-cookiebanner .cmplz-category-toggle .cmplz-icon::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'%3E%3Cpolyline points='112 184 256 328 400 184' style='fill:none;stroke:%23000;stroke-linecap:round;stroke-linejoin:round;stroke-width:24px'/%3E%3C/svg%3E") center / 24px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'%3E%3Cpolyline points='112 184 256 328 400 184' style='fill:none;stroke:%23000;stroke-linecap:round;stroke-linejoin:round;stroke-width:24px'/%3E%3C/svg%3E") center / 24px no-repeat;
}
.cmplz-cookiebanner .cmplz-category-toggle .cmplz-icon svg {
	display: none;
}

/* Blocked-content placeholder for Google Maps (image: inc/consent-placeholders.php).
   Complianz sizes placeholders from the image's proportions; here the map keeps the
   height set in Elementor, so nothing moves when the map loads after consent. The image
   is centred (Complianz anchors it top-left), keeping the store pin in view when the
   sides are cropped on narrow screens. */
.elementor-widget-google_maps .cmplz-blocked-content-container {
	height: auto !important;
	background-position: center !important;
}

/* Visitors who already accepted the embed's cookie category (classes set in
   inc/consent-placeholders.php): a plain panel in the neutral colour while the embed
   loads, instead of Complianz's placeholder image, fade-in and shadow. */
.stel-consent-marketing .cmplz-blocked-content-container:has([data-category="marketing"]),
.stel-consent-statistics .cmplz-blocked-content-container:has([data-category="statistics"]) {
	background-color: var(--ast-global-color-7);
	background-image: none !important;
	box-shadow: none;
	animation: none;
}
.stel-consent-marketing .cmplz-blocked-content-container:has([data-category="marketing"]) .cmplz-blocked-content-notice,
.stel-consent-statistics .cmplz-blocked-content-container:has([data-category="statistics"]) .cmplz-blocked-content-notice {
	display: none !important;
}

/* Embeds when Complianz can't run: JavaScript is off (html lacks .stel-js) or Complianz's
   script is blocked, e.g. by a cookie notice filter in a content blocker (.stel-no-cmplz,
   set once the page has loaded). Both classes: inc/consent-placeholders.php. The embed
   would stay an empty white frame, so a neutral panel says why. With JavaScript on, .stel-js
   is set before the page is drawn, so other visitors never see the panel, not even briefly. */
:is(html:not(.stel-js), html.stel-no-cmplz) .cmplz-placeholder-parent {
	position: relative;
}
:is(html:not(.stel-js), html.stel-no-cmplz) .cmplz-placeholder-parent::after {
	content: "dette indhold kræver javascript.";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background-color: var(--ast-global-color-7);
	color: var(--ast-global-color-2);
	line-height: 24px;
	text-align: center;
}

/* Blocked-content notice, rebuilt as text + button (inc/consent-placeholders.php).
   Dark overlay covering the placeholder edge to edge, the Customizer's primary button
   colour at 60%, so white text keeps a contrast above 4.5:1 over the lightest parts of
   the image, content centred.
   The !important on position answers Complianz's own. */
*:has(> .stel-consent-notice) {
	position: relative;
}
.cmplz-blocked-content-notice.stel-consent-notice.stel-consent-notice {
	position: absolute !important;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	width: auto;
	max-width: none;
	padding: 24px;
	transform: none;
	border-radius: 0;
	background-color: color-mix(in srgb, var(--ast-global-color-0) 60%, transparent);
	color: var(--ast-global-color-4);
	font-size: 1rem;
	line-height: 24px;
	text-align: center;
	text-transform: inherit; /* Complianz: initial; the site's text is lowercase */
	transition: background-color 0.3s ease-in-out;
}
.stel-consent-notice .stel-consent-notice__text {
	margin: 0;
}

/* After consent: the text and button fade out, the overlay stays over the image until the
   embed has loaded, then fades out over it (timing: inc/consent-placeholders.php). */
.stel-consent-notice > * {
	transition: opacity 0.3s ease-in-out;
}
.stel-consent-notice.is-accepted {
	pointer-events: none;
}
.stel-consent-notice.is-accepted > * {
	opacity: 0;
}
.cmplz-blocked-content-notice.stel-consent-notice.stel-consent-notice.is-revealing {
	background-color: transparent;
}
@media (prefers-reduced-motion: reduce) {
	.cmplz-blocked-content-notice.stel-consent-notice.stel-consent-notice,
	.stel-consent-notice > * {
		transition: none;
	}
}

/* The button is an inverted primary button (inc/buttons.php; focus: "Inverted buttons"
   below). */

/* ==========================================================================
   Inverted buttons (inc/buttons.php)
   ========================================================================== */

/* For dark backgrounds: Elementor buttons with the class "knap-inverteret" (primary) or
   "knap-sekundaer-inverteret" (secondary), and the Complianz placeholder button (primary).
   Colours, sizes and font come from the Customizer (inc/buttons.php). */

/* Word spacing 4px tighter: Courier New's wide space reads loose between the label's
   words (as in the hero text). Elementor buttons only. */
.elementor :is(a, button):is(.knap-inverteret, .knap-sekundaer-inverteret),
.elementor :is(.knap-inverteret, .knap-sekundaer-inverteret) .elementor-button {
	word-spacing: -4px;
}

/* Optional shadow, class "knap-skygge" next to the button class (e.g. the home hero's
   button): a drop shadow, so each drawn part (text, icon, border) casts its own shadow,
   instead of a box shadow from the whole button. Same values as the hero heading's shadow
   (set in Elementor): 0 2px 12px, black at 50%. Elementor's own shadow setting is a box
   shadow; leave it off. */
.elementor :is(a, button).knap-skygge,
.elementor .knap-skygge .elementor-button {
	filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.5));
}

/* Keyboard focus: the site's dotted outline, white so it shows on dark backgrounds. */
.elementor :is(a, button):is(.knap-inverteret, .knap-sekundaer-inverteret):focus-visible,
.elementor :is(.knap-inverteret, .knap-sekundaer-inverteret) .elementor-button:focus-visible,
.stel-consent-notice .stel-consent-notice__button:focus-visible {
	outline: thin dotted var(--ast-global-color-4);
	outline-offset: 2px;
}

/* ==========================================================================
   Cart counter badge
   ========================================================================== */

/* Scroll-to-top Ionicon — centered inside the round button.
   Astra's JS sets display:block/none via inline style, so we override only
   when the element is visible to avoid breaking the scroll-trigger behaviour. */
#ast-scroll-top[style*="display: block"] {
	display: flex !important;
}
/* 40px circle on whole pixels (Astra: 2.1em = 33.6px), with a 1px border in the palette's
   light grey inside it: 24px icon + 7px space + 1px border on each side. The chevron sits
   2px above the centre, which looks centred (its open side below reads as lighter).
   Colours: Customizer (Scroll to Top: white background, black icon, same on hover).
   Shadow: the overlay shadow, as on the sticky header and the cookie banner. */
#ast-scroll-top {
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	border: 1px solid var(--ast-global-color-6);
	border-radius: 50% !important;
	box-shadow: var(--stel-shadow-overlay);
	line-height: 0;
	/* Always set, not only while visible: during the fade out Astra has already switched
	   it to display: none, and the icon would jump to the corner. */
	align-items: center;
	justify-content: center;
}
#ast-scroll-top svg.ionicon {
	flex: none;
	width: 24px;
	height: 24px;
	transform: translateY(-2px);
}

/* Fade in and out (0.2s, like the site's focus outlines). Astra switches the button between
   display: block and none, which can't animate by itself: allow-discrete keeps it displayed
   until the fade out has finished, and @starting-style is where the fade in starts.
   Browsers without support (older Firefox and Safari) show and hide it at once, as before. */
#ast-scroll-top {
	opacity: 0;
	transition: opacity 0.2s ease-in-out, display 0.2s allow-discrete;
}
#ast-scroll-top[style*="display: block"] {
	opacity: 1;
}
@starting-style {
	#ast-scroll-top[style*="display: block"] {
		opacity: 0;
	}
}
@media (prefers-reduced-motion: reduce) {
	#ast-scroll-top {
		transition: none;
	}
}

/* Header cart icon on whole pixels, so the cart dropdown and pointer aligned to it do too:
   - 8px padding instead of Astra's 0.4em (6.4px);
   - block/flex layout instead of inline text-baseline layout, which made the box a
     fractional 41.8px tall (now exactly 24px icon + 2 × 8px = 40px).
   The count badge is positioned on the <i>, whose box now starts at the icon's top
   instead of 7px lower, so its top offset is adjusted to keep it above the icon. */
.ast-hfb-header .ast-addon-cart-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
}
.ast-hfb-header .ast-addon-cart-wrap i.astra-icon,
.ast-hfb-header .ast-addon-cart-wrap svg.ionicon {
	display: block;
}
/* Count badge: 20px (Astra: 18px) with a 12px number (Astra: 11px), so the digits are
   exactly 8px tall with 6px above and below.
   Astra's shadow is offset sideways (1px 1px 3px), which made the badge look heavier
   bottom-right, so a centred number still looked off; same opacity here, offset straight
   down only. */
.ast-hfb-header .ast-addon-cart-wrap i.astra-icon:after {
	top: -8px;
	right: -10px;
	height: 20px;
	min-width: 20px;
	font-size: 12px;
	box-shadow: var(--stel-shadow-small);
}

/* Centre the count number with flexbox instead of line-height/padding. Flex centres the
   font's whole line box, which includes room for descenders that digits don't use, so
   digits sit high; 1px top padding moves them down by half a pixel to optical centre. */
.ast-site-header-cart i.astra-icon:after {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	line-height: 1 !important;
	padding: 1px 0 0 !important;
	letter-spacing: 0 !important;
}