/* ==========================================================================
   Shop21 — WooCommerce styles
   Loaded only on shop pages (see inc/assets.php).

   The theme styles WooCommerce's own markup instead of overriding templates,
   so plugin output keeps its position. The Shop21 language flags
   (.shop21-language-flags) are rendered by the plugin above the product title
   in the loop and above the gallery on the product page; the rules below only
   style that component, never move it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Shop layout, toolbar, filters
   ----------------------------------------------------------------------- */

/* The catalogue shell.
   `woocommerce_before_main_content` prints the breadcrumb at priority 8 and
   this wrapper at priority 10, so the breadcrumb is a *sibling* of the layout,
   not a child. Both therefore carry the same centred shell — without it the
   whole shop (breadcrumb, product title, price, meta, tabs and "Andre købte
   også") ran flush against the viewport edge on mobile and on desktop.
   Nothing is cropped: the shell only adds the site gutter and a max width. */
.s21-shop-layout,
.s21-breadcrumbs--shop {
	display: block;
	width: 100%;
	min-width: 0;
	max-width: var(--s21-container-shop);
	margin-inline: auto;
	padding-inline: var(--s21-gutter);
}

.s21-shop-main { min-width: 0; }

.s21-shop-header { margin-bottom: var(--s21-space-5); }
.s21-shop-header__title { font-size: var(--s21-fs-2xl); margin-bottom: var(--s21-space-3); }
.s21-shop-header__description { color: var(--s21-text-muted); max-width: 72ch; margin: 0; }

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

.s21-toolbar__count { color: var(--s21-text-muted); font-size: var(--s21-fs-sm); }
.s21-toolbar__count .woocommerce-result-count { margin: 0; color: inherit; font-size: inherit; }

.s21-toolbar__actions { display: flex; align-items: center; gap: var(--s21-space-3); margin-inline-start: auto; }

.s21-toolbar__ordering { display: flex; align-items: center; gap: var(--s21-space-2); }

.woocommerce-ordering { margin: 0; }

.woocommerce-ordering .orderby,
.s21-toolbar select.orderby {
	min-height: var(--s21-tap);
	padding: var(--s21-space-2) 2.4em var(--s21-space-2) var(--s21-space-4);
	border: 1px solid var(--s21-line);
	border-radius: var(--s21-radius-pill);
	background-color: var(--s21-surface);
	color: var(--s21-text);
	font-family: inherit;
	font-size: var(--s21-fs-sm);
	cursor: pointer;
}

.s21-filter-toggle .s21-icon { color: var(--s21-accent); }

/* Off-canvas filter panel on mobile — the SAME element that is the desktop
   sidebar, so no widget markup or IDs are duplicated. */
.s21-shop-sidebar {
	position: fixed;
	inset-block: 0;
	inset-inline-start: 0;
	z-index: var(--s21-z-overlay);
	width: min(400px, 92vw);
	max-width: 92vw;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 0 var(--s21-space-4) calc(var(--s21-space-6) + env(safe-area-inset-bottom, 0px));
	background: var(--s21-smoky);
	border-inline-end: 1px solid var(--s21-line);
	box-shadow: var(--s21-shadow-lg);
	transform: translateX(-102%);
	visibility: hidden;
	transition: transform 260ms var(--s21-ease), visibility 260ms var(--s21-ease);
}

body.s21-filters-open .s21-shop-sidebar { transform: none; visibility: visible; }

.s21-filter-backdrop {
	position: fixed;
	inset: 0;
	z-index: calc(var(--s21-z-overlay) - 1);
	background: rgb(0 0 0 / 0.62);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 260ms var(--s21-ease), visibility 260ms var(--s21-ease);
}

.s21-filter-backdrop[hidden] { display: none; }
body.s21-filters-open .s21-filter-backdrop { opacity: 1; visibility: visible; }

.s21-filter-panel__head {
	position: sticky;
	inset-block-start: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s21-space-3);
	margin: 0 calc(-1 * var(--s21-space-4)) var(--s21-space-4);
	padding: var(--s21-space-3) var(--s21-space-4);
	background: var(--s21-black);
	border-bottom: 1px solid var(--s21-line);
}

.s21-filter-panel__title { font-weight: 700; color: var(--s21-ghost); text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--s21-fs-sm); }

/* --------------------------------------------------------------------------
   2. Product grid + cards
   ----------------------------------------------------------------------- */

.woocommerce ul.products,
ul.products {
	display: grid;
	/* Saxo-style: as many ~246px cards as fit the content column, never fewer
	   than two. Everything is driven by --s21-card-min-w so the breakpoints in
	   section 2b stay in sync with the image stage height. */
	grid-template-columns: repeat(auto-fill, minmax(var(--s21-card-min-w), 1fr));
	column-gap: var(--s21-card-col-gap);
	row-gap: var(--s21-card-row-gap);
	list-style: none;
	margin: 0 0 var(--s21-space-6);
	padding: 0;
	clear: both;
}

/* 2b. Responsive card metrics — tablet / desktop / wide desktop. */
@media (min-width: 600px) {
	:root { --s21-card-min-w: 190px; --s21-card-image-h: 195px; }
}

@media (min-width: 1024px) {
	:root { --s21-card-min-w: 220px; --s21-card-image-h: 210px; --s21-card-col-gap: var(--s21-space-2); }
}

@media (min-width: 1600px) {
	:root { --s21-card-min-w: 230px; --s21-card-image-h: 225px; }
}

.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none; }

.woocommerce ul.products li.product,
ul.products li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	float: none;
	width: auto !important;
	margin: 0 !important;
	padding: var(--s21-space-3);
	clear: none;
	background: var(--s21-surface);
	border: 1px solid var(--s21-line-soft);
	border-radius: var(--s21-radius);
	transition: border-color var(--s21-speed) var(--s21-ease), transform var(--s21-speed) var(--s21-ease), box-shadow var(--s21-speed) var(--s21-ease);
}

.woocommerce ul.products li.product:hover,
ul.products li.product:hover {
	border-color: var(--s21-line);
	transform: translateY(-3px);
	box-shadow: var(--s21-shadow);
}

/* The link holds image, flags, title, rating, price and the meta line.

   It is a flex column, deliberately not a grid. Every card in a row is
   stretched to the height of the tallest one, and a grid whose tracks are all
   `auto` answers that with `align-content: stretch` — i.e. the leftover height
   is handed to *every* track, the image track included. The cover then floated
   in an oversized row and the "Sprog:" line below it sat 40-60px away on the
   short cards while the tallest card in the same row kept the intended 16px.
   A flex column keeps each gap exactly as authored and gives the slack to one
   place only: the `margin-top: auto` on .s21-card__meta (section 4), which is
   what still pins the chips/delivery line — and with it the button — to the
   bottom of every card in the row.

   Loop markup order is badges, flags, image, title, rating, price, meta (the
   plugin prints its flags on the same hook as the thumbnail and wins the tie),
   so the cover is pulled to the front with `order: -1` and the flags stay
   below it. The badges and the hover image are absolutely positioned and take
   no part in the flow.

   The `body.woocommerce`/`a.woocommerce-loop-product__link` spellings are not
   decoration: WooCommerce core ships
   `.woocommerce ul.products li.product a.woocommerce-loop-product__link {
   display: block }` at (0,4,3), which silently beat this rule at (0,4,2) on
   every real shop page — so the archive grid never got the card layout at all
   and painted the flags *above* the cover, while the front-page rows (no
   `.woocommerce` ancestor, core rule inert) painted them below it. One
   component, two layouts. These selectors answer core at (0,4,4). */
body.woocommerce ul.products li.product a.woocommerce-loop-product__link,
body.woocommerce-page ul.products li.product a.woocommerce-loop-product__link,
.woocommerce ul.products li.product a.woocommerce-loop-product__link,
.woocommerce ul.products li.product .woocommerce-LoopProduct-link,
ul.products li.product a.woocommerce-loop-product__link,
ul.products li.product .woocommerce-LoopProduct-link {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--s21-space-2);
	flex: 1 1 auto;
	min-height: 0;
	color: var(--s21-text) !important;
	text-decoration: none !important;
}

/* Same reason: the cover has to be first even where core's rules reach. */
body.woocommerce ul.products li.product a.woocommerce-loop-product__link > img,
.woocommerce ul.products li.product .woocommerce-LoopProduct-link > img,
ul.products li.product .woocommerce-LoopProduct-link > img,
.woocommerce ul.products li.product .woocommerce-LoopProduct-link > .s21-card__media,
ul.products li.product .woocommerce-LoopProduct-link > .s21-card__media {
	order: -1;
}

/* The card image stage. The box is a constant size so the row stays calm, but
   the artwork inside is never cropped or stretched: object-fit contain keeps a
   square source square, a portrait cover whole and a landscape shot whole, all
   centred on a light background so dark products stay visible.
   `flex: 0 0 auto` is what makes the stage non-negotiable: it can neither be
   squashed by a tall neighbour nor grown to absorb the card's slack. */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img,
ul.products li.product a img,
ul.products li.product img {
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 100%;
	height: var(--s21-card-image-h);
	aspect-ratio: auto;
	object-fit: contain;
	object-position: center;
	margin: 0;
	padding: var(--s21-image-pad);
	background: var(--s21-image-bg);
	border: 1px solid var(--s21-image-line);
	border-radius: var(--s21-image-radius);
}

/* Hover overlay only. Absolutely positioned inside the card's image box so it
   can never take part in layout: the featured (first) image always owns the
   card, the gallery image only fades over it on hover / keyboard focus. */
.woocommerce ul.products li.product img.s21-card__image-hover,
ul.products li.product img.s21-card__image-hover {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0;
	transition: opacity 380ms var(--s21-ease);
}

.woocommerce ul.products li.product .s21-card__media,
ul.products li.product .s21-card__media { position: relative; }

.woocommerce ul.products li.product:hover img.s21-card__image-hover,
.woocommerce ul.products li.product:focus-within img.s21-card__image-hover,
ul.products li.product:hover img.s21-card__image-hover,
ul.products li.product:focus-within img.s21-card__image-hover { opacity: 1; }

/* Titles + price flow under the cover.

   Every selector in this card block is written twice — once behind
   `.woocommerce`, once bare — because the front-page product rows are not
   WooCommerce pages: the body carries `woocommerce-js` but not `woocommerce`,
   so a `.woocommerce`-scoped rule silently does not exist there. The card
   titles were the casualty: on the shop archive they were clamped to three
   lines at --s21-fs-sm, on the front page they fell back to the global h2
   (24px, unclamped), which is also what made one bestseller card tower over
   its neighbours and stretch the whole row. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-category__title,
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .woocommerce-loop-category__title {
	flex: 0 0 auto;
	/* No margin of its own: the card's `gap` is the single source of vertical
	   rhythm, so a title can never be 8px from the line above on one page and
	   16px on another. */
	margin: 0;
	padding: 0;
	color: var(--s21-ghost);
	font-size: var(--s21-fs-sm);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0;
	text-transform: none;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.woocommerce ul.products li.product:hover .woocommerce-loop-product__title,
ul.products li.product:hover .woocommerce-loop-product__title { color: var(--s21-accent); }

.woocommerce ul.products li.product .price,
ul.products li.product .price {
	flex: 0 0 auto;
	display: block;
	margin: 0;
	color: var(--s21-ghost);
	font-size: var(--s21-fs-md);
	font-weight: 800;
	line-height: 1.2;
}

.woocommerce ul.products li.product .price del,
ul.products li.product .price del { color: var(--s21-text-dim); font-weight: 500; font-size: var(--s21-fs-sm); margin-inline-end: var(--s21-space-2); }
.woocommerce ul.products li.product .price ins,
ul.products li.product .price ins { background: none; color: var(--s21-accent); text-decoration: none; font-weight: 800; }
.woocommerce ul.products li.product .price .woocommerce-Price-currencySymbol,
ul.products li.product .price .woocommerce-Price-currencySymbol { font-weight: 600; font-size: 0.85em; margin-inline-start: 2px; }
.woocommerce ul.products li.product .price .from,
ul.products li.product .price .from { color: var(--s21-text-dim); font-size: var(--s21-fs-xs); font-weight: 500; }

/* Sale flash from WooCommerce — replaced by the theme badge stack. */
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale,
ul.products li.product .onsale,
ul.products li.product span.onsale { display: none; }

/* Badges (theme) */
.s21-badges {
	position: absolute;
	inset-block-start: calc(var(--s21-space-3) + 8px);
	inset-inline-start: calc(var(--s21-space-3) + 8px);
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	pointer-events: none;
}

.s21-badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: var(--s21-radius-pill);
	font-size: 12px;
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	box-shadow: var(--s21-shadow-sm);
}

.s21-badge--is-sale { background: var(--s21-accent); color: var(--s21-on-accent); }
.s21-badge--is-new { background: var(--s21-ghost); color: var(--s21-black); }
.s21-badge--is-out { background: #3a3a3a; color: var(--s21-ghost); }
.s21-badge--is-backorder { background: var(--s21-surface-3); color: var(--s21-warning); border: 1px solid rgb(255 204 102 / 0.35); }
.s21-badge--is-bundle { background: var(--s21-black); color: var(--s21-accent); border: 1px solid rgb(255 183 3 / 0.4); }

/* --------------------------------------------------------------------------
   3. Language flags (Shop21 plugin component + theme fallback)
   ----------------------------------------------------------------------- */

/* The flags line is the one item in the card that adds its own top margin:
   8px of margin on top of the card's 8px gap puts "Sprog:" 16px under the
   cover, which is the distance the row was designed around. It is a fixed
   length, not a share of the card's leftover height, so it is now the same
   16px on every card of every row — that was the bug this section exists for. */
.shop21-language-flags,
.s21-language-flags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	flex: 0 0 auto;
	margin: var(--s21-space-2) 0 0;
	padding: 0;
}

/* Outrank WooCommerce's catalog image rules (including its max-width).
   Flags are badges, not cover images, in both plugin and fallback markup. */
.shop21-language-flags img.shop21-language-flag,
.s21-language-flags img.s21-language-flag,
.woocommerce ul.products li.product img.shop21-language-flag,
.woocommerce ul.products li.product img.s21-language-flag,
ul.products li.product img.shop21-language-flag,
ul.products li.product img.s21-language-flag {
	display: inline-block;
	width: 30px;
	height: 20px;
	max-width: 30px;
	min-width: 30px;
	flex: 0 0 30px;
	aspect-ratio: auto;
	margin: 0;
	padding: 0;
	border: 0;
	object-fit: contain;
	border-radius: 3px;
	box-shadow: 0 0 0 1px rgb(255 255 255 / 0.14);
	background: var(--s21-surface-3);
}

/* Optional "Sprog:" label — pure CSS so it only appears with real flags. */
body.s21-flags-label .shop21-language-flags::before,
body.s21-flags-label .s21-language-flags::before {
	content: 'Sprog:';
	color: var(--s21-text-dim);
	font-size: var(--s21-fs-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-inline-end: 0.25rem;
}

/* On the product page the flags sit above the gallery: give them a panel. */
.single-product div.product > .shop21-language-flags,
.single-product div.product > .s21-language-flags {
	grid-column: 1 / -1;
	align-self: start;
	justify-self: start;
	padding: var(--s21-space-2) var(--s21-space-4);
	border: 1px solid var(--s21-line);
	border-radius: var(--s21-radius-pill);
	background: var(--s21-surface);
	margin-block-end: var(--s21-space-3);
}

/* --------------------------------------------------------------------------
   4. Card meta: format chip, rating, stock/delivery
   ----------------------------------------------------------------------- */

/* The one and only place a card's leftover height goes: `margin-top: auto`
   pushes the chips/delivery line to the bottom of the stretched card, so it —
   and the button under it — lines up across the whole row while every gap
   above it stays exactly as authored. */
.s21-card__meta { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding-top: var(--s21-space-2); }

.s21-card__chip {
	align-self: flex-start;
	padding: 3px 10px;
	border: 1px solid var(--s21-line);
	border-radius: var(--s21-radius-pill);
	background: var(--s21-surface-2);
	color: var(--s21-text-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.s21-card__delivery { display: inline-flex; align-items: center; gap: 6px; color: var(--s21-text-muted); font-size: var(--s21-fs-xs); }
.s21-card__delivery .s21-icon { color: var(--s21-accent); flex: none; }

/* Star rating */
.woocommerce .star-rating,
.star-rating {
	float: none;
	width: 5.6em;
	height: 1.1em;
	color: var(--s21-accent);
	font-size: var(--s21-fs-xs);
	line-height: 1.1;
	margin: 0;
	grid-column: 1;
}

.woocommerce .star-rating::before,
.star-rating::before { color: var(--s21-line); content: '\53\53\53\53\53'; letter-spacing: 0.1em; }

.woocommerce .star-rating span::before,
.star-rating span::before { content: '\53\53\53\53\53'; letter-spacing: 0.1em; }

.woocommerce ul.products li.product .star-rating,
ul.products li.product .star-rating { flex: 0 0 auto; margin: 0; }

/* Add to cart inside the card */
.woocommerce ul.products li.product .button,
ul.products li.product .button,
.woocommerce ul.products li.product .s21-btn,
ul.products li.product .s21-btn {
	display: flex;
	width: 100%;
	margin: var(--s21-space-3) 0 0;
	min-height: var(--s21-tap);
}

.woocommerce ul.products li.product .added_to_cart,
ul.products li.product .added_to_cart {
	display: block;
	width: 100%;
	margin-top: var(--s21-space-2);
	padding: var(--s21-space-2);
	border-radius: var(--s21-radius-sm);
	background: var(--s21-surface-2);
	color: var(--s21-text-muted) !important;
	font-size: var(--s21-fs-xs);
	text-align: center;
}

/* Out of stock cards */
.woocommerce ul.products li.product.outofstock .woocommerce-loop-product__title,
ul.products li.product.outofstock .woocommerce-loop-product__title { color: var(--s21-text-muted); }
.woocommerce ul.products li.product.outofstock img,
ul.products li.product.outofstock img { opacity: 0.55; }

/* --------------------------------------------------------------------------
   5. Single product
   ----------------------------------------------------------------------- */

.single-product .woocommerce-notices-wrapper { margin-bottom: var(--s21-space-4); }

.single-product div.product {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--s21-space-5);
	position: relative;
	margin-bottom: var(--s21-space-6);
}

.single-product div.product .woocommerce-product-gallery {
	position: relative;
	width: 100% !important;
	float: none;
	margin: 0;
	opacity: 1 !important;
}

/* FlexSlider track.
   Three separate defects lived in this one declaration:

   1. `flex-direction: column` stacked the slides vertically while FlexSlider
      moves the track *horizontally* (inline `float: left` + `translate3d()`),
      so every thumbnail click slid the active photo off-canvas — measured at
      x: -300px — and left a blank white stage. Row + nowrap is the track
      FlexSlider actually builds. No gap: it translates by exactly one slide
      width, so any gap would misalign every slide after the first.
   2. `align-items: stretch` gives every slide the height of the tallest one,
      so the light stage is a consistent box and a square cover next to a tall
      one does not leave a hole under the shorter image.
   3. WooCommerce's own gallery script writes
      `viewport.height( slide.height() )` after the first image loads — jQuery's
      content height, which excludes the slide's 12px padding and 1px border.
      The stage was therefore 26px shorter than the artwork it holds and the
      bottom of every photo was cropped. `.flex-viewport { height: auto }`
      below lets the viewport size to the track instead. */
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 0;
	margin: 0;
}

.single-product div.product .flex-viewport {
	height: auto !important;
	max-height: none !important;
	overflow: hidden;
}

.single-product div.product .woocommerce-product-gallery__image,
.single-product div.product .woocommerce-product-gallery__image a {
	display: block;
	border-radius: var(--s21-radius);
	overflow: hidden;
	background: var(--s21-surface);
	border: 1px solid var(--s21-line-soft);
}

/* Each slide is a light stage: consistent outer box, artwork contained inside
   it and centred on both axes, so a square source image is never cut down to a
   book shape and a tall portrait never loses its top or bottom. */
.single-product div.product .woocommerce-product-gallery__image {
	/* !important: FlexSlider writes `display: block` inline on every slide, and
	   an inline declaration beats the stylesheet. Without it the artwork sits at
	   the top of the stage instead of being centred on both axes. */
	display: flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 320px;
	margin: 0;
	padding: var(--s21-image-pad);
	background: var(--s21-image-bg);
	border: 1px solid var(--s21-image-line);
	border-radius: var(--s21-image-radius);
}

.single-product div.product .woocommerce-product-gallery__image img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: var(--s21-gallery-image-max);
	aspect-ratio: auto;
	object-fit: contain;
	object-position: center;
	margin: 0 auto;
	background: transparent;
}

/* Zoom (wc-product-gallery-zoom) inserts an absolutely positioned copy; keep it
   on the same light stage so the magnifier never shows a black void. */
.single-product div.product .woocommerce-product-gallery__image img.zoomImg {
	background: var(--s21-image-bg);
	padding: 0;
}

/* Woo core ships `.woocommerce div.product div.images
   .woocommerce-product-gallery__wrapper .zoomImg { background-color: #fff }` at
   (0,5,2), which beats the rule above at (0,4,2) — so the magnifier kept
   painting pure white over the warm stage, a visible seam the moment a cover is
   shot on white. These body-scoped twins win at (0,5,3) and hand the overlay
   back to the token. Same trick the gallery metrics use below. */
body.woocommerce.single-product div.product .woocommerce-product-gallery__image img.zoomImg,
body.woocommerce-page.single-product div.product .woocommerce-product-gallery__image img.zoomImg {
	background-color: var(--s21-image-bg);
}

/* Photoswipe / lightbox caption + counter stay legible over the dark overlay. */
.single-product div.product .woocommerce-product-gallery--without-images .flex-viewport {
	min-height: 320px;
	background: var(--s21-image-bg);
	border: 1px solid var(--s21-image-line);
	border-radius: var(--s21-image-radius);
}

.single-product div.product .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--s21-space-2);
	list-style: none;
	margin: var(--s21-space-3) 0 0;
	padding: 0;
}

.single-product div.product .flex-control-thumbs li { margin: 0; width: auto !important; float: none; }

.single-product div.product .flex-control-thumbs img {
	box-sizing: border-box;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	object-position: center;
	padding: 4px;
	border: 1px solid var(--s21-image-line);
	border-radius: var(--s21-radius-sm);
	background: var(--s21-image-bg);
	cursor: pointer;
	opacity: 0.72;
	transition: opacity var(--s21-speed) var(--s21-ease), border-color var(--s21-speed) var(--s21-ease);
}

.single-product div.product .flex-control-thumbs img:hover,
.single-product div.product .flex-control-thumbs img.flex-active { opacity: 1; border-color: var(--s21-accent); }

.single-product div.product .woocommerce-product-gallery__trigger {
	position: absolute;
	inset-block-start: var(--s21-space-3);
	inset-inline-end: var(--s21-space-3);
	z-index: 5;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--s21-tap);
	height: var(--s21-tap);
	border-radius: 50%;
	background: rgb(0 0 0 / 0.7);
	color: var(--s21-ghost) !important;
	font-size: 0;
	border: 1px solid var(--s21-line);
}

.single-product div.product .woocommerce-product-gallery__trigger::before { content: '\26F6'; font-size: 18px; }
.single-product div.product .woocommerce-product-gallery__trigger:hover { background: var(--s21-accent); color: var(--s21-on-accent) !important; }

.single-product div.product div.summary {
	float: none;
	width: auto !important;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--s21-space-4);
}

.single-product div.product div.summary .woocommerce-breadcrumb { display: none; } /* theme prints its own */

/* Buy box — the panel that groups price, availability, "Læg i kurv" and the
   trust bullets (saxo.com keeps all of the buying information in one card).
   It is printed by shop21_single_buybox_open()/close() around priorities 9-36
   of `woocommerce_single_product_summary`, so the title and the meta line stay
   outside it.
   `display: contents` makes the wrapper dissolve: its children remain direct
   flex children of .summary with the same gap, so phones and small screens
   render pixel-for-pixel what they did before the panel existed. Only the
   desktop breakpoint (below) turns it into a visible card. */
.s21-buybox { display: contents; }

.single-product div.product .product_title {
	font-size: var(--s21-fs-2xl);
	line-height: 1.15;
	margin: 0;
	color: var(--s21-ghost);
}

.single-product div.product p.price,
.single-product div.product span.price {
	display: block;
	margin: 0;
	color: var(--s21-ghost);
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
	font-weight: 800;
	line-height: 1.15;
}

.single-product div.product p.price del,
.single-product div.product span.price del { color: var(--s21-text-dim); font-size: 0.6em; font-weight: 500; margin-inline-end: var(--s21-space-3); }
.single-product div.product p.price ins,
.single-product div.product span.price ins { background: none; color: var(--s21-accent); text-decoration: none; }
.single-product div.product p.price .woocommerce-Price-currencySymbol { font-size: 0.7em; font-weight: 600; }

.s21-chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s21-space-2); margin: 0; padding: 0; }
.s21-chips__item { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 5px 12px; border: 1px solid var(--s21-line); border-radius: var(--s21-radius-pill); background: var(--s21-surface); color: var(--s21-text-muted); font-size: var(--s21-fs-xs); font-weight: 600; }
.s21-chips__item .s21-icon { color: var(--s21-accent); }

.s21-availability { display: flex; align-items: center; gap: var(--s21-space-3); margin: 0; padding: var(--s21-space-3) var(--s21-space-4); border-radius: var(--s21-radius); background: var(--s21-surface); border: 1px solid var(--s21-line-soft); color: var(--s21-text-muted); font-size: var(--s21-fs-sm); }
.s21-availability .s21-icon { color: var(--s21-accent); flex: none; }
.s21-availability.is-instock { border-color: rgb(110 231 168 / 0.3); }
.s21-availability.is-instock .s21-icon { color: var(--s21-success); }
.s21-availability.is-outofstock { border-color: rgb(255 138 128 / 0.35); color: var(--s21-danger); }
.s21-availability.is-outofstock .s21-icon { color: var(--s21-danger); }

.single-product div.product .woocommerce-product-details__short-description { color: var(--s21-text-muted); font-size: var(--s21-fs-base); }
.single-product div.product .woocommerce-product-details__short-description p:last-child { margin-bottom: 0; }
.single-product div.product .woocommerce-product-details__short-description ul { padding-inline-start: 1.2em; }

.single-product div.product form.cart { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--s21-space-3); margin: 0; padding: 0; }

.single-product div.product form.cart.variations_form { display: block; }

/* Quantity stepper */
.quantity,
.woocommerce .quantity {
	display: inline-flex;
	align-items: center;
	position: relative;
	width: auto;
	margin: 0;
	border: 1px solid var(--s21-line);
	border-radius: var(--s21-radius-pill);
	background: var(--s21-surface);
	overflow: hidden;
}

.quantity .qty,
.woocommerce .quantity .qty {
	width: 3.4em;
	min-height: var(--s21-tap);
	padding: 0 var(--s21-space-2);
	border: 0;
	background: transparent;
	color: var(--s21-ghost);
	font-family: inherit;
	font-size: var(--s21-fs-base);
	font-weight: 700;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

.quantity .qty::-webkit-outer-spin-button,
.quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.s21-qty__btn {
	flex: 0 0 var(--s21-tap);
	min-width: var(--s21-tap);
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--s21-tap);
	height: var(--s21-tap);
	border: 0;
	background: transparent;
	color: var(--s21-accent);
	cursor: pointer;
	font-family: inherit;
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	transition: background var(--s21-speed) var(--s21-ease);
}

.s21-qty__btn:hover { background: var(--s21-surface-hover); }
.s21-qty__btn[disabled] { opacity: 0.4; cursor: not-allowed; }

.single-product div.product form.cart .button,
.single-product div.product form.cart button[type="submit"] {
	flex: 1 1 220px;
	min-height: 52px;
	font-size: var(--s21-fs-base);
}

/* ------------------------------------------------------------------------
   Accent buttons — WooCommerce `.alt` variants (single product "Læg i kurv")
   ------------------------------------------------------------------------
   Woo core ships
   `.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt`
   with its own purple `#7f54b3`. The `:where()` wrappers are zero-weight, but
   the rule still lands at (0,3,1) and so beats the theme's generic
   `.woocommerce button.button` at (0,2,1) — that is why the single product
   add-to-cart stayed purple while every loop button was already yellow.
   Body-scoped selectors below give (0,3,2) and win on specificity *and*
   source order (theme CSS is enqueued after woocommerce.css).
   `--s21-accent` resolves to rgb(255, 183, 3) — Bitcoin Yellow, Logo Guideline.pdf.
   Ink on accent is `--s21-on-accent` (#0C0C0C) → contrast ratio 11.2:1 (AAA). Hover darkens to --s21-accent-hover (#FFA500) = 9.9:1. */
body.woocommerce a.button.alt,
body.woocommerce button.button.alt,
body.woocommerce input.button.alt,
body.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.single-product div.product form.cart .single_add_to_cart_button {
	background: var(--s21-accent);
	border-color: transparent;
	color: var(--s21-on-accent) !important;
}

body.woocommerce a.button.alt:hover,
body.woocommerce button.button.alt:hover,
body.woocommerce input.button.alt:hover,
body.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover,
.single-product div.product form.cart .single_add_to_cart_button:hover {
	background: var(--s21-accent-hover);
	color: var(--s21-on-accent) !important;
}

body.woocommerce a.button.alt:active,
body.woocommerce button.button.alt:active,
.single-product div.product form.cart .single_add_to_cart_button:active {
	background: var(--s21-accent-hover);
	transform: translateY(0);
}

/* Focus ring: the generic accent outline is invisible on an accent fill,
   so ghost-white is used for accent buttons. */
body.woocommerce a.button.alt:focus-visible,
body.woocommerce button.button.alt:focus-visible,
body.woocommerce input.button.alt:focus-visible,
body.woocommerce #respond input#submit.alt:focus-visible,
.single-product div.product form.cart .single_add_to_cart_button:focus-visible {
	outline-color: var(--s21-ghost);
	box-shadow: 0 0 0 2px var(--s21-smoky), 0 0 0 5px var(--s21-ghost);
}

/* Disabled / out-of-stock variations. Mirrors Woo's own (0,6,1) combos so the
   yellow is not replaced by purple when a variation is unavailable. */
body.woocommerce a.button.alt.disabled,
body.woocommerce a.button.alt.disabled:hover,
body.woocommerce a.button.alt:disabled,
body.woocommerce a.button.alt:disabled:hover,
body.woocommerce a.button.alt:disabled[disabled],
body.woocommerce a.button.alt:disabled[disabled]:hover,
body.woocommerce button.button.alt.disabled,
body.woocommerce button.button.alt.disabled:hover,
body.woocommerce button.button.alt:disabled,
body.woocommerce button.button.alt:disabled:hover,
body.woocommerce button.button.alt:disabled[disabled],
body.woocommerce button.button.alt:disabled[disabled]:hover,
body.woocommerce input.button.alt.disabled,
body.woocommerce input.button.alt.disabled:hover,
body.woocommerce input.button.alt:disabled,
body.woocommerce input.button.alt:disabled:hover,
body.woocommerce input.button.alt:disabled[disabled],
body.woocommerce input.button.alt:disabled[disabled]:hover,
body.woocommerce #respond input#submit.alt:disabled,
body.woocommerce #respond input#submit.alt:disabled[disabled]:hover {
	background: var(--s21-accent);
	color: var(--s21-on-accent) !important;
	opacity: 0.45;
	cursor: not-allowed;
}

.single-product div.product .stock { margin: 0; font-size: var(--s21-fs-sm); }
.single-product div.product .stock.in-stock { color: var(--s21-success); }
.single-product div.product .stock.out-of-stock { color: var(--s21-danger); }

.s21-trust { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s21-space-2); margin: 0; padding: var(--s21-space-4); border: 1px solid var(--s21-line-soft); border-radius: var(--s21-radius); background: var(--s21-surface); }
.s21-trust__item { display: flex; align-items: center; gap: var(--s21-space-2); margin: 0; color: var(--s21-text-muted); font-size: var(--s21-fs-xs); }
.s21-trust__item .s21-icon { color: var(--s21-accent); flex: none; }

.single-product div.product .product_meta {
	display: flex;
	flex-direction: column;
	gap: var(--s21-space-2);
	padding-top: var(--s21-space-4);
	border-top: 1px solid var(--s21-line-soft);
	color: var(--s21-text-muted);
	font-size: var(--s21-fs-sm);
}

.single-product div.product .product_meta > span { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.single-product div.product .product_meta a { color: var(--s21-accent); }

/* Variations table */
.woocommerce div.product form.cart .variations { width: 100%; margin-bottom: var(--s21-space-4); border: 0; }
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td { padding: var(--s21-space-2) 0; border: 0; vertical-align: middle; }
.woocommerce div.product form.cart .variations th { color: var(--s21-ghost); font-weight: 600; width: auto; padding-inline-end: var(--s21-space-4); font-size: var(--s21-fs-sm); }
/* Native <select>: Woo core leaves the background white while the dark theme
   sets a light text colour, which made "Choose an option" unreadable. Both the
   closed control and the open <option> list are pinned to theme colours. */
.woocommerce div.product form.cart .variations select,
.woocommerce div.product form.cart .variations select:focus {
	min-height: var(--s21-tap);
	max-width: 260px;
	width: 100%;
	padding: var(--s21-space-2) var(--s21-space-4) var(--s21-space-2) var(--s21-space-3);
	background-color: var(--s21-surface);
	background-image: none;
	color: var(--s21-text);
	color-scheme: dark;
	border: 1px solid var(--s21-line);
	border-radius: var(--s21-radius-sm);
	font-family: inherit;
	font-size: var(--s21-fs-sm);
}

.woocommerce div.product form.cart .variations select option {
	background-color: var(--s21-smoky);
	color: var(--s21-text);
}

.woocommerce div.product form.cart .variations select:focus-visible {
	outline: 2px solid var(--s21-accent);
	outline-offset: 2px;
	border-color: var(--s21-accent);
}

.woocommerce div.product form.cart .variations label { color: var(--s21-ghost); font-weight: 600; }
.woocommerce div.product form.cart .reset_variations { display: inline-flex; align-items: center; margin-top: var(--s21-space-3); color: var(--s21-text-muted); font-size: var(--s21-fs-xs); }
.woocommerce div.product form.cart .reset_variations:hover { color: var(--s21-accent); }
.woocommerce div.product form.cart .woocommerce-variation-description { color: var(--s21-text-muted); font-size: var(--s21-fs-sm); }
.woocommerce div.product form.cart .woocommerce-variation-price { margin-bottom: var(--s21-space-4); }
.woocommerce div.product form.cart .woocommerce-variation-availability { color: var(--s21-text-muted); font-size: var(--s21-fs-sm); }

/* Grouped + external products */
.woocommerce div.product form.cart .group_table { width: 100%; }
.woocommerce div.product form.cart .group_table td { padding: var(--s21-space-2); border-bottom: 1px solid var(--s21-line-soft); vertical-align: middle; }
.woocommerce div.product form.cart .group_table a { color: var(--s21-ghost); }
.woocommerce div.product p.cart { margin-bottom: var(--s21-space-4); }

/* Tabs */
.woocommerce div.product .woocommerce-tabs { grid-column: 1 / -1; margin-block: var(--s21-space-6); }
.woocommerce div.product .woocommerce-tabs ul.tabs { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s21-space-2); margin: 0 0 var(--s21-space-5); padding: 0; background: none; border: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	background: var(--s21-surface);
	border: 1px solid var(--s21-line);
	border-radius: var(--s21-radius-pill);
	transition: all var(--s21-speed) var(--s21-ease);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: inline-flex;
	align-items: center;
	min-height: var(--s21-tap);
	padding: var(--s21-space-2) var(--s21-space-5);
	color: var(--s21-text-muted);
	font-size: var(--s21-fs-sm);
	font-weight: 600;
	text-shadow: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li:hover { border-color: var(--s21-accent); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--s21-accent); border-color: var(--s21-accent); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--s21-on-accent); }

.woocommerce div.product .woocommerce-tabs .panel {
	margin: 0;
	padding: var(--s21-space-5);
	background: var(--s21-surface);
	border: 1px solid var(--s21-line-soft);
	border-radius: var(--s21-radius);
	color: var(--s21-text-muted);
}

.woocommerce div.product .woocommerce-tabs .panel > h2:first-child { font-size: var(--s21-fs-lg); margin-bottom: var(--s21-space-4); }

.woocommerce table.shop_attributes { width: 100%; border: 0; }
.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td { padding: var(--s21-space-3) var(--s21-space-4); border-bottom: 1px solid var(--s21-line-soft); font-style: normal; text-align: left; }
.woocommerce table.shop_attributes th { color: var(--s21-ghost); font-weight: 600; width: 40%; background: none; }
.woocommerce table.shop_attributes tr:nth-child(even) td,
.woocommerce table.shop_attributes tr:nth-child(even) th { background: var(--s21-surface-2); }

/* Reviews */
.woocommerce #reviews #comments ol.commentlist { list-style: none; margin: 0; padding: 0; }
.woocommerce #reviews #comments ol.commentlist li { margin: 0 0 var(--s21-space-5); padding: 0; background: none; border: 0; }
.woocommerce #reviews #comments ol.commentlist li .comment_container { display: flex; gap: var(--s21-space-4); padding: var(--s21-space-4); border: 1px solid var(--s21-line-soft); border-radius: var(--s21-radius); background: var(--s21-surface-2); }
.woocommerce #reviews #comments ol.commentlist li img.avatar { position: static; float: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--s21-line); padding: 0; }
.woocommerce #reviews #comments ol.commentlist li .comment-text { margin: 0; padding: 0; border: 0; flex: 1 1 auto; }
.woocommerce #reviews #comments ol.commentlist li .comment-text p.meta { color: var(--s21-text-dim); font-size: var(--s21-fs-xs); margin-bottom: var(--s21-space-2); }
.woocommerce #reviews #comments ol.commentlist li .comment-text .description { color: var(--s21-text-muted); font-size: var(--s21-fs-sm); }
.woocommerce #reviews #review_form_wrapper { margin-top: var(--s21-space-5); }
.woocommerce #reviews #respond .comment-reply-title { display: block; color: var(--s21-ghost); font-size: var(--s21-fs-md); font-weight: 700; margin-bottom: var(--s21-space-4); }
.woocommerce #reviews #commentform { display: grid; gap: var(--s21-space-4); }
.woocommerce #reviews p.stars { display: flex; gap: var(--s21-space-2); }
.woocommerce #reviews p.stars a { color: var(--s21-accent); }
.woocommerce .woocommerce-product-rating { display: flex; align-items: center; gap: var(--s21-space-3); margin-bottom: var(--s21-space-4); }
.woocommerce .woocommerce-review-link { color: var(--s21-text-muted); font-size: var(--s21-fs-sm); }

/* Related / upsells */
.woocommerce div.product .related,
.woocommerce div.product .up-sells { grid-column: 1 / -1; margin-block: var(--s21-space-6); }
.woocommerce div.product .related > h2,
.woocommerce div.product .up-sells > h2 { font-size: var(--s21-fs-xl); margin-bottom: var(--s21-space-4); padding-bottom: var(--s21-space-3); border-bottom: 1px solid var(--s21-line-soft); }

.s21-product-below { grid-column: 1 / -1; margin-block: var(--s21-space-6); }

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

.s21-sticky-buy[hidden] { display: none; }
.s21-sticky-buy__info { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.s21-sticky-buy__name { color: var(--s21-ghost); font-size: var(--s21-fs-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s21-sticky-buy__price { color: var(--s21-accent); font-weight: 800; font-size: var(--s21-fs-sm); }
.s21-sticky-buy__btn { flex: none; min-height: var(--s21-tap); }
body.s21-has-sticky-buy .s21-footer { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }

/* --------------------------------------------------------------------------
   6. Notices
   ----------------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments,
.wc-block-components-notice-banner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s21-space-3);
	margin: 0 0 var(--s21-space-5);
	padding: var(--s21-space-4) var(--s21-space-5);
	border: 1px solid var(--s21-line);
	border-inline-start: 3px solid var(--s21-accent);
	border-radius: var(--s21-radius);
	background: var(--s21-surface);
	color: var(--s21-text) !important;
	font-size: var(--s21-fs-sm);
	line-height: 1.5;
}

.woocommerce-message { border-inline-start-color: var(--s21-success); }
.woocommerce-error { border-inline-start-color: var(--s21-danger); flex-direction: column; align-items: flex-start; }
.woocommerce-info { border-inline-start-color: var(--s21-info); }

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button { margin-inline-start: auto; }

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none; }

.woocommerce-error li { margin: 0; }

.woocommerce .woocommerce-notices-wrapper:empty { display: none; }

/* --------------------------------------------------------------------------
   7. Cart
   ----------------------------------------------------------------------- */

.woocommerce-cart .s21-shop-main,
.woocommerce-checkout .s21-shop-main { max-width: 1200px; }

.woocommerce table.shop_table {
	width: 100%;
	margin: 0 0 var(--s21-space-5);
	border: 1px solid var(--s21-line-soft);
	border-radius: var(--s21-radius);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: var(--s21-surface);
	font-size: var(--s21-fs-sm);
}

.woocommerce table.shop_table th {
	padding: var(--s21-space-4);
	background: var(--s21-surface-2);
	color: var(--s21-ghost);
	font-size: var(--s21-fs-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--s21-line);
	text-align: left;
}

.woocommerce table.shop_table td {
	padding: var(--s21-space-4);
	border-bottom: 1px solid var(--s21-line-soft);
	border-top: 0;
	vertical-align: middle;
	color: var(--s21-text);
}

.woocommerce table.shop_table tbody th,
.woocommerce table.shop_table tfoot th { background: var(--s21-surface-2); color: var(--s21-ghost); font-weight: 700; border-bottom: 1px solid var(--s21-line-soft); }

/* Cart line thumb: a light stage with the artwork contained, never cropped.
   Product photos arrive uncropped (inc/images.php), so `cover` here would put
   the crop back through CSS and cut the title off a book cover. */
.woocommerce table.cart img,
.woocommerce-page table.cart img { width: 72px; height: auto; aspect-ratio: 4 / 5; object-fit: contain; object-position: center; box-sizing: border-box; padding: 4px; border: 1px solid var(--s21-image-line); border-radius: var(--s21-radius-sm); background: var(--s21-image-bg); }

.woocommerce table.cart td.product-name a { color: var(--s21-ghost); font-weight: 600; }
.woocommerce table.cart td.product-name a:hover { color: var(--s21-accent); }
.woocommerce table.cart td.product-name .variation { margin-top: var(--s21-space-2); font-size: var(--s21-fs-xs); color: var(--s21-text-dim); }
.woocommerce table.cart td.product-price,
.woocommerce table.cart td.product-subtotal { font-weight: 700; color: var(--s21-ghost); white-space: nowrap; }
.woocommerce table.cart td.product-remove { width: 44px; padding-inline-start: var(--s21-space-2); }
.woocommerce a.remove { display: inline-flex !important; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--s21-surface-2) !important; color: var(--s21-text-muted) !important; font-size: 18px !important; line-height: 1; font-weight: 400 !important; }
.woocommerce a.remove:hover { background: var(--s21-danger) !important; color: var(--s21-black) !important; }

.woocommerce-cart .cart-collaterals,
.woocommerce-page .cart-collaterals { width: 100%; display: grid; gap: var(--s21-space-5); }
.woocommerce-cart .cart-collaterals .cross-sells { margin-bottom: var(--s21-space-5); }
.woocommerce-cart .cart-collaterals .cross-sells > h2 { font-size: var(--s21-fs-lg); }

.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals { float: none; width: 100%; padding: var(--s21-space-5); border: 1px solid var(--s21-line); border-radius: var(--s21-radius); background: var(--s21-surface-2); }
.woocommerce .cart-collaterals .cart_totals > h2 { font-size: var(--s21-fs-lg); margin-bottom: var(--s21-space-4); }

.woocommerce .cart_totals table.shop_table { border: 0; background: none; margin-bottom: var(--s21-space-4); }
.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td { background: none; border: 0; border-bottom: 1px solid var(--s21-line-soft); padding: var(--s21-space-3) 0; text-transform: none; letter-spacing: 0; font-size: var(--s21-fs-sm); }
.woocommerce .cart_totals table.shop_table td { text-align: right; font-weight: 700; color: var(--s21-ghost); }
.woocommerce .cart_totals .order-total th,
.woocommerce .cart_totals .order-total td { font-size: var(--s21-fs-md); border-bottom: 0; padding-block: var(--s21-space-4); }
.woocommerce .cart_totals .order-total td { color: var(--s21-accent); }

.woocommerce .cart_totals .shipping-calculator-form,
.woocommerce .cart_totals .woocommerce-shipping-destination { color: var(--s21-text-muted); font-size: var(--s21-fs-sm); }

.woocommerce .cart-collaterals .wc-proceed-to-checkout { padding: 0; }
.woocommerce .cart-collaterals .wc-proceed-to-checkout a.checkout-button { display: flex; width: 100%; min-height: 56px; margin: 0 0 var(--s21-space-3); font-size: var(--s21-fs-base); }

.woocommerce .cart .button,
.woocommerce .cart input.button,
.woocommerce .actions .button { min-height: var(--s21-tap); }

.woocommerce .cart-collaterals .cart_totals .button:disabled { opacity: 0.5; }

.woocommerce table.cart td.actions,
.woocommerce-page table.cart td.actions { padding: var(--s21-space-4); background: var(--s21-surface-2); }

.woocommerce table.cart td.actions .coupon { display: flex; flex-wrap: wrap; gap: var(--s21-space-3); align-items: center; }
.woocommerce table.cart td.actions .coupon label { margin: 0; color: var(--s21-text-muted); font-size: var(--s21-fs-sm); }
.woocommerce table.cart td.actions .coupon .input-text { width: auto; min-width: 180px; flex: 1 1 180px; }

.woocommerce .cart-collaterals .cart_totals .woocommerce-shipping-methods { list-style: none; margin: 0; padding: 0; }
.woocommerce .cart-collaterals .cart_totals .woocommerce-shipping-methods li { margin: 0 0 var(--s21-space-2); text-align: right; }

/* --------------------------------------------------------------------------
   8. Checkout
   ----------------------------------------------------------------------- */

.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review { margin-bottom: var(--s21-space-5); }

.woocommerce-checkout h3 { font-size: var(--s21-fs-lg); margin-bottom: var(--s21-space-4); padding-bottom: var(--s21-space-3); border-bottom: 1px solid var(--s21-line-soft); }

.woocommerce form .form-row { display: block; margin: 0 0 var(--s21-space-4); padding: 0; }
.woocommerce form .form-row label { display: block; margin-bottom: var(--s21-space-2); color: var(--s21-text-muted); font-size: var(--s21-fs-sm); font-weight: 600; }
.woocommerce form .form-row .required { color: var(--s21-accent); text-decoration: none; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row .select2-container .select2-selection--single {
	width: 100%;
	min-height: 48px;
	padding: 0.75em 1em;
	border: 1px solid var(--s21-line);
	border-radius: var(--s21-radius);
	background: var(--s21-surface);
	color: var(--s21-text);
	font-family: inherit;
	font-size: var(--s21-fs-base);
}

.woocommerce form .form-row textarea { min-height: 120px; }

.select2-container--default .select2-selection--single { background: var(--s21-surface) !important; border-color: var(--s21-line) !important; border-radius: var(--s21-radius) !important; height: 48px !important; }
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--s21-text) !important; line-height: 46px !important; padding-inline: 1em !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px !important; }
.select2-dropdown { background: var(--s21-surface) !important; border-color: var(--s21-line) !important; }
.select2-container--default .select2-results__option { color: var(--s21-text) !important; padding: var(--s21-space-3) !important; }
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] { background: var(--s21-accent) !important; color: var(--s21-on-accent) !important; }
.select2-container--default .select2-search--dropdown .select2-search__field { background: var(--s21-surface-2) !important; border-color: var(--s21-line) !important; color: var(--s21-text) !important; min-height: 44px; }

.woocommerce form .form-row.woocommerce-invalid label { color: var(--s21-danger); }
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid textarea,
.woocommerce form .form-row.woocommerce-invalid .select2-selection { border-color: var(--s21-danger); }
.woocommerce form .form-row.woocommerce-validated input.input-text,
.woocommerce form .form-row.woocommerce-validated textarea { border-color: var(--s21-success); }

.woocommerce-checkout #order_review,
.woocommerce-checkout #order_review_heading { clear: both; }

.woocommerce-checkout #order_review { padding: var(--s21-space-5); border: 1px solid var(--s21-line); border-radius: var(--s21-radius); background: var(--s21-surface-2); }
.woocommerce-checkout #order_review table.shop_table { border: 0; background: none; margin-bottom: var(--s21-space-4); }
.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td { background: none; border: 0; border-bottom: 1px solid var(--s21-line-soft); padding: var(--s21-space-3) 0; text-transform: none; letter-spacing: 0; font-size: var(--s21-fs-sm); }
.woocommerce-checkout #order_review table.shop_table td { text-align: right; }
.woocommerce-checkout #order_review table.shop_table tfoot .order-total td { color: var(--s21-accent); font-size: var(--s21-fs-md); }
.woocommerce-checkout #order_review .product-name { text-align: left !important; }

.woocommerce-checkout #payment { background: none; border-radius: 0; padding: 0; margin-top: var(--s21-space-4); }
.woocommerce-checkout #payment ul.payment_methods { list-style: none; margin: 0 0 var(--s21-space-4); padding: 0; border: 0; display: grid; gap: var(--s21-space-2); }
.woocommerce-checkout #payment ul.payment_methods li { display: flex; align-items: flex-start; gap: var(--s21-space-3); margin: 0; padding: var(--s21-space-4); border: 1px solid var(--s21-line); border-radius: var(--s21-radius); background: var(--s21-surface); }
.woocommerce-checkout #payment ul.payment_methods li img { margin-inline-start: auto; max-height: 28px; border-radius: 4px; }
.woocommerce-checkout #payment ul.payment_methods li label { margin: 0; color: var(--s21-text); font-weight: 600; cursor: pointer; }
.woocommerce-checkout #payment div.payment_box { margin: var(--s21-space-3) 0 0; padding: var(--s21-space-4); background: var(--s21-surface-2); border-radius: var(--s21-radius-sm); color: var(--s21-text-muted); font-size: var(--s21-fs-sm); width: 100%; }
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout #payment div.payment_box input.input-text,
.woocommerce-checkout #payment div.payment_box select { background: var(--s21-surface); color: var(--s21-text); border-color: var(--s21-line); min-height: var(--s21-tap); }
.woocommerce-checkout #payment .form-row place-order,
.woocommerce-checkout #payment #place_order { width: 100%; min-height: 56px; font-size: var(--s21-fs-base); margin: 0; }
.woocommerce-checkout #payment .woocommerce-privacy-policy-text { color: var(--s21-text-muted); font-size: var(--s21-fs-xs); margin-bottom: var(--s21-space-4); }
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { color: var(--s21-text-muted); font-size: var(--s21-fs-sm); margin-bottom: var(--s21-space-4); }
.woocommerce-checkout .woocommerce-terms-and-conditions { background: var(--s21-surface); border: 1px solid var(--s21-line); color: var(--s21-text-muted); }
.woocommerce-checkout .woocommerce-checkout-review-order-table .cart-subtotal th { text-align: left; }

/* Checkout two column layout on desktop */
@media (min-width: 1024px) {
	.woocommerce-checkout .woocommerce-form-coupon-toggle + form.checkout_coupon,
	.woocommerce-checkout form.checkout { display: block; }

	.woocommerce-checkout #customer_details { float: left; width: 56%; }
	.woocommerce-checkout #order_review_heading,
	.woocommerce-checkout #order_review { float: right; width: 41%; clear: right; }
	.woocommerce-checkout #order_review_heading { margin-bottom: var(--s21-space-3); font-size: var(--s21-fs-lg); color: var(--s21-ghost); }

	.woocommerce-checkout .col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s21-space-5); }
	.woocommerce-checkout .col2-set .col-1,
	.woocommerce-checkout .col2-set .col-2 { float: none; width: auto; }
}

.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register { padding: var(--s21-space-5); border: 1px solid var(--s21-line); border-radius: var(--s21-radius); background: var(--s21-surface); margin-bottom: var(--s21-space-5); }

.woocommerce .woocommerce-form-coupon-toggle .woocommerce-info { margin-bottom: var(--s21-space-4); }
.woocommerce form.checkout_coupon .form-row { margin-bottom: var(--s21-space-3); }

/* --------------------------------------------------------------------------
   9. My account
   ----------------------------------------------------------------------- */

.woocommerce-account .woocommerce-MyAccount-navigation { margin-bottom: var(--s21-space-5); }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s21-space-2); margin: 0; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a { display: inline-flex; align-items: center; min-height: var(--s21-tap); padding: var(--s21-space-2) var(--s21-space-4); border: 1px solid var(--s21-line); border-radius: var(--s21-radius-pill); background: var(--s21-surface); color: var(--s21-text-muted); font-size: var(--s21-fs-sm); font-weight: 600; }
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { border-color: var(--s21-accent); color: var(--s21-accent); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--s21-accent); border-color: var(--s21-accent); color: var(--s21-on-accent); }
.woocommerce-account .woocommerce-MyAccount-content { padding: var(--s21-space-5); border: 1px solid var(--s21-line-soft); border-radius: var(--s21-radius); background: var(--s21-surface); color: var(--s21-text-muted); }
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 { color: var(--s21-ghost); }
.woocommerce-account .woocommerce-MyAccount-content a:not(.button) { color: var(--s21-accent); }

.woocommerce .woocommerce-Addresses { display: grid; gap: var(--s21-space-4); }
.woocommerce .woocommerce-Addresses .woocommerce-Address { padding: var(--s21-space-4); border: 1px solid var(--s21-line-soft); border-radius: var(--s21-radius); background: var(--s21-surface-2); }
.woocommerce .woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; gap: var(--s21-space-3); }
.woocommerce .woocommerce-Address-title h3 { margin: 0; font-size: var(--s21-fs-base); border: 0; padding: 0; }
.woocommerce .woocommerce-Address address { color: var(--s21-text-muted); font-style: normal; }

.woocommerce .woocommerce-EditAccountForm,
.woocommerce .woocommerce-Address--edit form { display: grid; gap: var(--s21-space-3); }

.woocommerce-MyAccount-orders td,
.woocommerce-MyAccount-orders th { vertical-align: middle; }
.woocommerce .woocommerce-orders-table__cell-order-actions a { display: inline-flex; align-items: center; min-height: 36px; margin-inline-end: var(--s21-space-2); }

.woocommerce form .form-row .input-checkbox { width: 20px; height: 20px; accent-color: var(--s21-accent); }

.woocommerce .woocommerce-Button,
.woocommerce-page .woocommerce-Button { min-height: var(--s21-tap); }

/* Login / register pages */
.woocommerce .woocommerce-form-login .woocommerce-form__label-for-checkbox { align-items: center; }
.woocommerce .lost_reset_password { padding: var(--s21-space-5); border: 1px solid var(--s21-line); border-radius: var(--s21-radius); background: var(--s21-surface); }

/* --------------------------------------------------------------------------
   10. Widgets (filters, price slider, product lists)
   ----------------------------------------------------------------------- */

.widget_products ul,
.widget_recently_viewed_products ul,
.widget_top_rated_products ul,
.widget_recent_reviews ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s21-space-3); }
.widget_products li,
.widget_recently_viewed_products li,
.widget_top_rated_products li,
.widget_recent_reviews li { display: flex; gap: var(--s21-space-3); align-items: center; margin: 0; }
/* Widget product thumbs share the cart's light stage: contained, never cropped. */
.widget_products img,
.widget_recently_viewed_products img,
.widget_top_rated_products img,
.widget_recent_reviews img { width: 56px; height: auto; aspect-ratio: 4 / 5; object-fit: contain; object-position: center; box-sizing: border-box; padding: 3px; border: 1px solid var(--s21-image-line); border-radius: var(--s21-radius-sm); background: var(--s21-image-bg); flex: none; }
.widget_products a:not(.s21-btn),
.widget_top_rated_products a,
.widget_recently_viewed_products a { min-height: auto; display: block; color: var(--s21-ghost); font-size: var(--s21-fs-sm); font-weight: 600; line-height: 1.35; }
.widget_products .amount,
.widget_top_rated_products .amount,
.widget_recent_reviews .amount { color: var(--s21-accent); font-weight: 700; font-size: var(--s21-fs-sm); }
.widget_products del .amount { color: var(--s21-text-dim); }
.widget_recent_reviews .reviewer { color: var(--s21-text-dim); font-size: var(--s21-fs-xs); }

.widget_product_categories ul,
.widget_layered_nav ul,
.widget_rating_filter ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.widget_product_categories li,
.widget_layered_nav li,
.widget_rating_filter li { display: flex; align-items: center; gap: var(--s21-space-2); margin: 0; }
.widget_product_categories a,
.widget_layered_nav a,
.widget_rating_filter a { flex: 1 1 auto; min-height: 40px; color: var(--s21-text-muted); font-size: var(--s21-fs-sm); }
.widget_product_categories a:hover,
.widget_layered_nav a:hover { color: var(--s21-accent); }
.widget_product_categories .count,
.widget_layered_nav .count { color: var(--s21-text-dim); font-size: var(--s21-fs-xs); }
.widget_product_categories .children { padding-inline-start: var(--s21-space-4); width: 100%; }
.widget_layered_nav .chosen { color: var(--s21-accent); font-weight: 600; }

/* Price filter (jQuery UI slider). Woo core ships
   `.woocommerce .widget_price_filter .ui-slider .ui-slider-range{background-color:#7f54b3}`,
   the same purple for `.ui-slider-handle` and `#35224c` for the
   `.ui-widget-content` track — all at specificity (0,4,0). The theme's
   unprefixed `.widget_price_filter …` selectors only reach (0,2,0)/(0,3,0), so
   core purple won even though this sheet is enqueued *after* woocommerce.css.
   The body-scoped twins below land at (0,4,1) and win on specificity and
   source order; the unprefixed selectors are kept so the widget still reads
   as Shop21 when it is printed outside a WooCommerce wrapper (footer
   sidebars), where the core rules cannot match at all. */
.widget_price_filter,
.woocommerce .widget_price_filter,
body.woocommerce .widget_price_filter {
	--s21-price-track: var(--s21-surface-3);   /* neutral dark, keeps yellow legible */
	--s21-price-range: var(--s21-accent);      /* #FFB703 Bitcoin Yellow */
	--s21-price-knob: var(--s21-ghost);
	--s21-price-knob-ring: var(--s21-smoky);   /* ink ring: visible on yellow *and* on the track */
}

.widget_price_filter .price_slider,
.woocommerce .widget_price_filter .price_slider,
body.woocommerce .widget_price_filter .price_slider { margin-bottom: var(--s21-space-4); }

/* Track (core: #35224c dark purple). */
.widget_price_filter .price_slider_wrapper .ui-widget-content,
.woocommerce .widget_price_filter .price_slider_wrapper .ui-widget-content,
body.woocommerce .widget_price_filter .price_slider_wrapper .ui-widget-content {
	background: var(--s21-price-track);
	border: 0;
	border-radius: var(--s21-radius-pill);
}

.widget_price_filter .ui-slider-horizontal,
.woocommerce .widget_price_filter .ui-slider-horizontal,
body.woocommerce .widget_price_filter .ui-slider-horizontal { height: 8px; }

/* Selected range (core: #7f54b3 purple) → Bitcoin Yellow. */
.widget_price_filter .ui-slider .ui-slider-range,
.woocommerce .widget_price_filter .ui-slider .ui-slider-range,
body.woocommerce .widget_price_filter .ui-slider .ui-slider-range {
	background: var(--s21-price-range);
	border: 0;
	border-radius: var(--s21-radius-pill);
}

/* Knob: 24px meets the WCAG 2.5.8 minimum target size, ink ring keeps it
   crisp against the yellow range as well as the dark track. */
.widget_price_filter .ui-slider .ui-slider-handle,
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle,
body.woocommerce .widget_price_filter .ui-slider .ui-slider-handle {
	width: 24px;
	height: 24px;
	top: -8px;
	margin-inline-start: -12px;
	background: var(--s21-price-knob);
	border: 2px solid var(--s21-price-knob-ring);
	border-radius: 50%;
	cursor: grab;
}

.widget_price_filter .ui-slider .ui-slider-handle:hover,
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle:hover,
body.woocommerce .widget_price_filter .ui-slider .ui-slider-handle:hover { border-color: var(--s21-price-range); }

.widget_price_filter .ui-slider .ui-slider-handle.ui-state-active,
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle.ui-state-active,
body.woocommerce .widget_price_filter .ui-slider .ui-slider-handle.ui-state-active {
	border-color: var(--s21-price-range);
	cursor: grabbing;
}

/* Core sets `outline:0` on the handle, which hides keyboard focus entirely. */
.widget_price_filter .ui-slider .ui-slider-handle:focus-visible,
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle:focus-visible,
body.woocommerce .widget_price_filter .ui-slider .ui-slider-handle:focus-visible {
	outline: 2px solid var(--s21-price-knob);
	outline-offset: 2px;
}

/* Amount row + filter button: core wins these at (0,3,0)/(0,4,0) too. */
.widget_price_filter .price_slider_amount,
.woocommerce .widget_price_filter .price_slider_amount,
body.woocommerce .widget_price_filter .price_slider_amount {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s21-space-3);
	color: var(--s21-text-muted);
	font-size: var(--s21-fs-sm);
	line-height: 1.4;
	text-align: start;
}

.widget_price_filter .price_slider_amount .button,
.woocommerce .widget_price_filter .price_slider_amount .button,
body.woocommerce .widget_price_filter .price_slider_amount .button {
	float: none;
	margin-inline-start: auto;
	min-height: 40px;
	padding: var(--s21-space-2) var(--s21-space-4);
	font-size: var(--s21-fs-xs);
}

.widget_price_filter .price_slider_amount input,
.woocommerce .widget_price_filter .price_slider_amount input,
body.woocommerce .widget_price_filter .price_slider_amount input { display: none; }

.widget_shopping_cart .woocommerce-mini-cart { list-style: none; margin: 0; padding: 0; }
.widget_shopping_cart .woocommerce-mini-cart-item { display: flex; gap: var(--s21-space-3); padding: var(--s21-space-3) 0; border-bottom: 1px solid var(--s21-line-soft); }
.widget_shopping_cart .woocommerce-mini-cart__total { margin-top: var(--s21-space-3); color: var(--s21-ghost); font-weight: 700; }
.widget_shopping_cart .woocommerce-mini-cart__buttons { display: grid; gap: var(--s21-space-2); }

.widget_product_search .woocommerce-product-search { display: flex; gap: var(--s21-space-2); }
.widget_product_search input[type="search"] { flex: 1 1 auto; }
.widget_product_search button[type="submit"] { flex: none; min-height: var(--s21-tap); padding-inline: var(--s21-space-4); }

/* Active filter chips (WC filter widget / block) */
.woocommerce .widget_layered_nav_filters ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s21-space-2); margin: 0 0 var(--s21-space-4); padding: 0; }
.woocommerce .widget_layered_nav_filters li { margin: 0; }
.woocommerce .widget_layered_nav_filters a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--s21-space-4); border: 1px solid var(--s21-accent); border-radius: var(--s21-radius-pill); background: rgb(255 183 3 / 0.1); color: var(--s21-accent) !important; font-size: var(--s21-fs-xs); font-weight: 700; }

/* --------------------------------------------------------------------------
   11. WooCommerce Cart & Checkout blocks — dark theme
   The blocks ship hard-coded light colours (#fff panels, #2f2f2f text), so
   every surface is overridden here. Works for both classic shortcode pages
   (sections 7–9) and the React based block pages.
   ----------------------------------------------------------------------- */

.wc-block-cart,
.wc-block-checkout,
.wc-block-featured-product,
.wc-block-mini-cart,
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	background: transparent !important;
	color: var(--s21-text) !important;
	font-family: var(--s21-font);
}

.wc-block-cart__main,
.wc-block-checkout__main { min-width: 0; }

/* Panels / accordions */
.wc-block-components-panel,
.wc-block-components-panel__content,
.wc-block-components-sidebar,
.wc-block-components-totals-wrapper,
.wc-block-checkout__order-summary,
.wc-block-cart__submit-container,
.wc-block-components-shipping-rates-control,
.wc-block-components-coupon-form,
.wc-block-components-express-payment {
	background: var(--s21-surface) !important;
	border-color: var(--s21-line) !important;
	color: var(--s21-text) !important;
	border-radius: var(--s21-radius) !important;
}

.wc-block-components-panel > .wc-block-components-panel__header,
.wc-block-components-panel__button {
	background: var(--s21-surface-2) !important;
	color: var(--s21-ghost) !important;
	font-weight: 700;
	border-radius: var(--s21-radius) var(--s21-radius) 0 0;
	/*
	 * WooCommerce core zeroes the button's vertical padding once the panel is
	 * open (`[aria-expanded=true] { padding-bottom: 0 }`), which collapses the
	 * "Forsendelse" / "Betaling" header straight onto the method text below it.
	 * The header is a block that owns its own box, with room reserved on the
	 * right for the chevron so long Danish labels cannot run under it, and it
	 * keeps a 44px+ touch target.
	 */
	position: relative;
	display: block;
	width: 100%;
	box-sizing: border-box;
	min-height: 52px;
	padding: var(--s21-space-3) 44px var(--s21-space-3) var(--s21-space-4) !important;
	line-height: 1.35;
}

.wc-block-components-panel__button[aria-expanded="true"] {
	padding-bottom: var(--s21-space-3) !important;
}

.wc-block-components-panel__button-icon,
.wc-block-components-panel__button > svg {
	position: absolute;
	top: 50%;
	right: var(--s21-space-4);
	transform: translateY(-50%);
}

.wc-block-components-panel__button:hover { color: var(--s21-accent) !important; }
.wc-block-components-panel__content { padding: var(--s21-space-4) !important; }

/* Text inputs, selects, textareas */
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-block-components-select-control select,
.wc-block-components-combobox input,
.wc-block-components-address-form input,
.wc-block-components-validation-error {
	background: var(--s21-surface-2) !important;
	border-color: var(--s21-line) !important;
	color: var(--s21-text) !important;
	border-radius: var(--s21-radius) !important;
	font-family: inherit !important;
	font-size: var(--s21-fs-base) !important;
	min-height: 48px;
}

.wc-block-components-text-input input:focus,
.wc-block-components-select-control select:focus { border-color: var(--s21-accent) !important; outline: 2px solid var(--s21-focus, var(--s21-accent)); outline-offset: 1px; }

.wc-block-components-text-input label,
.wc-block-components-select-control label,
.wc-block-components-combobox label,
.wc-block-components-checkbox-control__label,
.wc-block-components-radio-control__label,
.wc-block-components-checkout-step__description,
.wc-block-components-totals-item__label,
.wc-block-components-shipping-rates-control__label,
.wc-block-components-form .wc-block-components-text-input .wc-block-components-text-input__label {
	color: var(--s21-text-muted) !important;
	font-size: var(--s21-fs-sm) !important;
	font-weight: 600;
}

.wc-block-components-text-input input:-webkit-autofill,
.wc-block-components-text-input input:-webkit-autofill:hover,
.wc-block-components-text-input input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--s21-black) !important;
	-webkit-box-shadow: 0 0 0 1000px var(--s21-accent) inset !important;
	caret-color: var(--s21-black);
}

.wc-block-components-validation-error {
	background: rgb(255 138 128 / 0.12) !important;
	border: 1px solid var(--s21-danger) !important;
	color: var(--s21-danger) !important;
	font-size: var(--s21-fs-xs) !important;
	padding: var(--s21-space-2) var(--s21-space-3) !important;
}

.wc-block-components-text-input.has-error input,
.wc-block-components-text-input.is-active.has-error input { border-color: var(--s21-danger) !important; }

/* Checkboxes and radios */
.wc-block-components-checkbox-control input[type="checkbox"],
.wc-block-components-radio-control input[type="radio"],
.wc-block-components-checkbox input[type="checkbox"] {
	accent-color: var(--s21-accent);
	width: var(--s21-control, 22px);
	height: var(--s21-control, 22px);
	border-color: var(--s21-line) !important;
	background: var(--s21-surface-2) !important;
}

.wc-block-components-checkbox-control__input-wrapper svg,
.wc-block-components-checkbox .wc-block-components-checkbox-control__input-wrapper svg { color: var(--s21-black); }

/* Buttons */
.wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-components-button.wc-block-cart__submit-button,
.wc-block-cart__express-payment .wc-block-components-express-payment__cart-buttons a,
.wc-block-components-form button[type="submit"] {
	background: var(--s21-accent) !important;
	color: var(--s21-on-accent) !important;
	border: 0 !important;
	border-radius: var(--s21-radius-pill) !important;
	font-family: inherit !important;
	font-weight: 700 !important;
	min-height: 52px !important;
	padding: 0.9em 1.6em !important;
	width: 100%;
}

.wc-block-components-button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover { background: var(--s21-accent-hover) !important; }

.wc-block-components-button:disabled,
.wc-block-components-button.is-disabled { opacity: 0.45 !important; }

.wc-block-components-button.is-outline,
.wc-block-components-button.wc-block-components-button--variant-outline {
	background: transparent !important;
	color: var(--s21-accent) !important;
	border: 1px solid var(--s21-accent) !important;
}

/* Cart line items table */
.wc-block-cart-items {
	background: var(--s21-surface) !important;
	border: 1px solid var(--s21-line-soft) !important;
	border-radius: var(--s21-radius) !important;
	overflow: hidden;
}

.wc-block-cart-items__header,
.wc-block-cart-items__header th {
	background: var(--s21-surface-2) !important;
	color: var(--s21-ghost) !important;
	font-size: var(--s21-fs-xs) !important;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	border-bottom: 1px solid var(--s21-line) !important;
}

.wc-block-cart-items__row,
.wc-block-cart-item { border-bottom: 1px solid var(--s21-line-soft) !important; background: transparent !important; }
.wc-block-cart-items__row:last-child { border-bottom: 0 !important; }

.wc-block-cart-item__product,
.wc-block-cart-item__name,
.wc-block-cart-item__price,
.wc-block-cart-item__total,
.wc-block-cart-item__quantity { color: var(--s21-text) !important; }

.wc-block-cart-item__name a,
.wc-block-components-product-name { color: var(--s21-ghost) !important; font-weight: 600; font-size: var(--s21-fs-sm); }
.wc-block-cart-item__name a:hover { color: var(--s21-accent) !important; }

/* Block cart / block checkout line thumbs: same light stage, contained. */
.wc-block-cart-item__image img,
.wc-block-components-product-image img {
	width: 72px;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: contain;
	object-position: center;
	box-sizing: border-box;
	padding: 4px;
	border: 1px solid var(--s21-image-line);
	border-radius: var(--s21-radius-sm);
	background: var(--s21-image-bg);
}

/* Block checkout *order summary* thumbs. This one is easy to miss: the <img>
   carries no class at all and its wrapper also holds the quantity bubble, so a
   stage on the wrapper would paint behind the badge. The block stylesheet is
   inlined after ours and sizes the image at (0,1,1), hence the body-scoped
   twin at (0,2,2) — without it a white cover floated straight onto the Smoky
   Black panel with no stage, no border and no containment. */
body.woocommerce-checkout .wc-block-components-order-summary-item__image > img {
	width: 48px;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: contain;
	object-position: center;
	box-sizing: border-box;
	padding: 3px;
	border: 1px solid var(--s21-image-line);
	border-radius: var(--s21-radius-sm);
	background: var(--s21-image-bg);
}

/* Classic (shortcode) checkout review table thumbs — the same stage, for shops
   that still render the classic checkout or the pay-for-order screen. */
.woocommerce-checkout-review-order-table img {
	width: 56px;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: contain;
	object-position: center;
	box-sizing: border-box;
	padding: 3px;
	border: 1px solid var(--s21-image-line);
	border-radius: var(--s21-radius-sm);
	background: var(--s21-image-bg);
}

.wc-block-cart-item__variation,
.wc-block-components-product-metadata__item,
.wc-block-cart-item__prices .wc-block-components-product-price-item--regular {
	color: var(--s21-text-dim) !important;
	font-size: var(--s21-fs-xs) !important;
}

.wc-block-cart-item__total .wc-block-components-product-price-item,
.wc-block-components-product-price-item--value { color: var(--s21-ghost) !important; font-weight: 800; }

.wc-block-cart-item__remove-link,
.wc-block-components-cart-item__remove-link,
button.wc-block-components-button.wc-block-cart-item__remove {
	background: transparent !important;
	color: var(--s21-text-muted) !important;
	font-size: var(--s21-fs-xs) !important;
	text-decoration: underline;
	min-height: var(--s21-tap);
}

.wc-block-cart-item__remove-link:hover { color: var(--s21-danger) !important; }

/* Quantity selector */
.wc-block-components-quantity-selector {
	/* The WC default 107px clips our two 44px buttons plus input. */
	width: calc(2 * var(--s21-tap) + 3em + 2px) !important;
	font-size: 16px;
	box-sizing: border-box;
	flex: 0 0 auto;
	border: 1px solid var(--s21-line) !important;
	border-radius: var(--s21-radius-pill) !important;
	background: var(--s21-surface-2) !important;
	overflow: hidden;
	min-height: var(--s21-tap);
}

.wc-block-components-quantity-selector__input {
	flex: 0 0 3em !important;
	min-width: 0 !important;
	font-size: inherit !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	color: var(--s21-ghost) !important;
	font-weight: 700;
	min-height: var(--s21-tap) !important;
	width: 3em !important;
	text-align: center;
}

.wc-block-components-quantity-selector__button {
	flex: 0 0 var(--s21-tap) !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 22px !important;
	font-weight: 700;
	line-height: 1;
	opacity: 1;
	background: transparent !important;
	color: var(--s21-accent) !important;
	border: 0 !important;
	min-width: var(--s21-tap) !important;
	min-height: var(--s21-tap) !important;
	border-radius: 0 !important;
	width: auto !important;
	padding: 0 !important;
}

.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button { opacity: 1; }

.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.wc-block-components-quantity-selector__button:hover { background: var(--s21-surface-hover) !important; }

/* Totals */
.wc-block-components-totals-item { border-color: var(--s21-line-soft) !important; padding-block: var(--s21-space-3) !important; }
.wc-block-components-totals-item__value { color: var(--s21-ghost) !important; font-weight: 700; }
.wc-block-components-totals-footer-item { border-top: 1px solid var(--s21-line) !important; margin-top: var(--s21-space-3); padding-top: var(--s21-space-4) !important; }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label { color: var(--s21-ghost) !important; font-weight: 700; font-size: var(--s21-fs-base) !important; }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-summary-total .wc-block-components-totals-item__value { color: var(--s21-accent) !important; font-size: var(--s21-fs-lg) !important; font-weight: 800; }
.wc-block-components-totals-item__description,
.wc-block-components-totals-item__subtext { color: var(--s21-text-dim) !important; font-size: var(--s21-fs-xs) !important; }

/* Checkout steps */
.wc-block-components-checkout-step {
	background: var(--s21-surface) !important;
	border-color: var(--s21-line-soft) !important;
	border-radius: var(--s21-radius) !important;
	color: var(--s21-text) !important;
}

.wc-block-components-checkout-step__heading,
.wc-block-components-checkout-step__title,
.wc-block-components-title { color: var(--s21-ghost) !important; font-weight: 700 !important; }
.wc-block-components-checkout-step__description { color: var(--s21-text-muted) !important; }
.wc-block-components-checkout-step__container { background: transparent !important; }
.wc-block-components-checkout-step:after { background: var(--s21-line-soft) !important; }

/* Payment methods */
/*
 * Every radio row — "Forsendelse" rates, local pickup locations and the
 * "Betalingsmuligheder" tabs — carries its control as an absolutely positioned
 * circle, so the row's left padding *is* the label's indentation. WooCommerce
 * ships `padding: 16px 16px 16px 48px` for exactly that reason; flattening it
 * to `--s21-space-4` on all sides (as an earlier restyle did) dropped the text
 * underneath the circle. Reserve the gutter explicitly and keep it in step with
 * the 22px control from --s21-control.
 */
.wc-block-components-radio-control__option,
.wc-block-components-payment-methods__tabs .wc-block-components-radio-control__option {
	background: var(--s21-surface-2) !important;
	border-color: var(--s21-line) !important;
	border-radius: var(--s21-radius) !important;
	color: var(--s21-text) !important;
	padding: var(--s21-space-4) var(--s21-space-4) var(--s21-space-4) var(--s21-radio-gutter, 50px) !important;
	min-height: var(--s21-tap);
}

/* The cart moves the control to left: 0, so it needs a narrower gutter. */
.wc-block-cart .wc-block-components-radio-control__option {
	padding-left: var(--s21-radio-gutter-cart, 34px) !important;
}

/* Expanded payment method notes line up with their label, not with the circle. */
.wc-block-components-radio-control-accordion-content {
	padding-left: var(--s21-radio-gutter, 50px) !important;
}

.wc-block-cart .wc-block-components-radio-control-accordion-content {
	padding-left: var(--s21-radio-gutter-cart, 34px) !important;
}

/* Pin the control itself so the gutter above always matches reality. Woo
 * shifts it to left: 0 inside the cart; that stays true here (higher
 * specificity than the pinned rule above) so both gutters stay correct. */
.wc-block-components-radio-control .wc-block-components-radio-control__input {
	left: var(--s21-radio-inset, 16px);
	width: var(--s21-control, 22px);
	height: var(--s21-control, 22px);
}

.wc-block-cart .wc-block-components-radio-control .wc-block-components-radio-control__input {
	left: 0;
}

/*
 * A chosen rate has to *look* chosen. WooCommerce draws the circle itself
 * (appearance: none) — white fill, hairline border, black dot — so accent-color
 * cannot reach it and, on this dark canvas, the selected option was only
 * distinguishable by a dot nobody noticed. Painted in Bitcoin Yellow with ink
 * on gold, per the brand guideline.
 */
.wc-block-components-radio-control .wc-block-components-radio-control__input {
	background: var(--s21-surface-2) !important;
	border: 1px solid var(--s21-line) !important;
}

.wc-block-components-radio-control .wc-block-components-radio-control__input:hover { border-color: var(--s21-accent) !important; }

.wc-block-components-radio-control .wc-block-components-radio-control__input:checked {
	background: var(--s21-accent) !important;
	border-color: var(--s21-accent) !important;
}

.wc-block-components-radio-control .wc-block-components-radio-control__input:checked:before { background: var(--s21-black) !important; }

.wc-block-components-radio-control .wc-block-components-radio-control__input:focus-visible {
	outline: 2px solid var(--s21-accent) !important;
	outline-offset: 2px;
}

/* ==========================================================================
   Easy Product Bundles ("asnp") — the total price box on a bundle page
   ==========================================================================
   The plugin hard-codes a light card (#f8f8f8, grey #606060 text, white
   quantity fields) that lands on our Smoky Black canvas as a glaring white
   slab. The box follows the theme instead: black, hairline border, no drop
   shadow, and every price inside it recoloured so it stays legible —
   #606060 on black is only 3.3:1.
*/
.asnp-totalPrice-wrapper {
	background-color: var(--s21-black) !important;
	border: 1px solid var(--s21-line-soft) !important;
	box-shadow: none !important;
	color: var(--s21-text) !important;
	border-radius: var(--s21-radius) !important;
}

.asnp-totalPrice-wrapper .asnp-totalPrice-title,
.asnp-mainPrice .asnp-totalPrice-title { color: var(--s21-ghost) !important; }

.asnp-totalPrice-wrapper .woocommerce-Price-amount.amount,
.asnp-totalPrice-wrapper .asnp-totalPrice-section,
.asnp-mainPrice .woocommerce-Price-amount.amount,
.asnp-mainPrice .asnp-totalPrice-section { color: var(--s21-accent) !important; }

.asnp-totalPrice-wrapper del,
.asnp-totalPrice-wrapper del .woocommerce-Price-amount.amount,
.asnp-totalPrice-wrapper .asnp-productList-regularPrice,
.asnp-mainPrice del,
.asnp-mainPrice del .woocommerce-Price-amount.amount { color: var(--s21-text-dim) !important; }

.asnp-totalPrice-wrapper .asnp-savedPrice,
.asnp-mainPrice .asnp-savedPrice { background-color: var(--s21-accent) !important; color: var(--s21-black) !important; }

.asnp-totalPrice-wrapper .asnp-savedPrice .woocommerce-Price-amount.amount,
.asnp-mainPrice .asnp-savedPrice .woocommerce-Price-amount.amount { color: var(--s21-black) !important; }

.asnp-totalPrice-wrapper .asnp-off-badge { background: var(--s21-accent) !important; color: var(--s21-black) !important; }
.asnp-totalPrice-wrapper .asnp-off-badge:before,
.asnp-totalPrice-wrapper .asnp-off-badge:after { border-color: var(--s21-accent) transparent transparent !important; }

.wc-block-components-radio-control__option:hover { border-color: var(--s21-accent) !important; }
/*
 * The chosen row has to say so. WooCommerce marks it with
 * `…__option-checked` / `…--checked-option-highlighted` (and the input's own
 * :checked), not with the `aria-checked` / `is-active` pair this rule used to
 * test for — so the accent border never fired and the selected shipping rate
 * or payment method looked identical to the unselected ones.
 */
.wc-block-components-radio-control__option[aria-checked="true"],
.wc-block-components-radio-control__option.is-active,
.wc-block-components-radio-control__option-checked,
.wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-components-radio-control__option:has(> input:checked) {
	border-color: var(--s21-accent) !important;
	background: rgb(255 183 3 / 0.08) !important;
}

.wc-block-components-radio-control-accordion-option--checked-option-highlighted { border-color: var(--s21-accent) !important; }
.wc-block-components-radio-control__label,
.wc-block-components-payment-method-label { color: var(--s21-ghost) !important; font-weight: 600; }
.wc-block-components-radio-control__description { color: var(--s21-text-muted) !important; }
.wc-block-components-payment-methods__tabs { border: 0 !important; }
.wc-block-components-radio-control-accordion-option { border-color: var(--s21-line) !important; background: var(--s21-surface-2) !important; }

/* Notices */
.wc-block-components-notice-banner {
	background: var(--s21-surface) !important;
	border: 1px solid var(--s21-line) !important;
	border-inline-start: 3px solid var(--s21-accent) !important;
	border-radius: var(--s21-radius) !important;
	color: var(--s21-text) !important;
	font-size: var(--s21-fs-sm) !important;
}

.wc-block-components-notice-banner.is-error { border-inline-start-color: var(--s21-danger) !important; background: rgb(255 138 128 / 0.08) !important; }
.wc-block-components-notice-banner.is-success { border-inline-start-color: var(--s21-success) !important; background: rgb(110 231 168 / 0.08) !important; }
.wc-block-components-notice-banner.is-warning { border-inline-start-color: var(--s21-warning) !important; background: rgb(255 204 102 / 0.08) !important; }
.wc-block-components-notice-banner.is-info { border-inline-start-color: var(--s21-info) !important; background: rgb(142 203 255 / 0.08) !important; }
.wc-block-components-notice-banner > svg { background-color: var(--s21-accent) !important; fill: var(--s21-black) !important; }
.wc-block-components-notice-banner .wc-forward { color: var(--s21-accent) !important; }

/* Order summary + mini cart */
.wc-block-components-order-summary-item__label,
.wc-block-components-order-summary-item__product { color: var(--s21-ghost) !important; }
.wc-block-components-order-summary-item__quantity { background: var(--s21-accent) !important; color: var(--s21-on-accent) !important; border-radius: var(--s21-radius-pill); }
.wc-block-components-order-summary-item__total { color: var(--s21-ghost) !important; font-weight: 700; }
.wc-block-components-order-summary-item__description { color: var(--s21-text-dim) !important; font-size: var(--s21-fs-xs) !important; }

.wc-block-mini-cart__contents,
.wc-block-mini-cart__shopping-cart,
.wc-block-mini-cart__footer { background: var(--s21-surface) !important; color: var(--s21-text) !important; }
.wc-block-mini-cart__title { color: var(--s21-ghost) !important; }
.wc-block-mini-cart__button,
.wc-block-mini-cart__footer-actions .wc-block-components-button { border-radius: var(--s21-radius-pill) !important; }

/* Empty cart */
.wc-block-cart__empty-cart,
.wc-block-cart__empty-cart__title {
	background: var(--s21-surface) !important;
	color: var(--s21-ghost) !important;
	border-radius: var(--s21-radius) !important;
}

.wc-block-cart__empty-cart a { color: var(--s21-accent) !important; }

/* Product grids rendered by blocks */
.wc-block-grid__products { gap: var(--s21-space-4) !important; }

.wc-block-grid__product {
	background: var(--s21-surface);
	border: 1px solid var(--s21-line-soft);
	border-radius: var(--s21-radius);
	padding: var(--s21-space-3);
	text-align: left;
}

.wc-block-grid__product-title { color: var(--s21-ghost) !important; font-size: var(--s21-fs-sm) !important; font-weight: 600 !important; }
.wc-block-grid__product-price { color: var(--s21-ghost) !important; font-weight: 800; }
/* Block product grids (related/newest blocks) use the same rule as the PHP
   cards: light stage, `object-fit: contain`, artwork whole. */
.wc-block-grid__product-image img {
	aspect-ratio: 4 / 5;
	object-fit: contain;
	object-position: center;
	box-sizing: border-box;
	padding: var(--s21-image-pad);
	border: 1px solid var(--s21-image-line);
	border-radius: var(--s21-image-radius);
	background: var(--s21-image-bg);
}
.wc-block-components-product-sale-badge,
.wc-block-grid__product-onsale { background: var(--s21-accent) !important; color: var(--s21-on-accent) !important; border: 0 !important; border-radius: var(--s21-radius-pill) !important; font-weight: 800 !important; }
.wc-block-grid__product-add-to-cart .wp-block-button__link { border-radius: var(--s21-radius-pill) !important; background: var(--s21-accent) !important; color: var(--s21-on-accent) !important; min-height: var(--s21-tap); }

/* Filter blocks (price, attribute, stock, active filters) */
.wc-block-price-filter,
.wc-block-attribute-filter,
.wc-block-stock-filter,
.wc-block-active-filters,
.wc-block-rating-filter {
	background: var(--s21-surface);
	border: 1px solid var(--s21-line-soft);
	border-radius: var(--s21-radius);
	padding: var(--s21-space-4);
	color: var(--s21-text-muted);
}

.wc-block-price-filter__title,
.wc-block-attribute-filter__title,
.wc-block-stock-filter__title,
.wc-block-active-filters__title,
.wc-block-rating-filter__title { color: var(--s21-ghost) !important; font-size: var(--s21-fs-base) !important; font-weight: 700 !important; }

.wc-block-price-filter__controls input,
.wc-block-components-price-slider__range-input { background: var(--s21-surface-2) !important; color: var(--s21-text) !important; border-color: var(--s21-line) !important; border-radius: var(--s21-radius-sm) !important; }
.wc-block-price-filter__range-input-progress { background: var(--s21-accent) !important; }
.wc-block-price-filter__range-input-wrapper { border-color: var(--s21-line) !important; }
.wc-block-components-price-slider__range-input-progress { background: var(--s21-accent) !important; }

.wc-block-attribute-filter-list li,
.wc-block-stock-filter-list li,
.wc-block-rating-filter-list li { color: var(--s21-text-muted) !important; }
.wc-block-attribute-filter-list label,
.wc-block-stock-filter-list label { color: var(--s21-text-muted) !important; }
.wc-block-attribute-filter-list .wc-block-attribute-filter-list-count,
.wc-block-stock-filter-list .wc-block-attribute-filter-list-count { color: var(--s21-text-dim) !important; }

.wc-block-active-filters__item { background: var(--s21-surface-2) !important; border-color: var(--s21-line) !important; border-radius: var(--s21-radius-pill) !important; color: var(--s21-text) !important; }
.wc-block-active-filters__clear-all { color: var(--s21-accent) !important; }

/* Skeleton loaders while the blocks hydrate */
.wc-block-components-skeleton,
.wc-block-skeleton { background: var(--s21-surface-2) !important; color: var(--s21-surface-3) !important; }

/* Block cart/checkout spacing.
   NOTE: no `min-width` on the block sidebar here. A viewport media query cannot
   know how wide the block actually is, and a hard 360px minimum made the totals
   panel overflow its parent whenever the content column was narrow. Sizing is
   handled by container queries in section 11b instead. */
@media (min-width: 768px) {
	.wc-block-cart__main,
	.wc-block-checkout__main { gap: var(--s21-space-6); }
}

@media (max-width: 767px) {
	.wc-block-cart-item__image img,
	.wc-block-components-product-image img { width: 60px; }

	.wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-size: var(--s21-fs-md) !important; }
}

/* --------------------------------------------------------------------------
   11b. Cart & Checkout blocks — desktop layout

   Cart, checkout and my account are full width transactional pages, so the
   blog measure (`.s21-entry--single { max-width: 72ch }`) and the `alignwide`
   cap are lifted and the block may use the entire content container.

   Everything below is driven by container queries rather than viewport media
   queries: WooCommerce puts `container-type: inline-size` on the block wrapper
   and derives its own `is-small` / `is-mobile` / two-column states from that
   container, so a viewport rule cannot know how wide the block really is.
   ----------------------------------------------------------------------- */

.woocommerce-cart .s21-entry--single,
.woocommerce-checkout .s21-entry--single,
.woocommerce-account .s21-entry--single { max-width: none; margin-inline: 0; }

.woocommerce-cart .s21-entry__content .alignwide,
.woocommerce-checkout .s21-entry__content .alignwide,
.woocommerce-account .s21-entry__content .alignwide { max-width: none; }

/* Being wide enough is what makes WooCommerce drop its `is-mobile` class and
   render the real desktop line-item table (with a header row) instead of the
   stacked mobile cards. */
@container (min-width: 900px) {
	.woocommerce-cart .wc-block-components-sidebar-layout,
	.woocommerce-checkout .wc-block-components-sidebar-layout { flex-wrap: nowrap; }

	/* Keep the totals / order summary in view while the line items or the
	   checkout form scroll past. `align-self: flex-start` is what lets a flex
	   child stick instead of stretching to the full height of the row. */
	.woocommerce-cart .wc-block-cart__sidebar,
	.woocommerce-checkout .wc-block-checkout__sidebar {
		position: sticky;
		top: calc(var(--s21-header-h) + var(--s21-space-4));
		align-self: flex-start;
		max-height: calc(100vh - var(--s21-header-h) - var(--s21-space-7));
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
	}

	/* Roomier desktop rows. */
	.woocommerce-cart .wc-block-cart-items .wc-block-cart-item__image img { width: 96px; }
	.woocommerce-cart .wc-block-cart-items td { padding-block: var(--s21-space-5); }
}

/* --------------------------------------------------------------------------
   12. Empty shop / no products
   ----------------------------------------------------------------------- */

.woocommerce .woocommerce-no-products-found { padding: var(--s21-space-6); text-align: center; border: 1px solid var(--s21-line-soft); border-radius: var(--s21-radius); background: var(--s21-surface); }
.woocommerce .woocommerce-no-products-found p { color: var(--s21-text-muted); }

/* --------------------------------------------------------------------------
   13. Shop pagination (WooCommerce markup)
   ----------------------------------------------------------------------- */

.woocommerce nav.woocommerce-pagination { margin-block: var(--s21-space-6); }
.woocommerce nav.woocommerce-pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s21-space-2); border: 0; margin: 0; padding: 0; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; margin: 0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--s21-tap);
	min-height: var(--s21-tap);
	padding: 0 var(--s21-space-3);
	border: 1px solid var(--s21-line);
	border-radius: var(--s21-radius);
	background: var(--s21-surface);
	color: var(--s21-text) !important;
	font-size: var(--s21-fs-sm);
	font-weight: 600;
}

.woocommerce nav.woocommerce-pagination ul li a:hover { border-color: var(--s21-accent); color: var(--s21-accent) !important; }
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--s21-accent); border-color: var(--s21-accent); color: var(--s21-on-accent) !important; }

/* --------------------------------------------------------------------------
   14. Product rows / carousels inside the shop grid
   The front page rows reuse WooCommerce's `ul.products` markup so plugin loop
   hooks keep working. Those rules above would force a wrapped grid on them, so
   the carousel layout is re-asserted here with higher specificity
   (0,2,1 beats `ul.products` at 0,1,1 and `.woocommerce ul.products` at 0,2,1
   because this file loads after style.css).
   ----------------------------------------------------------------------- */

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

ul.products.s21-carousel__track > li.product { scroll-snap-align: start; }

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

.s21-carousel--static ul.products.s21-carousel__track,
.s21-carousel--static .woocommerce ul.products.s21-carousel__track {
	grid-auto-flow: row;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	overflow: visible;
	scroll-snap-type: none;
}

.s21-carousel__controls [hidden] { display: none !important; }
.s21-carousel__controls .s21-icon-btn[disabled] { opacity: 0.35; cursor: not-allowed; }

/* --------------------------------------------------------------------------
   15. Responsive shop rules
   ----------------------------------------------------------------------- */

@media (min-width: 768px) {
	/* Card width comes from --s21-card-min-w, not from a hardcoded column count,
	   so a shop archive and a front-page row show the same sized products. */
	.woocommerce ul.products { grid-template-columns: repeat(auto-fill, minmax(var(--s21-card-min-w), 1fr)); gap: var(--s21-card-row-gap) var(--s21-card-col-gap); }
	.s21-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.woocommerce table.cart img,
	.woocommerce-page table.cart img { width: 88px; }
	.s21-carousel--static ul.products.s21-carousel__track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.s21-toolbar { flex-wrap: nowrap; }
}

/* --------------------------------------------------------------------------
   16. Single product on desktop — the photo beside the buying information
   --------------------------------------------------------------------------
   Modelled on saxo.com/dk: a narrow light stage with the cover and a compact
   thumbnail strip on the left, the title and the buy box card on the right,
   description and "Andre købte også" full width underneath.

   Below 900px none of this applies — phones keep the stacked layout (photo on
   top, then title, price and the sticky "Læg i kurv" bar) exactly as before.
   900px rather than 1024px is deliberate: a desktop browser at 150-200% UI
   scaling reports a 900-1024px viewport and would otherwise be served the
   phone layout on a wide monitor.

   Two columns come from an explicit grid. Every full-width child (notices,
   language flags, tabs, related, upsells, cross-sells, the widget area) is
   pinned to `grid-column: 1 / -1`, so the gallery and the summary are the only
   items that can share a row and the description can never be painted over the
   thumbnails. That only holds because the gallery box is now exactly as tall as
   its content — see the .flex-viewport fix in section 5, which is what let the
   old auto-placed grid overlap in the first place.
   ----------------------------------------------------------------------- */

@media (min-width: 900px) {
	.single-product div.product {
		display: grid;
		grid-template-columns: minmax(0, var(--s21-single-gallery-w)) minmax(0, 1fr);
		column-gap: var(--s21-space-7);
		row-gap: 0;
		align-items: start;
	}

	.single-product div.product > .woocommerce-notices-wrapper,
	.single-product div.product > .woocommerce-tabs,
	.single-product div.product > .related,
	.single-product div.product > .up-sells,
	.single-product div.product > .cross-sells,
	.single-product div.product > .s21-product-below { grid-column: 1 / -1; min-width: 0; }

	/* The language flags need no rule of their own here: section 3 already spans
	   them across both columns (`grid-column: 1 / -1`) and keeps the pill at its
	   natural width with `justify-self: start`. That only works in a grid — as an
	   ordinary *flex* item the flags ate 124px of the photo column's line and
	   pushed the summary onto the next row, so the photo sat *above* the buying
	   information on every product carrying a "sprog" attribute. */

	.single-product div.product > .woocommerce-product-gallery {
		grid-column: 1;
		min-width: 0;
		width: 100% !important;
		margin: 0 0 var(--s21-space-6);
	}

	.single-product div.product > .summary {
		grid-column: 2;
		min-width: 0;
		max-width: var(--s21-single-summary-max);
		margin: 0 0 var(--s21-space-6);
	}

	/* The buy box becomes a card here, and only here. */
	.s21-buybox {
		display: flex;
		flex-direction: column;
		gap: var(--s21-space-4);
		margin-top: var(--s21-space-2);
		padding: var(--s21-space-5);
		background: var(--s21-surface);
		border: 1px solid var(--s21-line-soft);
		border-radius: var(--s21-radius-lg);
		box-shadow: var(--s21-shadow-sm);
	}

	/* Thumbnails: a compact strip under the cover instead of four wide tiles. */
	.single-product div.product .flex-control-thumbs { display: flex; flex-wrap: wrap; grid-template-columns: none; gap: var(--s21-space-2); }
	.single-product div.product .flex-control-thumbs li { flex: 0 0 auto; width: auto !important; }

	/* Woo core ships `.woocommerce div.product div.images img { width: 100% }`
	   at (0,3,3), which beats the theme's `width: auto` at (0,3,2). A tall cover
	   was therefore forced to the full stage width and then clamped by
	   max-height, leaving the element box wider than the artwork it draws —
	   object-fit: contain kept the pixels honest, but the zoom plugin measured
	   the wrong box and the click target spilled into empty white. These
	   body-scoped twins win on specificity and restore "scale down, never up",
	   so the box is the artwork. Scoped to the desktop breakpoint: phones keep
	   exactly the gallery metrics they have today. */
	body.woocommerce.single-product div.product .woocommerce-product-gallery__image img,
	body.woocommerce-page.single-product div.product .woocommerce-product-gallery__image img {
		width: auto;
		max-width: 100%;
		height: auto;
		max-height: var(--s21-gallery-image-max);
	}

	body.woocommerce.single-product div.product .flex-control-thumbs img,
	body.woocommerce-page.single-product div.product .flex-control-thumbs img {
		width: var(--s21-gallery-thumb);
		height: var(--s21-gallery-thumb);
	}

	/* The add-to-cart button is on screen in the right column, so the sticky
	   phone bar is redundant from this width up. */
	.s21-sticky-buy { display: none !important; }
}

@media (min-width: 1024px) {
	/* Sidebar first in the grid; the modifier class is printed server side
	   (shop21_wc_wrapper_start) so no :has() support is required. */
	.s21-shop-layout--sidebar { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--s21-space-7); align-items: start; }
	.s21-shop-layout--sidebar > .s21-shop-sidebar { grid-column: 1; grid-row: 1; }
	.s21-shop-layout--sidebar > .s21-shop-main { grid-column: 2; grid-row: 1; }
	.s21-shop-sidebar {
		position: sticky;
		top: calc(var(--s21-header-h) + var(--s21-catstrip-h) + var(--s21-space-4));
		width: auto;
		max-width: none;
		max-height: calc(100vh - var(--s21-header-h) - 8rem);
		overflow-y: auto;
		scrollbar-width: thin;
		padding: 0;
		background: none;
		border: 0;
		box-shadow: none;
		transform: none;
		visibility: visible;
	}

	.s21-shop-sidebar .s21-widget { background: var(--s21-surface); }
	.s21-filter-panel__head,
	.s21-filter-backdrop,
	.s21-filter-toggle { display: none !important; }

	/* The single product columns moved to the 900px block above. */

	.woocommerce .cart-collaterals { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--s21-space-7); align-items: start; }
	.woocommerce .cart-collaterals .cross-sells { grid-column: 1; }
	.woocommerce .cart-collaterals .cart_totals { grid-column: 2; grid-row: 1; }

	.s21-carousel--static ul.products.s21-carousel__track { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
	/* Woo prints columns-2/3/4 from the catalogue setting. Honouring it literally
	   gave 341px cards on a 1072px column (saxo.com uses ~246px), so the card
	   metric wins and the setting only affects how many items are looped in. */
	.woocommerce ul.products.columns-2,
	.woocommerce ul.products.columns-3,
	.woocommerce ul.products.columns-4,
	.woocommerce ul.products.columns-5,
	.woocommerce ul.products.columns-6 { grid-template-columns: repeat(auto-fill, minmax(var(--s21-card-min-w), 1fr)); }
	.s21-shop-layout--sidebar { grid-template-columns: 320px minmax(0, 1fr); }
}

/* Keep the fixed bars from covering content on small screens. */
@media (max-width: 1023px) {
	.woocommerce ul.products li.product .button { position: sticky; inset-block-end: 0; }
	body.s21-has-cartbar .woocommerce,
	body.s21-has-cartbar .site-main { padding-bottom: var(--s21-space-5); }
}

/* Reduced motion: no card lift, no image cross-fade. */
@media (prefers-reduced-motion: reduce) {
	.woocommerce ul.products li.product:hover { transform: none; }
	.woocommerce ul.products li.product img.s21-card__image-hover { transition: none; }
}

/* ==========================================================================
   17. Newsletter opt-in at checkout ("flueben")
   --------------------------------------------------------------------------
   MailPoet owns the control and the consent record. On the classic checkout it
   prints a WooCommerce checkbox label; on the block checkout it renders through
   mailpoet/marketing-optin-block, which WooCommerce mounts inside
   .wc-block-components-checkbox. The theme only makes it look and read like the
   rest of the shop, and keeps its own no-MailPoet fallback box identical.
   ========================================================================== */

.wc-block-components-checkbox,
.s21-checkout-newsletter__label,
.woocommerce-checkout label[data-automation-id='woo-commerce-subscription-opt-in'] {
	display: flex;
	align-items: flex-start;
	gap: var(--s21-space-3);
	margin: 0 0 var(--s21-space-2);
	padding: 0;
	color: var(--s21-text-muted);
	font-size: var(--s21-fs-sm);
	font-weight: 400;
	line-height: 1.55;
	cursor: pointer;
}

/*
 * WooCommerce Blocks sets appearance:none on these inputs and paints its own
 * checkmark with a ::after background image. On a dark theme that mark never
 * reaches the element, so a ticked box looks exactly like an empty one — the
 * shopper cannot see their own consent. Restoring the native box plus
 * accent-color gives one predictable, brand yellow checkmark in every modern
 * browser, matching the classic checkout and the footer newsletter box.
 * Specificity is deliberately high: the block CSS can load after the theme.
 */
body .wc-block-checkout .wc-block-components-checkbox input[type='checkbox'],
body .wc-block-cart .wc-block-components-checkbox input[type='checkbox'],
body .wc-block-components-form .wc-block-components-checkbox input[type='checkbox'],
.s21-checkout-newsletter input[type='checkbox'],
.woocommerce-checkout label[data-automation-id='woo-commerce-subscription-opt-in'] input[type='checkbox'],
.woocommerce-checkout label[data-automation-id='woo-commerce-tracking-consent'] input[type='checkbox'] {
	appearance: auto;
	-webkit-appearance: checkbox;
	accent-color: var(--s21-accent);
	flex: none;
	width: 22px;
	height: 22px;
	min-width: 22px;
	min-height: 22px;
	margin: 1px 0 0;
	padding: 0;
	background: var(--s21-surface-2);
	border: 1px solid var(--s21-line);
	border-radius: var(--s21-radius-sm);
	box-shadow: none;
	cursor: pointer;
}

body .wc-block-checkout .wc-block-components-checkbox input[type='checkbox']::after,
body .wc-block-cart .wc-block-components-checkbox input[type='checkbox']::after,
.s21-checkout-newsletter input[type='checkbox']::after { content: none; display: none; }

body .wc-block-checkout .wc-block-components-checkbox input[type='checkbox']:focus-visible,
body .wc-block-cart .wc-block-components-checkbox input[type='checkbox']:focus-visible,
.s21-checkout-newsletter input[type='checkbox']:focus-visible,
.woocommerce-checkout label[data-automation-id='woo-commerce-subscription-opt-in'] input[type='checkbox']:focus-visible {
	outline: 2px solid var(--s21-accent);
	outline-offset: 2px;
}

/* Copy: MailPoet renders its message inside the checkbox component. */
.wc-block-components-checkbox__label,
.s21-checkout-newsletter__text,
.woocommerce-checkout label[data-automation-id='woo-commerce-subscription-opt-in'] span {
	flex: 1 1 auto;
	margin: 0;
	color: var(--s21-text-muted);
	font-size: var(--s21-fs-sm);
	font-weight: 400;
	line-height: 1.55;
}

/* The theme's own fallback box (only rendered when MailPoet is absent). */
.s21-checkout-newsletter {
	width: 100%;
	margin: var(--s21-space-4) 0;
	padding: var(--s21-space-3) var(--s21-space-4);
	background: var(--s21-surface-2);
	border: 1px solid var(--s21-line);
	border-radius: var(--s21-radius);
}

.s21-checkout-newsletter__consent {
	margin: var(--s21-space-2) 0 0;
	color: var(--s21-text-dim);
	font-size: var(--s21-fs-xs);
	line-height: 1.5;
}

/* MailPoet's own wrapper class (used by its editor CSS; kept for safety). */
.wc-block-checkout__marketing { width: 100%; margin: var(--s21-space-3) 0; }