/**
 * Block styles — loaded on the front end AND inside the block editor
 * (see add_editor_style() in functions.php). Anything that decides how a
 * block looks belongs in this file, never in style.css, so the two contexts
 * can never drift apart.
 */

/* --------------------------------------------------------------
 * Buttons
 * ----------------------------------------------------------- */
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	background-color: var(--svk-primary);
	color: var(--svk-on-primary, #fff);
	border: 0;
	border-radius: var(--svk-radius);
	padding: .72rem 1.35rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.wp-block-button__link:hover,
.wp-block-button__link:focus {
	background-color: var(--svk-primary-dark);
	color: var(--svk-on-primary, #fff);
	transform: translateY(-1px);
}

/* The affiliate money button: warm, heavy, unmistakable. */
.wp-block-button.is-style-svk-cta .wp-block-button__link {
	background-color: var(--svk-secondary);
	color: var(--svk-on-secondary, #1e1f36);
	font-size: 1.05rem;
	font-weight: 700;
	padding: .95rem 1.9rem;
	box-shadow: 0 3px 0 0 var(--svk-secondary-dark);
}
.wp-block-button.is-style-svk-cta .wp-block-button__link:hover,
.wp-block-button.is-style-svk-cta .wp-block-button__link:focus {
	background-color: var(--svk-secondary-dark);
	box-shadow: 0 2px 0 0 var(--svk-secondary-dark);
}

.wp-block-button.is-style-svk-ghost .wp-block-button__link {
	background-color: transparent;
	color: var(--svk-primary);
	border: 2px solid var(--svk-border);
	box-shadow: none;
}
.wp-block-button.is-style-svk-ghost .wp-block-button__link:hover {
	background-color: var(--svk-primary-light);
	color: var(--svk-primary);
}

.wp-block-buttons { gap: .75rem; }

/* --------------------------------------------------------------
 * Group boxes: review card, tip, warning
 * ----------------------------------------------------------- */
.wp-block-group.is-style-svk-review-card {
	background: var(--svk-surface);
	border: 1px solid var(--svk-border);
	border-top: 4px solid var(--svk-secondary);
	border-radius: var(--svk-radius-lg);
	padding: clamp(1.25rem, 3vw, 1.9rem);
	margin-block: 2rem;
}
.wp-block-group.is-style-svk-review-card > :last-child { margin-bottom: 0; }

.wp-block-group.is-style-svk-tip,
.wp-block-group.is-style-svk-warning {
	border-radius: 0 var(--svk-radius) var(--svk-radius) 0;
	padding: 1.1rem 1.35rem;
	margin-block: 1.75rem;
}
.wp-block-group.is-style-svk-tip {
	background: var(--svk-primary-light);
	border-left: 4px solid var(--svk-primary);
}
.wp-block-group.is-style-svk-warning {
	background: #fbf3e2;
	border-left: 4px solid var(--svk-secondary);
}
.wp-block-group.is-style-svk-tip > :last-child,
.wp-block-group.is-style-svk-warning > :last-child { margin-bottom: 0; }

/* --------------------------------------------------------------
 * Star rating
 *
 * Real ★ glyphs clipped by a gradient: the fill stops at --svk-rating.
 * Text rather than an empty element, because the editor's RichText strips
 * empty inline nodes — this survives editing. PHP sets the property inline,
 * patterns set it with a .svk-stars--NN class.
 * ----------------------------------------------------------- */
.svk-stars {
	--svk-rating: 0%;
	display: inline-block;
	font-size: 1.15rem;
	line-height: 1.1;
	letter-spacing: .06em;
	white-space: nowrap;
	background-image: linear-gradient(90deg, var(--svk-secondary) var(--svk-rating), var(--svk-border) var(--svk-rating));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

/* Browsers without background-clip:text still get visible stars. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
	.svk-stars {
		color: var(--svk-secondary);
		-webkit-text-fill-color: currentColor;
		background-image: none;
	}
}

.svk-stars--0  { --svk-rating: 0%; }
.svk-stars--05 { --svk-rating: 10%; }
.svk-stars--1  { --svk-rating: 20%; }
.svk-stars--15 { --svk-rating: 30%; }
.svk-stars--2  { --svk-rating: 40%; }
.svk-stars--25 { --svk-rating: 50%; }
.svk-stars--3  { --svk-rating: 60%; }
.svk-stars--35 { --svk-rating: 70%; }
.svk-stars--4  { --svk-rating: 80%; }
.svk-stars--45 { --svk-rating: 90%; }
.svk-stars--5  { --svk-rating: 100%; }

.svk-rating {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
}
.svk-stars__value {
	font-size: .95rem;
	font-weight: 700;
	color: var(--svk-text);
}
.svk-rating__count {
	font-size: .8rem;
	color: #3f8a70;
}

/* --------------------------------------------------------------
 * Disclaimer with hover / click tooltip
 *
 * Text comes from Customizer → Affiliate & disclosure → in-post disclosure,
 * so the wording is maintained in one place. Opens on hover, on keyboard
 * focus and on click (see assets/js/navigation.js).
 * ----------------------------------------------------------- */
.svk-disclaimer {
	position: relative;
	display: inline-block;
	vertical-align: middle;
}
.svk-disclaimer__trigger {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	font-size: .78rem;
	font-style: italic;
	line-height: 1.4;
	color: var(--svk-text-muted);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
	transition: color .18s ease;
}
.svk-disclaimer__trigger:hover,
.svk-disclaimer__trigger:focus-visible {
	background: none;
	color: var(--svk-primary);
	transform: none;
}
.svk-disclaimer__icon {
	display: inline-flex;
	flex: 0 0 auto;
}
.svk-disclaimer__icon svg {
	width: 14px;
	height: 14px;
	fill: var(--svk-primary);
}

.svk-disclaimer__card {
	position: absolute;
	bottom: calc(100% + .6rem);
	left: 0;
	z-index: 999;
	width: max-content;
	max-width: min(24rem, calc(100vw - 1.5rem));
	padding: .95rem 1.15rem;
	background: #fff;
	color: var(--svk-text);
	border: 1px solid var(--svk-border);
	border-radius: var(--svk-radius);
	box-shadow: var(--svk-shadow-lg, 0 6px 30px rgba(35, 36, 61, .18));
	font-size: .82rem;
	font-style: normal;
	font-weight: 400;
	line-height: 1.6;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;

	/* Long URLs and Danish compounds break inside the card, never through it. */
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: none;
	white-space: normal;

	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

/* navigation.js switches the card to fixed while it is open: fixed elements
   escape ancestor overflow, which is what stopped the card being clipped by
   the product card, the carousel and the hero. Width/top/left come from JS. */
.svk-disclaimer__card.is-floating {
	position: fixed;
	bottom: auto;
	max-width: none;
}

.svk-disclaimer__card::after {
	content: "";
	position: absolute;
	top: 100%;
	left: var(--svk-arrow-left, 1.15rem);
	border: 7px solid transparent;
	border-top-color: #fff;
	filter: drop-shadow(0 1px 0 var(--svk-border));
}
.svk-disclaimer:hover .svk-disclaimer__card,
.svk-disclaimer:focus-within .svk-disclaimer__card,
.svk-disclaimer__trigger[aria-expanded="true"] + .svk-disclaimer__card {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* Flip the card below the trigger when it would run off the top. */
.svk-disclaimer--below .svk-disclaimer__card {
	bottom: auto;
	top: calc(100% + .6rem);
}
.svk-disclaimer--below .svk-disclaimer__card::after {
	top: auto;
	bottom: 100%;
	border-top-color: transparent;
	border-bottom-color: #fff;
}

/* --------------------------------------------------------------
 * Product CTA card
 * ----------------------------------------------------------- */
.svk-product-card {
	background: #fff;
	border: 1px solid var(--svk-border);

	/* Accent bar across the top of every CTA card, matching the hero card. */
	border-top: 5px solid var(--svk-secondary);
	border-radius: var(--svk-radius-lg);
	box-shadow: var(--svk-shadow, 0 4px 16px rgba(35, 36, 61, .07));
	margin-block: 2rem;
	padding: 0;

	/* Not overflow:hidden — that clipped the disclaimer tooltip. The media
	   panel carries its own matching corners instead. */
	overflow: visible;
}

.svk-product-card .svk-product-card__inner {
	gap: 0;
	margin-bottom: 0;
	align-items: stretch;
}

.svk-product-card .svk-product-card__media {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--svk-primary-light);
	padding: clamp(1.1rem, 3vw, 1.9rem);
}
.svk-product-card__media .wp-block-image,
.svk-product-card__media figure {
	margin: 0;
	width: 100%;
}
/**
 * A definite height plus object-fit:contain, rather than height:auto with a
 * max-height. With height:auto a wide source renders as a short strip and a
 * tall one as a sliver — the "compacted" look. A fixed box lets every product
 * fill as much of it as its own ratio allows, undistorted and centred, and
 * makes cards line up with each other in a carousel.
 */
.svk-product-card__media img {
	display: block;
	width: 100%;
	height: 13rem;
	object-fit: contain;
	object-position: center;
	border-radius: 0;
	mix-blend-mode: multiply;
}

.svk-product-card .svk-product-card__body {
	padding: clamp(1.15rem, 3vw, 1.9rem);
}
.svk-product-card__body > :last-child { margin-bottom: 0; }

.svk-product-card__badge {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0 0 .75rem;
	font-size: .76rem;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: .045em;
	text-transform: uppercase;
	color: #3f8a70;
}
.svk-product-card__badge::before {
	content: "\2605";
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.4rem;
	height: 1.4rem;
	border-radius: 50%;
	background: #3f8a70;
	color: #fff;
	font-size: .78rem;
	line-height: 1;
}

.svk-product-card__title {
	margin: 0 0 .65rem;
	font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem);
	line-height: 1.25;
	color: var(--svk-text);
}

.svk-product-card__price {
	margin: 0 0 1.1rem;
	font-size: 1.02rem;
	color: var(--svk-text-muted);
}
.svk-product-card__price strong {
	color: var(--svk-primary);
	font-size: 1.15em;
}

.svk-product-card .svk-product-card__action {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .85rem 1.5rem;
	margin-bottom: .5rem;
}
.svk-product-card__action .wp-block-buttons { margin: 0; }

.svk-product-card__rating {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .1rem .45rem;
	margin: 0;
}
.svk-product-card__rating .svk-rating__count { flex-basis: 100%; }

.svk-product-card__disclaimer { margin: 0; }

/* Server-rendered cards (Produkt-CTA block, shortcode, carousel, hero) use a
   plain div for __inner rather than a columns block, so it needs its own
   flex declaration. The pattern version inherits it from .wp-block-columns. */
.svk-product-card--split > .svk-product-card__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}
.svk-product-card--split > .svk-product-card__inner > .svk-product-card__media {
	flex: 0 0 34%;
}
.svk-product-card--split > .svk-product-card__inner > .svk-product-card__body {
	flex: 1 1 19rem;
}
.svk-product-card--stacked > .svk-product-card__inner {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.svk-product-card__brand {
	margin: -.35rem 0 .6rem;
	font-size: .82rem;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--svk-text-muted);
}
.svk-product-card__desc {
	margin: 0 0 1rem;
	font-size: .95rem;
	color: var(--svk-text-muted);
}

/* --------------------------------------------------------------
 * Optional product metadata rows (toggled per block)
 * ----------------------------------------------------------- */
.svk-product-card__meta {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .35rem;
	font-size: .9rem;
	color: var(--svk-text-muted);
}
.svk-product-card__meta li {
	display: flex;
	align-items: baseline;
	gap: .45rem;
	margin: 0;
	padding: 0;
	border: 0;
}
.svk-product-card__meta .svk-meta-label {
	font-weight: 600;
	color: var(--svk-text);
}

.svk-product-card__stock {
	font-weight: 600;
	color: #3f8a70;
}
.svk-stock-dot {
	flex: 0 0 auto;
	width: .6rem;
	height: .6rem;
	border-radius: 50%;
	background: #4fae8e;
	box-shadow: 0 0 0 3px rgba(34, 163, 76, .18);
	align-self: center;
}

.svk-product-card__warning {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	margin: 0 0 1rem;
	padding: .6rem .8rem;
	background: #fbf3e2;
	border-left: 3px solid var(--svk-secondary);
	border-radius: 0 var(--svk-radius) var(--svk-radius) 0;
	font-size: .85rem;
	line-height: 1.5;
	color: var(--svk-text);
}
.svk-product-card__warning svg {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	margin-top: .12rem;
	fill: var(--svk-secondary-dark);
}

.svk-carousel__heading { margin-bottom: .5rem; }

/* --------------------------------------------------------------
 * Post grid / list block
 * ----------------------------------------------------------- */
.svk-post-grid { margin-block: 2rem; }
.svk-post-grid__heading { margin-top: 0; }

.svk-posts--list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.svk-posts--list .post-card {
	flex-direction: row;
	align-items: stretch;
}
.svk-posts--list .post-card__media {
	flex: 0 0 clamp(7rem, 26%, 13rem);
	aspect-ratio: auto;
}
.svk-posts--list .post-card__body { padding: 1rem 1.15rem; }
.svk-posts--list .post-card__title { font-size: 1.05rem; }

@media (max-width: 40rem) {
	.svk-posts--list .post-card { flex-direction: column; }
	.svk-posts--list .post-card__media {
		flex-basis: auto;
		aspect-ratio: 16 / 9;
	}
}

/* --------------------------------------------------------------
 * FAQ accordion
 *
 * Panels ship open in the HTML and are collapsed by navigation.js, so the
 * answers are present for readers and crawlers even without JavaScript.
 * ----------------------------------------------------------- */
.svk-faq {
	margin-block: 2rem;
	border: 1px solid var(--svk-border);
	border-radius: var(--svk-radius-lg);
	overflow: hidden;
}
.svk-faq__heading {
	margin: 0;
	padding: 1.1rem 1.35rem;
	background: var(--svk-surface);
	border-bottom: 1px solid var(--svk-border);
	font-size: 1.15rem;
}

.svk-faq__item + .svk-faq__item { border-top: 1px solid var(--svk-border); }

.svk-faq__question { margin: 0; font-size: inherit; }

.svk-faq__trigger {
	display: flex;
	align-items: center;
	gap: .85rem;
	width: 100%;
	padding: 1.05rem 1.35rem;
	background: transparent;
	color: var(--svk-primary);
	border: 0;
	border-radius: 0;
	font: inherit;
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.4;
	text-align: left;
	cursor: pointer;
}
.svk-faq__trigger:hover {
	background: var(--svk-primary-light);
	color: var(--svk-primary);
	transform: none;
}
.svk-faq__trigger-text { flex: 1 1 auto; }
.svk-faq__icon {
	flex: 0 0 auto;
	display: inline-flex;
}
.svk-faq__icon svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
	transition: transform var(--svk-transition);
}
.svk-faq__trigger[aria-expanded="true"] .svk-faq__icon svg { transform: rotate(180deg); }
.svk-faq__trigger[aria-expanded="true"] { background: var(--svk-primary-light); }

.svk-faq__panel {
	display: grid;
	grid-template-rows: 1fr;
	transition: grid-template-rows .3s ease, opacity .25s ease;
}
.svk-faq__panel-inner {
	min-height: 0;
	overflow: hidden;
	visibility: visible;
	transition: visibility 0s;
}

/**
 * Keyed off the panel's own aria-hidden, not off the trigger.
 *
 * The trigger lives inside an <h3> for heading semantics, so the panel is a
 * sibling of that heading — never of the button. `.svk-faq__trigger + .panel`
 * matched nothing, which is why the chevron rotated (descendant selector)
 * while the answer stayed open.
 */
.svk-faq__panel[aria-hidden="true"] {
	grid-template-rows: 0fr;
	opacity: 0;
}

/* Hide from tab order once the slide has finished, not during it. */
.svk-faq__panel[aria-hidden="true"] .svk-faq__panel-inner {
	visibility: hidden;
	transition: visibility 0s .3s;
}
/* Breathing room under the question, and a corner arrow marking the answer. */
.svk-faq__answer {
	position: relative;
	margin: 0;
	padding: .9rem 1.35rem 1.45rem 3.1rem;
	color: var(--svk-text);
}
.svk-faq__answer::before {
	content: "↳";
	position: absolute;
	left: 1.4rem;
	top: .8rem;
	color: var(--svk-secondary);
	font-size: 1.3rem;
	line-height: 1;
}
.svk-faq__answer > :last-child { margin-bottom: 0; }

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

/* Editor-side FAQ builder */
.svk-faq-editor__item {
	border: 1px solid var(--svk-border);
	border-radius: var(--svk-radius);
	padding: 1rem;
	margin-bottom: 1rem;
	background: #fff;
}
.svk-faq-editor__actions {
	display: flex;
	gap: .5rem;
	justify-content: flex-end;
}

/* Shown to editors only — an unconfigured block renders nothing for visitors. */
.svk-block-placeholder {
	padding: 1.25rem;
	border: 1px dashed var(--svk-border);
	border-radius: var(--svk-radius);
	background: var(--svk-surface);
	color: var(--svk-text-muted);
	font-size: .9rem;
	text-align: center;
}

/* Stacked variant — used inside the carousel, where columns are too cramped. */
.svk-product-card--stacked { display: flex; flex-direction: column; }
.svk-product-card--stacked .svk-product-card__media { padding: 1.15rem; }
.svk-product-card--stacked .svk-product-card__media img { height: 11rem; }
.svk-product-card--stacked .svk-product-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
.svk-product-card--stacked .svk-product-card__action { margin-top: auto; }

/* Rounded corners on the media panel, matching whichever side it sits on. */
.svk-product-card--split > .svk-product-card__inner > .svk-product-card__media {
	border-radius: var(--svk-radius-lg) 0 0 var(--svk-radius-lg);
}
.svk-product-card--stacked > .svk-product-card__inner > .svk-product-card__media {
	border-radius: var(--svk-radius-lg) var(--svk-radius-lg) 0 0;
}

/* --------------------------------------------------------------
 * Product card — mobile (< 768px)
 *
 * Below this width the split layout has nowhere useful to put a 34%
 * image column: it squeezed the photo into a sliver in the top-left and
 * crushed the text beside it. Everything becomes one column.
 * ----------------------------------------------------------- */
@media (max-width: 767px) {
	.svk-product-card { margin-block: 1.5rem; }

	/* Legacy pattern markup (columns block). */
	.svk-product-card .svk-product-card__inner { flex-wrap: wrap; }
	.svk-product-card .svk-product-card__inner > .wp-block-column {
		flex-basis: 100% !important;
	}

	/* Server-rendered cards. */
	.svk-product-card--split > .svk-product-card__inner {
		flex-direction: column;
	}
	.svk-product-card--split > .svk-product-card__inner > .svk-product-card__media,
	.svk-product-card--split > .svk-product-card__inner > .svk-product-card__body {
		flex: 0 0 auto;
		width: 100%;
	}
	.svk-product-card--split > .svk-product-card__inner > .svk-product-card__media {
		border-radius: var(--svk-radius-lg) var(--svk-radius-lg) 0 0;
	}

	/* Centred, breathing room, and a fixed aspect box so tall and wide
	   product shots both sit the same way instead of jumping the layout. */
	.svk-product-card .svk-product-card__media {
		justify-content: center;
		padding: 1.5rem 1.25rem;
	}
	.svk-product-card__media .wp-block-image,
	.svk-product-card__media figure { width: 100%; }
	.svk-product-card__media img {
		display: block;
		width: 100%;
		max-width: 20rem;
		height: 13rem;
		object-fit: contain;
		margin-inline: auto;
	}

	.svk-product-card .svk-product-card__body { padding: 1.35rem 1.25rem 1.5rem; }

	.svk-product-card__badge { font-size: .72rem; }
	.svk-product-card__title { font-size: 1.3rem; }
	.svk-product-card__price { margin-bottom: 1.25rem; }

	/* Stack the action row: full-width, thumb-friendly CTA above the rating. */
	.svk-product-card .svk-product-card__action {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: .9rem;
	}
	.svk-product-card__action .svk-btn--cta,
	.svk-product-card__action .wp-block-button,
	.svk-product-card__action .wp-block-button__link {
		display: flex;
		width: 100%;
		min-height: 3rem;
		text-align: center;
	}
	.svk-product-card__action .wp-block-buttons { width: 100%; }

	.svk-product-card__rating { justify-content: flex-start; }
	.svk-product-card__disclaimer { margin-top: .35rem; }
	.svk-product-card__meta { width: 100%; }
}

/* --------------------------------------------------------------
 * Product carousel (native scroll-snap, no library)
 * ----------------------------------------------------------- */
/**
 * Two DOM shapes have to work identically:
 *
 *   editor / block themes   .svk-carousel > .svk-product-card
 *   front end (this theme)  .svk-carousel > .wp-block-group__inner-container
 *                                          > .svk-product-card
 *
 * WordPress adds that inner container back for themes without a theme.json
 * (wp_restore_group_inner_container). So the scroll track is declared on both
 * the group and the inner container, and the inner container is told to fill
 * its parent rather than behave like a slide.
 */
.svk-carousel,
.wp-block-group.is-style-svk-carousel,
.svk-carousel > .wp-block-group__inner-container,
.wp-block-group.is-style-svk-carousel > .wp-block-group__inner-container {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 1.25rem;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: thin;
	scrollbar-color: var(--svk-border) transparent;
}

.svk-carousel,
.wp-block-group.is-style-svk-carousel {
	padding: .25rem .25rem 1rem;
	margin-block: 2rem;
}

/* The wrapper is a full-width flex line, never a slide. */
.svk-carousel > .wp-block-group__inner-container,
.wp-block-group.is-style-svk-carousel > .wp-block-group__inner-container {
	flex: 1 1 100%;
	min-width: 0;
	padding-bottom: .75rem;
}

/* Slides. Targeted by card class and by generic child of the inner container,
   so both DOM shapes size correctly without relying on `> *` at the top level. */
.svk-carousel > .svk-product-card,
.svk-carousel > .post-card,
.svk-carousel > .wp-block-group,
.svk-carousel > .wp-block-column,
.svk-carousel > .wp-block-group__inner-container > *,
.svk-carousel--dynamic > *,
.wp-block-group.is-style-svk-carousel > .svk-product-card,
.wp-block-group.is-style-svk-carousel > .wp-block-group__inner-container > * {
	flex: 0 0 clamp(15rem, 76vw, 20.5rem);
	scroll-snap-align: start;
	margin-block: 0;
}

/* Post cards as slides: equal height, and the hover lift would otherwise
   clip against the scroll container. */
.svk-carousel--posts > .post-card { height: auto; }
.svk-carousel--posts > .post-card:hover { transform: none; }

.svk-carousel::-webkit-scrollbar,
.svk-carousel > .wp-block-group__inner-container::-webkit-scrollbar { height: 6px; }
.svk-carousel::-webkit-scrollbar-track,
.svk-carousel > .wp-block-group__inner-container::-webkit-scrollbar-track { background: transparent; }
.svk-carousel::-webkit-scrollbar-thumb,
.svk-carousel > .wp-block-group__inner-container::-webkit-scrollbar-thumb {
	background: var(--svk-border);
	border-radius: 999px;
}

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

/* Wrapper + arrows are injected by navigation.js only when the track
   actually overflows, so a two-card carousel on desktop stays clean. */
.svk-carousel-wrap { position: relative; }
.svk-carousel__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid var(--svk-border);
	border-radius: 50%;
	background: #fff;
	color: var(--svk-primary);
	box-shadow: var(--svk-shadow-lg, 0 6px 30px rgba(35, 36, 61, .18));
	cursor: pointer;
	transition: opacity .18s ease, background .18s ease;
}
.svk-carousel__nav:hover {
	background: var(--svk-primary-light);
	color: var(--svk-primary);
	transform: translateY(-50%);
}
.svk-carousel__nav svg { width: 20px; height: 20px; fill: currentColor; }
.svk-carousel__nav--prev { left: -.75rem; }
.svk-carousel__nav--next { right: -.75rem; }
.svk-carousel__nav[disabled] {
	opacity: 0;
	pointer-events: none;
}

@media (max-width: 48rem) {
	.svk-carousel__nav { display: none; }
}

/* --------------------------------------------------------------
 * Tables
 * ----------------------------------------------------------- */
/**
 * Default table styling — no block style needed. Card-like container with a
 * branded header row, zebra rows and a hover highlight, and it scrolls
 * sideways on narrow screens rather than crushing the columns.
 */
/**
 * Every rule below is written as `.wp-block-table table …` (0,1,2) rather than
 * `.wp-block-table td` (0,1,1). That beats both WordPress core's block-library
 * defaults and the generic `th, td` element rules in style.css.
 *
 * The specificity matters for editor parity, not tidiness: style.css is not
 * loaded inside the editor canvas, so any `.wp-block-table` styling that
 * relies on losing-or-winning against those element rules renders one way on
 * the front end and another way while editing.
 */
.wp-block-table {
	/* hidden clips the header's background to the radius; -x auto still
	   scrolls sideways on narrow screens. */
	overflow: hidden;
	overflow-x: auto;
	border: 1px solid var(--svk-border);
	border-radius: var(--svk-radius-lg);
	box-shadow: var(--svk-shadow, 0 4px 16px rgba(35, 36, 61, .07));
	margin-block: 2rem;
	padding: 0;
}

.wp-block-table table {
	border-collapse: separate;
	border-spacing: 0;
	border: 0;
	width: 100%;
	/* Below this the columns become unreadable; scroll instead of squeeze. */
	min-width: 34rem;
	font-size: .95rem;
	background: transparent;

	/* The inherited `table { margin: 0 0 1.35rem }` left a dead strip of
	   space below the last row, inside the bordered container. */
	margin: 0;
}

/* Horizontal rules only — vertical lines make a four-column table look like
   a spreadsheet. Padding and the bold first column carry the structure. */
.wp-block-table table th,
.wp-block-table table td {
	border: 0;
	border-top: 1px solid var(--svk-border);
	padding: .85rem 1.1rem;
	text-align: left;
	vertical-align: top;
	line-height: 1.55;
	background: transparent;
}

.wp-block-table table thead th {
	background: var(--svk-primary);
	color: #fff;
	border-top: 0;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	white-space: nowrap;
}

.wp-block-table table tbody tr:nth-child(even) td { background: var(--svk-surface); }
.wp-block-table table tbody tr:hover td { background: var(--svk-primary-light); }

/* First cell reads as the row's label. */
.wp-block-table table tbody td:first-child {
	font-weight: 700;
	color: var(--svk-primary);
}

.wp-block-table table tfoot td {
	background: var(--svk-surface);
	font-weight: 600;
}

.wp-block-table figcaption {
	padding: .75rem 1.1rem;
	margin: 0;
	background: var(--svk-surface);
	border-top: 1px solid var(--svk-border);
	font-size: .82rem;
	text-align: left;
	color: var(--svk-text-muted);
}
.wp-block-table figcaption:empty { display: none; }

/* Core's stripes variant, re-expressed so it lands on the cells. */
.wp-block-table.is-style-stripes table tbody tr:nth-child(odd) td { background: var(--svk-surface); }
.wp-block-table.is-style-stripes table tbody tr:nth-child(even) td { background: transparent; }

/* Comparison table: sticky-feeling header, zebra rows, tap-friendly on mobile. */
/**
 * Sammenligningstabel is now a delta on top of the default table, not a copy
 * of it: the default already carries the container, borders and zebra. This
 * variant only swaps the header to the accent colour so a product comparison
 * reads differently from an ordinary data table.
 */
.wp-block-table.is-style-svk-comparison table thead th {
	background: var(--svk-secondary);
	color: var(--svk-on-secondary, #1e1f36);
}

/* --------------------------------------------------------------
 * Lists
 * ----------------------------------------------------------- */
.wp-block-list.is-style-svk-checklist,
.wp-block-list.is-style-svk-pros,
.wp-block-list.is-style-svk-cons {
	list-style: none;
	padding-left: 0;
}
.wp-block-list.is-style-svk-checklist li,
.wp-block-list.is-style-svk-pros li,
.wp-block-list.is-style-svk-cons li {
	position: relative;
	padding-left: 1.85rem;
	margin-bottom: .55rem;
}
.wp-block-list.is-style-svk-checklist li::before,
.wp-block-list.is-style-svk-pros li::before,
.wp-block-list.is-style-svk-cons li::before {
	position: absolute;
	left: 0;
	top: .05em;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .85rem;
	font-weight: 700;
	line-height: 1;
}
.wp-block-list.is-style-svk-checklist li::before {
	content: "\2713";
	background: var(--svk-primary-light);
	color: var(--svk-primary);
}
.wp-block-list.is-style-svk-pros li::before {
	content: "\002B";
	background: #e2f2ec;
	color: #3f8a70;
}
.wp-block-list.is-style-svk-cons li::before {
	content: "\2212";
	background: #fde8e8;
	color: #b5322f;
}

/* --------------------------------------------------------------
 * Quotes, images, separators, embeds
 * ----------------------------------------------------------- */
.wp-block-quote {
	border-left: 4px solid var(--svk-secondary);
	background: var(--svk-surface);
	padding: 1rem 1.35rem;
	border-radius: 0 var(--svk-radius) var(--svk-radius) 0;
}
.wp-block-quote.is-style-svk-verdict {
	border-left: 0;
	background: var(--svk-primary);
	color: #fff;
	border-radius: var(--svk-radius-lg);
	padding: 1.5rem 1.75rem;
	font-size: 1.1rem;
}
.wp-block-quote.is-style-svk-verdict cite { color: rgba(255, 255, 255, .8); }

.wp-block-image img { border-radius: var(--svk-radius); }
.wp-block-image.is-style-svk-rounded img { border-radius: var(--svk-radius-lg); }
.wp-block-image figcaption {
	font-size: .85rem;
	color: var(--svk-text-muted);
	text-align: center;
}

.wp-block-separator {
	border: 0;
	border-top: 2px solid var(--svk-border);
	max-width: 6rem;
	margin-inline: auto;
	opacity: 1;
}
.wp-block-separator.is-style-wide { max-width: 100%; border-top-width: 1px; }

.wp-block-embed figcaption { font-size: .85rem; color: var(--svk-text-muted); text-align: center; }

.wp-block-code {
	background: var(--svk-primary-dark);
	color: #e6eef5;
	border-radius: var(--svk-radius);
	padding: 1.15rem;
	border: 0;
}

.wp-block-pullquote {
	border-top: 3px solid var(--svk-secondary);
	border-bottom: 3px solid var(--svk-secondary);
	padding: 1.75rem 0;
}

.wp-block-cover { border-radius: var(--svk-radius-lg); overflow: hidden; }

.wp-block-columns { gap: clamp(1.25rem, 3vw, 2rem); }

/* --------------------------------------------------------------
 * Pros/cons columns (pattern + review box use the same markup)
 * ----------------------------------------------------------- */
.svk-proscons {
	display: grid;
	gap: 1rem 1.75rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	margin-block: 1.25rem;
}
.svk-proscons__title {
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .07em;
	margin: 0 0 .5rem;
}
.svk-proscons__col--pro .svk-proscons__title { color: #3f8a70; }
.svk-proscons__col--con .svk-proscons__title { color: #b5322f; }
.svk-proscons__col ul {
	list-style: none;
	padding-left: 0;
	margin: 0;
	font-size: .93rem;
}
.svk-proscons__col li {
	position: relative;
	padding-left: 1.5rem;
	margin-bottom: .4rem;
}
.svk-proscons__col li::before {
	position: absolute;
	left: 0;
	font-weight: 700;
}
.svk-proscons__col--pro li::before { content: "+"; color: #3f8a70; }
.svk-proscons__col--con li::before { content: "\2212"; color: #b5322f; }

/* --------------------------------------------------------------
 * Typography-related block bits
 * ----------------------------------------------------------- */
.has-small-font-size { font-size: 14px; }
.has-normal-font-size { font-size: 17px; }
.has-medium-font-size { font-size: 20px; }
.has-large-font-size { font-size: 26px; line-height: 1.3; }
.has-huge-font-size { font-size: 36px; line-height: 1.2; }

.has-drop-cap:not(:focus)::first-letter {
	font-size: 3.4em;
	line-height: .78;
	font-weight: 700;
	color: var(--svk-primary);
	margin: .07em .12em 0 0;
}

/* --------------------------------------------------------------
 * Homepage: shared section furniture
 * ----------------------------------------------------------- */
.svk-section__title {
	margin: 0 0 .5rem;
	font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
}
.svk-section__intro {
	margin: 0 0 1.75rem;
	max-width: 44rem;
	color: var(--svk-text-muted);
}

/* --------------------------------------------------------------
 * Homepage: hero banner
 * ----------------------------------------------------------- */
.svk-home-hero {
	position: relative;
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	margin-bottom: clamp(2rem, 5vw, 3.5rem);
	padding-block: clamp(3rem, 8vw, 6rem);
	background: var(--svk-primary);
	color: #fff;
	isolation: isolate;
	overflow: hidden;
}
.svk-home-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}
.svk-home-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.svk-home-hero--image::before,
.svk-home-hero--plain::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
}
.svk-home-hero--image::before {
	background:
		linear-gradient(105deg, rgba(20, 21, 44, .94) 0%, rgba(20, 21, 44, .84) 48%, rgba(20, 21, 44, .58) 100%),
		linear-gradient(to top, rgba(20, 21, 44, .5) 0%, rgba(20, 21, 44, 0) 55%);
}
.svk-home-hero--plain::before {
	background: linear-gradient(135deg, var(--svk-primary) 0%, var(--svk-primary-dark) 100%);
}

.svk-home-hero__inner { position: relative; }
.svk-home-hero__inner > * { max-width: 46rem; }

.svk-home-hero__eyebrow {
	margin: 0 0 .9rem;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--svk-secondary);
}
.svk-home-hero__title {
	margin: 0 0 1rem;
	color: #fff;
	font-size: clamp(2rem, 1.4rem + 3vw, 3.4rem);
	line-height: 1.1;
	letter-spacing: -.02em;
	text-shadow: 0 1px 24px rgba(0, 0, 0, .3);
}
.svk-home-hero__text {
	margin: 0 0 1.75rem;
	font-size: clamp(1rem, .96rem + .35vw, 1.2rem);
	color: rgba(255, 255, 255, .88);
}

.svk-home-hero__search { margin-bottom: 1.5rem; max-width: 34rem; }
.svk-home-hero__search .search-form { gap: .6rem; }
.svk-home-hero__search .search-field {
	min-height: 3.1rem;
	border: 0;
	border-radius: var(--svk-radius);
}
.svk-home-hero__search .search-submit {
	min-height: 3.1rem;
	padding-inline: 1.5rem;
	background: var(--svk-secondary);
	color: var(--svk-on-secondary, #1e1f36);
	font-weight: 700;
}
.svk-home-hero__search .search-submit:hover { background: var(--svk-secondary-dark); }

.svk-home-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .85rem;
	margin-bottom: 1.75rem;
}
.svk-home-hero__secondary {
	background: rgba(255, 255, 255, .12);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .45);
}
.svk-home-hero__secondary:hover {
	background: rgba(255, 255, 255, .2);
	color: #fff;
}

.svk-home-hero__links ul {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.svk-home-hero__links li { margin: 0; }
.svk-home-hero__links a {
	display: inline-block;
	padding: .4rem .95rem;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 999px;
	color: rgba(255, 255, 255, .92);
	font-size: .88rem;
	font-weight: 600;
	text-decoration: none;
	transition: background .18s ease, border-color .18s ease;
}
.svk-home-hero__links a:hover {
	background: var(--svk-secondary);
	border-color: var(--svk-secondary);
	color: var(--svk-on-secondary, #1e1f36);
}

/* --------------------------------------------------------------
 * Homepage: category tiles
 * ----------------------------------------------------------- */
.svk-cat-grid { margin-block: clamp(2rem, 5vw, 3.5rem); }

.svk-cat-grid__list {
	--svk-cols: 4;
	display: grid;
	gap: clamp(1rem, 2.5vw, 1.5rem);
	grid-template-columns: repeat(var(--svk-cols), minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}
.svk-cat-grid__list > li { margin: 0; }

.svk-cat-tile__link {
	position: relative;
	display: block;
	height: 100%;
	min-height: 11rem;
	border-radius: var(--svk-radius-lg);
	overflow: hidden;
	background: linear-gradient(160deg, var(--svk-primary) 0%, var(--svk-primary-dark) 100%);
	text-decoration: none;
	isolation: isolate;
	transition: transform .18s ease, box-shadow .18s ease;
}
.svk-cat-tile__link:hover {
	transform: translateY(-3px);
	box-shadow: var(--svk-shadow-lg, 0 6px 30px rgba(35, 36, 61, .18));
}

.svk-cat-tile__media { position: absolute; inset: 0; z-index: -2; }
.svk-cat-tile__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s ease;
}
.svk-cat-tile__link:hover .svk-cat-tile__media img { transform: scale(1.05); }

.svk-cat-tile__link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, rgba(20, 21, 44, .92) 12%, rgba(20, 21, 44, .45) 60%, rgba(20, 21, 44, .25) 100%);
}

.svk-cat-tile__body {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	flex-direction: column;
	gap: .2rem;
	padding: 1.1rem 1.15rem;
}
.svk-cat-tile__name {
	color: #fff;
	font-size: 1.08rem;
	font-weight: 700;
	line-height: 1.25;
}
.svk-cat-tile__count {
	color: rgba(255, 255, 255, .8);
	font-size: .82rem;
}

@media (max-width: 60rem) {
	.svk-cat-grid__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 30rem) {
	.svk-cat-grid__list { grid-template-columns: minmax(0, 1fr); }
	.svk-cat-tile__link { min-height: 9rem; }
}

/* --------------------------------------------------------------
 * Homepage: feature / trust row
 * ----------------------------------------------------------- */
.svk-features {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	margin-block: clamp(2rem, 5vw, 3.5rem);
	padding-block: clamp(2.25rem, 5vw, 3.5rem);
}
.svk-features--dark {
	background: linear-gradient(135deg, var(--svk-primary) 0%, var(--svk-primary-dark) 100%);
	color: #fff;
}
.svk-features--dark .svk-section__title { color: #fff; }
.svk-features--dark .svk-section__intro { color: rgba(255, 255, 255, .82); }
.svk-features--light { background: var(--svk-surface); }

.svk-features__list {
	display: grid;
	gap: clamp(1.25rem, 3vw, 2rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}
.svk-features__item { margin: 0; }

.svk-features__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.9rem;
	height: 2.9rem;
	margin-bottom: .85rem;
	border-radius: 50%;
	background: var(--svk-secondary);
	color: var(--svk-on-secondary, #1e1f36);
}
.svk-features__icon svg { width: 22px; height: 22px; fill: currentColor; }

.svk-features__title {
	margin: 0 0 .4rem;
	font-size: 1.08rem;
}
.svk-features--dark .svk-features__title { color: #fff; }

.svk-features__text {
	margin: 0;
	font-size: .93rem;
	line-height: 1.6;
}
.svk-features--dark .svk-features__text { color: rgba(255, 255, 255, .82); }
.svk-features--light .svk-features__text { color: var(--svk-text-muted); }

/* In the editor these sections sit inside a padded canvas, so the 100vw
   break-out would overflow. Keep them inside their block instead. */
.editor-styles-wrapper .svk-home-hero,
.editor-styles-wrapper .svk-features {
	width: auto;
	margin-inline: 0;
}