/*
 * OutdoorCabins – presentational CSS.
 *
 * Tokens come from theme.json and are consumed as --wp--preset--* and --wp--custom--*.
 * No framework, no jQuery. Keep this file small: measure before adding.
 *
 * Sections: base · utilities · header · hero and sections · cards (category, product, article)
 *           · pages and content sections · catalog and filters · product page · article
 *           · footer · WooCommerce tweaks
 */

/* --- Base ------------------------------------------------------------------ */

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: var(--wp--preset--spacing--60);
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img,
picture,
video {
	max-width: 100%;
	height: auto;
}

/* One always-visible focus treatment (WCAG 2.2 AA). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid #0b5cd5;
	outline-offset: 2px;
	border-radius: var(--wp--custom--radius--sm);
}

main:focus {
	outline: none;
}

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

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* WordPress injects the block-theme skip link ("Hopp til innhold") itself; the theme adds none. */

/* --- Utilities --------------------------------------------------------------- */

.oc-eyebrow,
.oc-eyebrow a {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-text);
	text-decoration: none;
	margin: 0;
}

.oc-eyebrow a:hover {
	text-decoration: underline;
}

.oc-main {
	padding-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--80);
}

.oc-home.oc-main,
.oc-landing.oc-main {
	padding-top: 0;
}

.oc-page-header {
	padding-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}

.oc-page-header h1 {
	margin-bottom: var(--wp--preset--spacing--20);
}

.oc-section {
	padding-block: var(--wp--preset--spacing--60);
}

.oc-section--tinted {
	background: var(--wp--preset--color--surface);
	padding-block: var(--wp--preset--spacing--70);
	margin-block: var(--wp--preset--spacing--20);
}

.oc-section__header {
	margin-bottom: var(--wp--preset--spacing--40);
}

.oc-section__header h2 {
	margin: 0;
}

.oc-section__link {
	margin: 0;
	font-weight: 600;
}

.oc-section__link a {
	color: var(--wp--preset--color--brand-text);
	text-decoration: none;
}

.oc-section__link a:hover,
.oc-section__link a:focus {
	text-decoration: underline;
}

/* --- Header ------------------------------------------------------------------ */

.oc-usp-bar {
	background: var(--wp--preset--color--bar);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--small);
	padding-block: var(--wp--preset--spacing--20);
}

.oc-usp-bar p {
	margin: 0;
}

/* The promises link to their conditions (shipping, sales terms). */
.oc-usp-bar a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.oc-usp-bar a:hover,
.oc-usp-bar a:focus {
	text-decoration-thickness: 2px;
}

/* Phones: all three promises on one line in the smaller size (owner 2026-10-14); an item the owner
   has not marked for phones (Utseende → Topp- og bunntekst) stays hidden there. */
@media (max-width: 37.49rem) {
	.oc-usp-bar {
		font-size: var(--wp--preset--font-size--x-small);
		padding-block: var(--wp--preset--spacing--10);
	}

	.oc-usp-bar p {
		text-wrap: balance;
	}

	.oc-usp-bar__extra {
		display: none;
	}
}

.oc-header {
	/* Height of the logo; the menu button below 75rem is centred on it. */
	--oc-logo-height: 2.75rem;
	background: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.oc-header__row {
	padding-block: var(--wp--preset--spacing--30);
	gap: var(--wp--preset--spacing--50);
}

/* The logo file is trimmed to the mark, so it lines up with the menu and page content. */
.oc-header__row .wp-block-site-logo img {
	display: block;
	width: auto;
	height: var(--oc-logo-height);
}

.oc-header__search {
	flex: 1 1 20rem;
	max-width: 40rem;
}

/* Checkout header (parts/checkout-header.html): logo, the phone number for questions, cart link. */
.oc-checkout-header {
	background: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.oc-checkout-header__row {
	padding-block: var(--wp--preset--spacing--30);
	gap: var(--wp--preset--spacing--30);
}

.oc-checkout-header__row .wp-block-site-logo img {
	display: block;
	width: auto;
	height: 2.75rem;
}

.oc-checkout-header__actions {
	gap: var(--wp--preset--spacing--30);
}

.oc-checkout-header__help {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
}

.oc-header__search .wp-block-search__inside-wrapper {
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--base);
	overflow: hidden;
}

.oc-header__search .wp-block-search__input {
	border: 0;
	padding: 0.65rem 1rem;
	font: inherit;
	background: transparent;
}

.oc-header__search .wp-block-search__button {
	margin: 0;
	border: 0;
	border-radius: 0;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--contrast);
	padding-inline: 1rem;
}

.oc-header__search .wp-block-search__button:hover {
	background: var(--wp--preset--color--brand-hover);
}

.oc-header__actions {
	gap: var(--wp--preset--spacing--30);
}

.oc-header__actions .wc-block-customer-account,
.oc-header__actions .wc-block-mini-cart {
	display: flex;
	align-items: center;
}

.oc-header__actions .wc-block-customer-account__account-icon,
.oc-header__actions .wc-block-mini-cart__button {
	color: var(--wp--preset--color--contrast);
}

.oc-header__actions .wc-block-mini-cart__badge {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--contrast);
	border: 0;
}

.oc-header__nav {
	border-top: 1px solid var(--wp--preset--color--border);
}

.oc-header__nav .wp-block-navigation {
	gap: var(--wp--preset--spacing--50);
}

.oc-header__nav .wp-block-navigation-item__content {
	display: inline-block;
	padding: var(--wp--preset--spacing--30) 0;
}

.oc-header__nav .wp-block-navigation__responsive-container-open {
	padding: var(--wp--preset--spacing--20) 0;
}

/*
 * Below 75rem the nine-item main menu no longer fits on one row. Wrapped onto two rows it
 * opened its drop-down panels off the page (the item a panel belongs to can sit at either end
 * of a row), so up to 75rem the header uses the Navigation block's overlay («Åpne meny»), not
 * only on phones. The menu button sits at the start of the logo row instead of on a row of
 * its own; the 44 px button is shifted so its icon lines up with the page edge.
 */
@media (min-width: 600px) and (max-width: 74.99rem) {
	.oc-header__nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.oc-header__nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

@media (max-width: 74.99rem) {
	.oc-header {
		position: relative;
	}

	/* Centred on the first row of the header: logo and account/cart icons (2.5rem) on phones,
	   the whole one-row header from 782px. The class pair beats the layout's block gap. */
	.oc-header > .oc-header__nav {
		position: absolute;
		inset-block-start: calc(var(--wp--preset--spacing--30) - 0.125rem);
		inset-inline-start: calc(var(--wp--style--root--padding-left, 1rem) - 0.625rem);
		block-size: 2.75rem;
		margin-block: 0;
		border-top: 0;
	}

	.oc-header__nav .wp-block-navigation__responsive-container-open,
	.oc-header__nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		align-items: center;
		justify-content: center;
		inline-size: 2.75rem;
		block-size: 2.75rem;
		padding: 0;
		border-radius: var(--wp--custom--radius--md);
	}

	.oc-header__nav .wp-block-navigation__responsive-container-open:hover {
		background: var(--wp--preset--color--surface);
	}

	.oc-header__row .wp-block-site-logo {
		margin-inline-start: 2.25rem;
	}
}

@media (min-width: 782px) and (max-width: 74.99rem) {
	.oc-header > .oc-header__nav {
		inset-block: 0;
		block-size: auto;
	}
}

/* Overlay menu: category names in bold, their subcategories as a quieter list under them. */
.oc-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	font-weight: 700;
}

.oc-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container {
	gap: 0;
	padding: 0 0 0 var(--wp--preset--spacing--40);
}

.oc-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	color: var(--wp--preset--color--contrast-muted);
}

/* Tablets and small laptops: the categories side by side in columns, not one very long list. */
@media (min-width: 600px) {
	.oc-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
		align-items: start;
		gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
		inline-size: 100%;
	}

	.oc-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container {
		padding: var(--wp--preset--spacing--10) 0 0;
	}
}

/* Desktop drop-down panels for the submenus (categories → subcategories). */
@media (min-width: 75rem) {
	.oc-header__nav .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
		padding: var(--wp--preset--spacing--30);
		margin-top: 0;
		border: 1px solid var(--wp--preset--color--border);
		border-radius: var(--wp--custom--radius--lg);
		box-shadow: var(--wp--preset--shadow--lg);
		background: var(--wp--preset--color--base);
	}

	/* The panel width only while it is open (the states in which WordPress shows it): a closed
	   panel keeps its hidden zero size, so the panels of the last menu items never widen the page. */
	.oc-header__nav .wp-block-navigation .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container,
	.oc-header__nav .wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container,
	.oc-header__nav .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
		min-width: 18rem;
	}

	/* The last two menu items open their panel towards the left, inside the page. */
	.oc-header__nav .wp-block-navigation__container > .has-child:nth-last-child(-n + 2) > .wp-block-navigation__submenu-container {
		left: auto;
		right: 0;
	}

	.oc-header__nav .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
		border-radius: var(--wp--custom--radius--sm);
		font-weight: 500;
	}

	.oc-header__nav .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
	.oc-header__nav .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
		background: var(--wp--preset--color--surface);
		text-decoration: none;
	}
}

/* Mobile overlay: white sheet, generous targets. */
.oc-header__nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--base);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

.oc-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	padding: var(--wp--preset--spacing--20) 0;
	font-size: var(--wp--preset--font-size--large);
}

@media (max-width: 781px) {
	.oc-header__row {
		flex-wrap: wrap;
		gap: var(--wp--preset--spacing--30);
	}

	.oc-header__search {
		order: 3;
		flex-basis: 100%;
		max-width: none;
	}

	.oc-header {
		--oc-logo-height: 2.25rem;
	}
}

/* --- Hero ---------------------------------------------------------------------- */

.oc-hero {
	background: var(--wp--preset--color--surface);
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
	margin-bottom: var(--wp--preset--spacing--20);
}

.oc-hero__columns {
	gap: var(--wp--preset--spacing--60);
}

.oc-hero__text h1 {
	margin-block: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
}

.oc-hero__text .wp-block-buttons {
	margin-top: var(--wp--preset--spacing--40);
}

.oc-hero__image {
	margin: 0;
}

.oc-hero__image img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--xl);
	box-shadow: var(--wp--preset--shadow--lg);
}

@media (max-width: 781px) {
	.oc-hero {
		padding-block: var(--wp--preset--spacing--50);
	}

	.oc-hero__columns {
		flex-direction: column-reverse;
	}
}

/* --- Category cards ----------------------------------------------------------- */

.oc-category-cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--40);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 782px) {
	.oc-category-cards--cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.oc-category-cards--cols-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.oc-category-cards--cols-5 {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.oc-category-cards--cols-6 {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

.oc-category-card__link {
	display: block;
	height: 100%;
	text-decoration: none;
	color: inherit;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
	transition: box-shadow var(--wp--custom--motion--base) var(--wp--custom--motion--easing), transform var(--wp--custom--motion--base) var(--wp--custom--motion--easing);
}

.oc-category-card__link:hover,
.oc-category-card__link:focus-visible {
	box-shadow: var(--wp--preset--shadow--md);
	transform: translateY(-2px);
}

.oc-category-card__media {
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--wp--preset--color--muted);
}

.oc-category-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.oc-category-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--wp--preset--color--muted), var(--wp--preset--color--brand-soft));
}

.oc-category-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
}

.oc-category-card__name {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
}

.oc-category-card__count {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-muted);
}

.oc-catalog .oc-category-cards {
	margin-block-end: var(--wp--preset--spacing--70);
}

/* Under a section heading («Utforsk sortimentet» on the front page and the 404 page): the same
   space as every other section's heading and content (the block gap). */
.wp-block-heading + .oc-category-cards {
	margin-block-start: var(--wp--style--block-gap, 1.5rem);
}

/* Ten cards (the front page's categories) fill two rows of five instead of 4 + 4 + 2. */
@media (min-width: 64rem) {
	.oc-category-cards--cols-4:has(> :nth-child(10):last-child) {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

/* --- Product cards ------------------------------------------------------------ */

.wc-block-product-template.oc-product-grid {
	gap: var(--wp--preset--spacing--40);
}

.oc-product-card {
	height: 100%;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
	transition: box-shadow var(--wp--custom--motion--base) var(--wp--custom--motion--easing), transform var(--wp--custom--motion--base) var(--wp--custom--motion--easing);
}

.oc-product-card:hover,
.oc-product-card:focus-within {
	box-shadow: var(--wp--preset--shadow--md);
	transform: translateY(-2px);
}

.oc-product-card .wc-block-components-product-image {
	margin: 0;
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--wp--preset--color--surface);
	overflow: hidden;
}

.oc-product-card .wc-block-components-product-image a,
.oc-product-card .wc-block-components-product-image img {
	display: block;
	width: 100%;
	height: 100%;
}

.oc-product-card .wc-block-components-product-image img {
	object-fit: cover;
}

.oc-product-card .wc-block-components-product-sale-badge {
	position: absolute;
	top: var(--wp--preset--spacing--30);
	left: var(--wp--preset--spacing--30);
	margin: 0;
}

.oc-product-card__body {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
	gap: var(--wp--preset--spacing--20);
	flex: 1 1 auto;
}

/* «2–4 personer» in the lower corner of the card image (plugin block product-capacity). */
.oc-product-card .oc-product-card__capacity {
	position: absolute;
	inset-block-end: var(--wp--preset--spacing--30);
	inset-inline-start: var(--wp--preset--spacing--30);
	box-shadow: var(--wp--preset--shadow--sm);
}

/* «Bestselgere» on category pages: the cards carry a ribbon. */
.oc-bestsellers .oc-product-card .wc-block-components-product-image::after {
	content: "Bestselger";
	position: absolute;
	inset-block-start: var(--wp--preset--spacing--30);
	inset-inline-end: var(--wp--preset--spacing--30);
	padding: 0.2em 0.6em;
	border-radius: 999px;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.oc-bestsellers {
	margin-block-end: var(--wp--preset--spacing--50);
}

.oc-bestsellers h2 {
	margin-block-end: var(--wp--preset--spacing--30);
}

.oc-product-card__title {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
}

.oc-product-card__title a {
	text-decoration: none;
}

.oc-product-card__title a:hover,
.oc-product-card__title a:focus {
	text-decoration: underline;
}

.oc-product-card__summary {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-muted);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.oc-product-card__summary p {
	margin: 0;
}

.oc-product-card__price {
	font-weight: 700;
	margin: 0;
}

/* The image sits directly on the card body (no block gap between them). */
.oc-product-card {
	gap: 0;
}

/* Buttons line up at the bottom of every card in a row. The class pair beats WordPress'
   `.is-layout-flex > :is(*, div) { margin: 0 }`. */
.oc-product-card .oc-product-card__button {
	margin-block-start: auto;
	padding-top: var(--wp--preset--spacing--20);
}

.oc-product-card__button .wp-block-button__link {
	font-size: var(--wp--preset--font-size--small);
	padding: 0.6rem 1rem;
}

/* Phones show two cards of about 170 px side by side: name, two facts, price, stock, button. */
@media (max-width: 599px) {
	.oc-product-card .oc-product-card__body {
		padding: var(--wp--preset--spacing--30);
	}

	.oc-product-card .oc-product-card__title {
		font-size: var(--wp--preset--font-size--medium);
		hyphens: auto;
		overflow-wrap: break-word;
	}

	.oc-product-card .oc-product-card__summary,
	.oc-product-card__facts .oc-key-facts__item:nth-child(n + 3) {
		display: none;
	}

	.oc-product-card .oc-product-card__facts .oc-key-facts__item:nth-child(2)::after {
		content: none;
	}

	.oc-product-card .oc-product-card__button .wp-block-button__link {
		inline-size: 100%;
		justify-content: center;
		text-align: center;
	}
}

/* --- Article cards ------------------------------------------------------------ */

.oc-article-cards {
	gap: var(--wp--preset--spacing--40);
}

.oc-article-card {
	height: 100%;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
	padding-bottom: var(--wp--preset--spacing--40);
	transition: box-shadow var(--wp--custom--motion--base) var(--wp--custom--motion--easing), transform var(--wp--custom--motion--base) var(--wp--custom--motion--easing);
}

.oc-article-card:hover,
.oc-article-card:focus-within {
	box-shadow: var(--wp--preset--shadow--md);
	transform: translateY(-2px);
}

.oc-article-card__image {
	margin: 0 0 var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--surface);
}

.oc-article-card__image img {
	display: block;
	width: 100%;
}

.oc-article-card .oc-eyebrow,
.oc-article-card h2,
.oc-article-card h3,
.oc-article-card .wp-block-post-excerpt {
	padding-inline: var(--wp--preset--spacing--40);
}

.oc-article-card h2,
.oc-article-card h3 {
	margin-block: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
}

.oc-article-card h2 a,
.oc-article-card h3 a {
	text-decoration: none;
}

.oc-article-card h2 a:hover,
.oc-article-card h3 a:hover {
	text-decoration: underline;
}

.oc-article-card .wp-block-post-excerpt {
	margin-block-start: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-muted);
}

.oc-article-card .wp-block-post-excerpt__more-text {
	display: none;
}

/* --- Features, trust, CTA, FAQ (homepage sections) --------------------------- */

.oc-features,
.oc-trust {
	gap: var(--wp--preset--spacing--40);
}

.oc-feature,
.oc-trust__item {
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--base);
}

.oc-feature h3,
.oc-trust__item h3 {
	margin-block: 0 var(--wp--preset--spacing--20);
}

.oc-feature p,
.oc-trust__item p {
	margin: 0;
	color: var(--wp--preset--color--contrast-muted);
}

.oc-cta {
	background: var(--wp--preset--color--bar);
	color: var(--wp--preset--color--base);
	padding-block: var(--wp--preset--spacing--80);
	margin-block: var(--wp--preset--spacing--40);
}

.oc-cta h2 {
	color: inherit;
	margin-bottom: var(--wp--preset--spacing--30);
}

.oc-cta p {
	color: #d9d7d0;
}

.oc-cta .is-style-outline .wp-block-button__link {
	color: var(--wp--preset--color--base);
	border-color: currentColor;
}

.oc-faq .wp-block-accordion-item {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.wp-block-accordion-heading {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
}

.wp-block-accordion-heading__toggle {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30) 0;
	background: none;
	border: 0;
	font: inherit;
	font-weight: 600;
	text-align: left;
	color: inherit;
	cursor: pointer;
}

.wp-block-accordion-heading__toggle-icon {
	color: var(--wp--preset--color--brand-text);
	font-size: 1.5rem;
	line-height: 1;
}

.wp-block-accordion-panel {
	padding-bottom: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--contrast-muted);
}

.wp-block-accordion-panel p:last-child {
	margin-bottom: 0;
}

/* --- Pages and landing pages ------------------------------------------------------ */

/*
 * page.html: title, text and wide sections share one left edge; text keeps a 48rem measure
 * (post-content is wide with a left-justified constrained layout). page-landing.html works
 * like the front page: full-width post-content, a hero band first, wide sections centred.
 * Articles (single.html) keep everything in their 48rem column.
 */
/* Pages and articles are mostly text: tighter rhythm between sections than on the front page. */
:is(.oc-page, .oc-article) .wp-block-post-content > .oc-section {
	padding-block: var(--wp--preset--spacing--40);
}

:is(.oc-page, .oc-article) .wp-block-post-content > .oc-section:first-child {
	padding-block-start: 0;
}

/* Full-width bands inside the page or article column become rounded panels. */
:is(.oc-page, .oc-article) .wp-block-post-content > :is(.oc-cta, .oc-hero) {
	border-radius: var(--wp--custom--radius--xl);
	padding-inline: var(--wp--preset--spacing--50);
}

/*
 * Landing page without a hero: the template's title (left out by functions.php when the
 * content has its own h1) keeps page.html's distance to the header.
 */
.oc-landing > .oc-landing__header {
	padding-block-start: calc(var(--wp--preset--spacing--40) + var(--wp--preset--spacing--30));
}

.oc-landing > .oc-landing__header + .wp-block-post-content > .oc-section:first-child {
	padding-block-start: 0;
}

/*
 * Front page and landing pages: rhythm after the hero. The feature cards and the steps sit on a
 * tinted band that runs to the screen edges (the shadow paints the band, the clip keeps it to
 * the section's height, and neither widens the page).
 */
:is(.oc-home, .oc-landing) .wp-block-post-content > :is(.oc-section--features, .oc-section--steps) {
	padding-block: var(--wp--preset--spacing--70);
	background: var(--wp--preset--color--surface);
	box-shadow: 0 0 0 100vmax var(--wp--preset--color--surface);
	clip-path: inset(0 -100vmax);
}

/* The dark call-to-action band that ends the page runs straight into the dark footer. */
:is(.oc-home, .oc-landing) > .wp-block-post-content > .oc-cta:last-child {
	margin-block-end: 0;
}

.oc-main:is(.oc-home, .oc-landing):has(> .wp-block-post-content > .oc-cta:last-child) {
	padding-block-end: 0;
}

.wp-site-blocks > .oc-main:has(> .wp-block-post-content > .oc-cta:last-child) + .wp-block-template-part {
	margin-block-start: 0;
}

/*
 * --- Content sections (section kit, tools/migration/README.md) ------------------------
 *
 * Markup from OutdoorCabins Core (src/Migration/SectionRenderer.php): every section is a wide
 * group `oc-section oc-section--{type}`; text-like sections (intro, text, steps, faq, notice,
 * image, table, video, contact, quote) use a left-justified 48rem constrained layout, grids and
 * listings the full wide width. tests/e2e/fixtures/section-kit.ts holds the same markup.
 */

.oc-section--intro p {
	line-height: var(--wp--custom--line-height--normal);
}

.oc-section--text {
	line-height: var(--wp--custom--line-height--relaxed);
}

.oc-section--text :is(h2, h3, h4) {
	line-height: var(--wp--custom--line-height--tight);
}

/* Headings sit close to their text and further from what came before. */
.oc-section--text :is(h2, h3, h4) + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.oc-section--text > * + :is(h3, h4) {
	margin-block-start: var(--wp--preset--spacing--60);
}

.oc-section--text > :is(p, ul, ol) + :is(p, ul, ol) {
	margin-block-start: var(--wp--preset--spacing--40);
}

.oc-section--text :is(ul, ol) {
	padding-inline-start: 1.25em;
}

.oc-section--text li + li {
	margin-block-start: var(--wp--preset--spacing--10);
}

/* Lists read the same everywhere: orange markers, the same indent. */
:is(.oc-section--text, .oc-media-text, .oc-columns, .wp-block-woocommerce-product-description, .wp-block-term-description) li::marker {
	color: var(--wp--preset--color--brand-text);
}

:is(.oc-media-text, .oc-columns) :is(ul, ol) {
	padding-inline-start: 1.25em;
}

/* Short intro under a section heading (features). */
.oc-section__intro {
	max-inline-size: var(--wp--style--global--content-size, 48rem);
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--contrast-muted);
}

/* Media and text (core/columns): image beside the text from 782px, image first when stacked. */
.oc-media-text img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	border-radius: var(--wp--custom--radius--lg);
}

.oc-media-text .wp-block-columns {
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}

.oc-media-text .wp-block-column > :first-child {
	margin-block-start: 0;
}

.oc-media-text .wp-block-buttons {
	margin-block-start: var(--wp--preset--spacing--40);
}

@media (max-width: 781px) {
	.oc-media-text--image-right .wp-block-columns {
		flex-direction: column-reverse;
	}
}

/* In articles and pages the text beside the image is long: the image starts level with the
   heading instead of floating beside the middle of the text. */
:is(.oc-article, .oc-page) .oc-media-text .wp-block-column.is-vertically-aligned-center {
	align-self: flex-start;
}

/* The heading's line box starts a little above its letters; nudge the image down to match. */
@media (min-width: 782px) {
	:is(.oc-article, .oc-page) .oc-media-text .oc-media-text__media {
		padding-block-start: 0.35rem;
	}
}

/* Steps: numbered circles, the step title on its own line. */
.oc-steps ol {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	margin-inline: 0;
	padding: 0;
	list-style: none;
	counter-reset: oc-step;
}

.oc-steps ol > li {
	position: relative;
	min-block-size: 2.25rem;
	padding-inline-start: 3.25rem;
	counter-increment: oc-step;
}

.oc-steps ol > li::before {
	content: counter(oc-step);
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	display: grid;
	place-items: center;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	border-radius: 50%;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
	line-height: 1;
}

.oc-steps ol > li > strong:first-child {
	display: block;
	padding-block-start: 0.2rem;
	font-size: var(--wp--preset--font-size--large);
}

.oc-steps ol > li > strong:first-child + br {
	display: none;
}

/* Front page and landing pages: the steps use the full width, three (or two, or four) across. */
@media (min-width: 64rem) {
	:is(.oc-home, .oc-landing) .oc-steps ol {
		max-width: none;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	}

	:is(.oc-home, .oc-landing) .oc-steps ol:has(> li:nth-child(2):last-child) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	:is(.oc-home, .oc-landing) .oc-steps ol:has(> li:nth-child(4):last-child) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Notice: a calm box for practical information; "important" for things the buyer must do. */
.oc-notice {
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	border-inline-start: 4px solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--surface);
}

.oc-notice--important {
	border-inline-start-color: var(--wp--preset--color--warning);
	background: var(--wp--preset--color--warning-soft);
}

.oc-notice :is(h2, h3, h4) {
	margin-block-end: 0;
	font-size: var(--wp--preset--font-size--large);
}

.oc-notice :is(h2, h3, h4) + *,
.oc-notice > :is(p, ul, ol) + :is(p, ul, ol) {
	margin-block-start: var(--wp--preset--spacing--20);
}

.oc-notice :is(ul, ol) {
	padding-inline-start: 1.25em;
}

/* Images, galleries and tables. */
.oc-figure img {
	display: block;
	border-radius: var(--wp--custom--radius--lg);
}

.oc-gallery .wp-block-gallery {
	--wp--style--unstable-gallery-gap: var(--wp--preset--spacing--30);
	gap: var(--wp--style--unstable-gallery-gap);
}

.oc-gallery .wp-block-image img {
	border-radius: var(--wp--custom--radius--md);
}

/* Cropped galleries: equal 4:3 tiles, also for a last image alone on its row. */
.oc-gallery .is-cropped .wp-block-image img {
	aspect-ratio: 4 / 3;
}

.oc-table table {
	inline-size: 100%;
	border: 0;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--medium);
}

.oc-table :is(th, td) {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border: 0;
	border-block-end: 1px solid var(--wp--preset--color--border);
	text-align: start;
	vertical-align: top;
}

.oc-table thead {
	border: 0;
}

.oc-table thead :is(th, td) {
	border-block-end: 2px solid var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--surface);
	font-weight: 700;
}

.oc-table tbody th {
	font-weight: 600;
}

.oc-table figcaption {
	margin-block-start: var(--wp--preset--spacing--20);
}

/* Comparison tables with four or more columns use the wide width instead of the text column. */
.oc-section--table > .wp-block-table:has(thead th:nth-child(4)) {
	max-width: none;
}

/* Phones: wide tables scroll sideways (the figure scrolls; functions.php makes it a focusable
   region for keyboard users) with the first column pinned. */
@media (max-width: 599px) {
	/* Columns sized by their content, words kept whole (the block's fixed layout and
	   `word-break: break-word` split «Badstutønne» over two lines at this width). */
	.oc-table table:has(thead th:nth-child(4)) {
		min-inline-size: 36rem;
		table-layout: auto;
	}

	.oc-table table:has(thead th:nth-child(4)) :is(th, td) {
		min-width: 7rem;
		word-break: normal;
		hyphens: auto;
	}

	.oc-table :is(th, td):first-child {
		position: sticky;
		inset-inline-start: 0;
		z-index: 1;
		background: var(--wp--preset--color--base);
		box-shadow: inset -1px 0 0 var(--wp--preset--color--border);
	}

	.oc-table thead :is(th, td):first-child {
		background: var(--wp--preset--color--surface);
	}

	/* The caption stays in view under a scrolled table. */
	.oc-table figcaption {
		position: sticky;
		inset-inline-start: 0;
		max-inline-size: calc(100vw - 2 * var(--wp--style--root--padding-left, 1rem));
	}
}

/* Video: a linked still with a play button; nothing loads from the provider before the click. */
.oc-video .wp-block-image {
	margin: 0;
}

.oc-video .wp-block-image a {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--bar);
}

.oc-video .wp-block-image img {
	display: block;
	inline-size: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.oc-video .wp-block-image a::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	inline-size: 4.5rem;
	block-size: 4.5rem;
	border-radius: 50%;
	background: var(--wp--preset--color--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23171614' d='M8 5.5v13l10.5-6.5z'/%3E%3C/svg%3E") no-repeat 55% 50% / 45%;
	box-shadow: var(--wp--preset--shadow--lg);
	transform: translate(-50%, -50%);
	transition: transform var(--wp--custom--motion--base) var(--wp--custom--motion--easing), background-color var(--wp--custom--motion--fast) var(--wp--custom--motion--easing);
}

.oc-video .wp-block-image a:is(:hover, :focus-visible)::after {
	background-color: var(--wp--preset--color--brand-hover);
	transform: translate(-50%, -50%) scale(1.06);
}

.oc-video .wp-block-image figcaption {
	margin-block-start: var(--wp--preset--spacing--20);
}

/* Link cards: the whole card is the link (the heading link stretches over it). */
.oc-link-cards {
	gap: var(--wp--preset--spacing--40);
}

/* auto-fill: two or three cards keep card size instead of stretching over the whole row. */
.oc-link-cards.is-layout-grid {
	grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
}

/* Card grids never leave one or two cards alone on the last row: 3, 5, 6 and 9 cards go three
   across (feature cards, five across by default, only for 6 and 9). */
@media (min-width: 64rem) {
	.oc-link-cards.is-layout-grid:has(> :nth-child(3):last-child, > :nth-child(5):last-child, > :nth-child(6):last-child, > :nth-child(9):last-child),
	.oc-features.is-layout-grid:has(> :nth-child(6):last-child, > :nth-child(9):last-child) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.oc-link-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: var(--wp--preset--spacing--40);
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--base);
	transition: box-shadow var(--wp--custom--motion--base) var(--wp--custom--motion--easing), transform var(--wp--custom--motion--base) var(--wp--custom--motion--easing);
}

.oc-link-card:hover,
.oc-link-card:focus-within {
	box-shadow: var(--wp--preset--shadow--md);
	transform: translateY(-2px);
}

.oc-link-card > * {
	margin-block: 0;
}

.oc-link-card > * + * {
	margin-block-start: var(--wp--preset--spacing--20);
}

/* An image runs to the card edges (flex column: margins add up, they do not collapse). */
.oc-link-card > .wp-block-image:first-child {
	margin: calc(-1 * var(--wp--preset--spacing--40)) calc(-1 * var(--wp--preset--spacing--40)) var(--wp--preset--spacing--20);
	background: var(--wp--preset--color--surface);
}

.oc-link-card > .wp-block-image:first-child img {
	display: block;
	inline-size: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/*
 * Logo cards (oc-link-card--logo, set by functions.php for images narrower than 400 px, such as
 * the manufacturer logos on /brands): the whole logo on a white panel, never cropped or blown
 * up. A card without a logo in the same grid gets an empty panel of the same height, so every
 * title starts on the same line.
 */
.oc-link-card--logo > .wp-block-image:first-child,
.oc-link-cards:has(> .oc-link-card--logo) > .oc-link-card:not(:has(> .wp-block-image:first-child))::before {
	display: grid;
	place-items: center;
	block-size: 8rem;
	margin: calc(-1 * var(--wp--preset--spacing--40)) calc(-1 * var(--wp--preset--spacing--40)) var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--40);
	border-block-end: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--base);
}

.oc-link-cards:has(> .oc-link-card--logo) > .oc-link-card:not(:has(> .wp-block-image:first-child))::before {
	content: "";
	background: var(--wp--preset--color--surface);
}

.oc-link-card--logo > .wp-block-image:first-child + * {
	margin-block-start: 0;
}

.oc-link-card--logo > .wp-block-image:first-child img {
	inline-size: auto;
	max-inline-size: min(100%, 12rem);
	block-size: auto;
	max-block-size: 5rem;
	aspect-ratio: auto;
	object-fit: contain;
}

/* Phones: photo cards become rows with a small image at the start, so a list of cards is not a
   stack of full-width photos. */
@media (max-width: 599px) {
	.oc-link-card:not(.oc-link-card--logo):has(> .wp-block-image:first-child) {
		display: grid;
		grid-template-columns: 6.5rem minmax(0, 1fr);
		align-content: start;
		gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--40);
	}

	/* The image fills its column without sizing it (absolutely positioned): the text sets the
	   card's height, a lazy image never stretches the card before it has loaded. */
	.oc-link-card:not(.oc-link-card--logo) > .wp-block-image:first-child {
		position: relative;
		grid-row: 1 / span 3;
		min-block-size: 5.5rem;
		margin: calc(-1 * var(--wp--preset--spacing--40)) 0 calc(-1 * var(--wp--preset--spacing--40)) calc(-1 * var(--wp--preset--spacing--40));
		overflow: hidden;
	}

	.oc-link-card:not(.oc-link-card--logo) > .wp-block-image:first-child img {
		position: absolute;
		inset: 0;
		block-size: 100%;
		aspect-ratio: auto;
	}

	.oc-link-card:not(.oc-link-card--logo):has(> .wp-block-image:first-child) > * + * {
		margin-block-start: 0;
	}
}

.oc-link-card :is(h2, h3, h4) {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.3;
}

.oc-link-card :is(h2, h3, h4) a {
	text-decoration: none;
}

.oc-link-card :is(h2, h3, h4) a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.oc-link-card:hover :is(h2, h3, h4) a {
	text-decoration: underline;
}

.oc-link-card p {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-muted);
}

@supports selector(:has(*)) {
	.oc-link-card:has(:is(h2, h3, h4) a:focus-visible) {
		outline: 3px solid #0b5cd5;
		outline-offset: 2px;
	}

	.oc-link-card :is(h2, h3, h4) a:focus-visible {
		outline: none;
	}
}

/* Contact details: one tile per channel, label above a large value. */
.oc-contact ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
	gap: var(--wp--preset--spacing--30);
	margin-inline: 0;
	padding: 0;
	list-style: none;
}

.oc-contact ul > li {
	margin: 0;
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--large);
	overflow-wrap: anywhere;
}

/* Four tiles in the text column: two by two, not three plus one. */
@media (min-width: 600px) {
	.oc-contact ul:has(> li:nth-child(4):last-child) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.oc-contact ul > li > strong:first-child {
	display: block;
	margin-block-end: var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-muted);
}

.oc-contact ul > li > strong:first-child + br {
	display: none;
}

.oc-contact ul > li a {
	font-weight: 600;
}

/* Text columns and quotes. */
.oc-columns .wp-block-columns {
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}

.oc-columns .wp-block-column > :first-child {
	margin-block-start: 0;
}

.oc-columns .wp-block-column > :is(h2, h3) {
	font-size: var(--wp--preset--font-size--x-large);
}

.oc-columns .wp-block-column > :is(h2, h3) + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.oc-quote .wp-block-quote {
	margin-inline: 0;
	padding-block: var(--wp--preset--spacing--20);
}

.oc-quote .wp-block-quote p {
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.45;
}

.oc-quote cite {
	display: block;
	margin-block-start: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	font-weight: 600;
	color: var(--wp--preset--color--contrast-muted);
}

/* --- Catalog and filters ------------------------------------------------------- */

/* Brand page: the brand's logo (WooCommerce brand image) above its name. */
.oc-brand__logo {
	display: block;
	inline-size: auto;
	max-inline-size: min(12rem, 100%);
	block-size: auto;
	max-block-size: 5rem;
	object-fit: contain;
	margin-block-end: var(--wp--preset--spacing--30);
}

.oc-catalog__layout {
	gap: var(--wp--preset--spacing--60);
}

.oc-catalog__filters h2 {
	margin-bottom: var(--wp--preset--spacing--20);
}

.oc-catalog__filters .wp-block-accordion-item {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.oc-catalog__filters .wp-block-accordion-heading {
	font-size: var(--wp--preset--font-size--medium);
}

.oc-catalog__filters .wp-block-accordion-heading__toggle {
	padding-block: var(--wp--preset--spacing--30);
}

.oc-catalog__filters .wp-block-accordion-panel {
	padding-bottom: var(--wp--preset--spacing--30);
	color: inherit;
}

.oc-catalog__filters .wc-block-product-filter-clear-button .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--brand-text);
	border: 0;
	padding: 0;
	text-decoration: underline;
	font-size: var(--wp--preset--font-size--small);
}

/* Price slider inputs must fit six-digit NOK amounts. */
.oc-catalog__filters .wc-block-product-filter-price-slider input,
.oc-catalog__filters .wc-block-product-filter-price-slider__input {
	min-width: 6.5rem;
	font-size: var(--wp--preset--font-size--small);
	padding-inline: 0.4rem;
}

.oc-catalog__filters .wc-block-product-filter-checkbox-list__label {
	font-size: var(--wp--preset--font-size--small);
}

.oc-catalog__toolbar {
	margin-bottom: var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--contrast-muted);
	font-size: var(--wp--preset--font-size--small);
}

/* The spacing WooCommerce's classic stylesheets gave (they no longer load here, docs/PERFORMANCE.md). */
.oc-catalog__toolbar .woocommerce-result-count,
.oc-catalog__toolbar .woocommerce-ordering {
	margin: 0 0 1em;
}

.oc-product-card__compare .oc-compare-toggle__label {
	margin-bottom: 0.7em;
}

.oc-catalog__toolbar .woocommerce-ordering select,
.oc-catalog__toolbar .wc-block-catalog-sorting select {
	font: inherit;
	padding: 0.45rem 2rem 0.45rem 0.75rem;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

@media (min-width: 782px) {
	.oc-catalog__filters .wc-block-product-filters {
		position: sticky;
		top: var(--wp--preset--spacing--40);
	}
}

/* Category description under the title: paragraphs with air between them. */
.oc-page-header .wp-block-term-description > * + * {
	margin-block-start: 0.75em;
}

/* Phones and tablets: one full-width «Filtrér produkter» button opens WooCommerce's filter sheet.
   The «Filtrer» heading stays for screen readers (the filters keep their heading) but is not
   shown as a second label above the button. */
@media (max-width: 781px) {
	.oc-catalog .oc-category-cards {
		margin-block-end: var(--wp--preset--spacing--50);
	}

	.oc-catalog__filters > h2 {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	.oc-catalog__filters > .wc-block-product-filters {
		display: flex;
		inline-size: 100%;
		margin-block-start: 0;
	}

	.oc-catalog__filters .wc-block-product-filters__open-overlay {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--wp--preset--spacing--20);
		inline-size: 100%;
		padding: 0.7rem 1rem;
		border: 1px solid var(--wp--preset--color--border-strong);
		border-radius: var(--wp--custom--radius--md);
		background: var(--wp--preset--color--base);
		font-weight: 600;
	}
}

/*
 * The category's designed content below the products (sections from the old store's category
 * pages; OutdoorCabins Core block outdoorcabins/term-content, page 1 of a category only). A
 * rule and generous space separate it from the product grid.
 */
.oc-catalog > .oc-catalog__layout + :is(.wp-block-outdoorcabins-term-content, .oc-term-content, .oc-section) {
	margin-block-start: var(--wp--preset--spacing--80);
	padding-block-start: var(--wp--preset--spacing--60);
	border-block-start: 1px solid var(--wp--preset--color--border);
}

.oc-catalog > :is(.wp-block-outdoorcabins-term-content, .oc-term-content) > .oc-section:first-child {
	padding-block-start: 0;
}

.oc-catalog > :is(.wp-block-outdoorcabins-term-content, .oc-term-content) > .oc-section {
	padding-block: var(--wp--preset--spacing--50);
}

/* --- Product page ---------------------------------------------------------------- */

.oc-product__top {
	gap: var(--wp--preset--spacing--60);
	margin-bottom: var(--wp--preset--spacing--60);
}

.oc-product__gallery .wc-block-product-gallery-large-image img {
	border-radius: var(--wp--custom--radius--lg);
}

/* The purchase column (addon choices) is often much taller than the gallery: the gallery stays
   in view beside it. Only on screens tall enough to show the whole gallery. */
@media (min-width: 782px) and (min-height: 45rem) {
	.oc-product__gallery > .wc-block-product-gallery {
		position: sticky;
		inset-block-start: var(--wp--preset--spacing--40);
	}
}

.oc-product__summary > * + * {
	margin-top: var(--wp--preset--spacing--30);
}

.oc-product__summary h1 {
	margin: 0;
}

.oc-product__excerpt {
	color: var(--wp--preset--color--contrast-muted);
	font-size: var(--wp--preset--font-size--large);
}

.oc-product__price {
	font-weight: 700;
}

.oc-product__price .wc-block-components-product-price__regular,
.oc-product__price del {
	font-size: 0.6em;
	font-weight: 400;
	color: var(--wp--preset--color--contrast-muted);
}

/* Classic add-to-cart form (woocommerce/add-to-cart-form) rendered inside the block template. */
.oc-product form.cart {
	margin: 0 0 2em;
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--surface);
}

.oc-product form.cart .variations {
	width: 100%;
	margin: 0 0 var(--wp--preset--spacing--30);
	border-collapse: collapse;
}

.oc-product form.cart .variations th,
.oc-product form.cart .variations td {
	padding: 0 0 var(--wp--preset--spacing--20);
	text-align: left;
	vertical-align: top;
	border: 0;
}

.oc-product form.cart .variations th.label {
	display: block;
	font-weight: 600;
	padding-bottom: var(--wp--preset--spacing--10);
}

.oc-product form.cart .variations td.value {
	display: block;
}

.oc-product form.cart .variations select {
	width: 100%;
	font: inherit;
	padding: 0.65rem 2.25rem 0.65rem 0.9rem;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.oc-product form.cart .reset_variations {
	display: inline-block;
	margin-top: var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--small);
}

.oc-product form.cart .woocommerce-variation-price {
	font-weight: 700;
	font-size: var(--wp--preset--font-size--x-large);
	margin-bottom: var(--wp--preset--spacing--20);
}

.oc-product form.cart .woocommerce-variation-availability {
	color: var(--wp--preset--color--contrast-muted);
}

.oc-product form.cart .woocommerce-variation-add-to-cart,
.oc-product form.cart:not(.variations_form) {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	align-items: stretch;
}

.oc-product form.cart .quantity {
	display: inline-flex;
}

.oc-product form.cart .quantity .qty {
	width: 5rem;
	height: 100%;
	min-height: 3rem;
	text-align: center;
	font: inherit;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--base);
}

.oc-product form.cart .single_add_to_cart_button {
	flex: 1 1 12rem;
	min-height: 3rem;
	padding: 0.75rem 1.25rem;
	border: 0;
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background var(--wp--custom--motion--fast) var(--wp--custom--motion--easing);
}

.oc-product form.cart .single_add_to_cart_button:hover,
.oc-product form.cart .single_add_to_cart_button:focus-visible {
	background: var(--wp--preset--color--brand-hover);
}

.oc-product form.cart .single_add_to_cart_button.disabled,
.oc-product form.cart .single_add_to_cart_button:disabled {
	background: var(--wp--preset--color--muted);
	color: var(--wp--preset--color--contrast-muted);
	cursor: not-allowed;
}

.oc-product__ask {
	margin: 0;
}

.oc-product__meta {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-muted);
}

.oc-product__details {
	gap: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--border);
}

.oc-product__details h2 {
	margin-bottom: var(--wp--preset--spacing--30);
}

/* Lipscore (plugin blocks): stars under the card title and the product title, omtaler in the footer. */
.oc-product-card .oc-product-card__rating:empty,
.oc-product-card .oc-product-card__rating:has(.lipscore-rating-small:empty) {
	display: none;
}

.oc-product__rating {
	margin-block: calc(-1 * var(--wp--preset--spacing--10)) var(--wp--preset--spacing--20);
}

.oc-footer__reviews {
	margin-block-start: var(--wp--preset--spacing--30);
}

/* Pages and articles under the products on the search result page (plugin block). */
.oc-content-results {
	margin-block-start: var(--wp--preset--spacing--60);
	padding-block-start: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--border);
}

.oc-content-results__list {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.oc-content-results__item {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--base);
}

.oc-content-results__kind {
	display: block;
	margin-block-end: var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-text);
}

.oc-content-results__link {
	font-weight: 700;
	text-decoration: none;
}

.oc-content-results__link:is(:hover, :focus-visible) {
	text-decoration: underline;
}

.oc-content-results__excerpt {
	margin: var(--wp--preset--spacing--10) 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-muted);
}

/* Long descriptions start folded («Les mer», functions.php); the fold is only applied by the script. */
.oc-read-more {
	position: relative;
}

.oc-read-more.is-folded .oc-read-more__body {
	max-block-size: 18rem;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
	mask-image: linear-gradient(to bottom, #000 70%, transparent);
}

.oc-read-more__toggle {
	margin-block-start: var(--wp--preset--spacing--20);
	padding: 0.5rem 1rem;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.oc-read-more__toggle:is(:hover, :focus-visible) {
	border-color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--surface);
}

@media print {
	.oc-read-more.is-folded .oc-read-more__body {
		max-block-size: none;
		mask-image: none;
	}

	.oc-read-more__toggle {
		display: none;
	}
}

/* Addon choices in the add-to-cart form (OutdoorCabins Core markup, theme look): one card with the
   groups under each other, each select with a chevron of its own (the browser's differs per
   platform), and the info box of the chosen option below it. */
.oc-product form.cart .oc-addons {
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--surface);
}

.oc-addons__heading {
	font-size: var(--wp--preset--font-size--large);
	letter-spacing: -0.01em;
}

.oc-addons__legend {
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--contrast);
}

.oc-product form.cart .oc-addons__select,
.oc-product form.cart .oc-delivery-week__select {
	appearance: none;
	padding-inline-end: 2.75rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23171614' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 7.5 5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
	background-size: 1.1rem;
	font-weight: 500;
	text-overflow: ellipsis;
}

.oc-product form.cart .oc-addons__select:invalid:not(:focus) {
	color: var(--wp--preset--color--contrast-muted);
}

.oc-addons__info {
	border-color: var(--wp--preset--color--border);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast-muted);
}

.oc-addons__info-body::before {
	content: "";
	float: inline-start;
	inline-size: 1rem;
	block-size: 1rem;
	margin-inline-end: 0.4rem;
	margin-block-start: 0.15em;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%235b5a54' stroke-width='1.6'%3E%3Ccircle cx='10' cy='10' r='8'/%3E%3Cpath d='M10 9v5M10 6.5v.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

.oc-addons__image {
	border: 1px solid var(--wp--preset--color--border);
}

.oc-addons__required,
.oc-addons__description,
.oc-addons__option-description {
	color: var(--wp--preset--color--contrast-muted);
}

/* The class pair beats WooCommerce's `.woocommerce-page label { margin-bottom: .7em }`, which
   pushed the options 18 px apart instead of the list's own 6 px gap. */
.oc-addons .oc-addons__option {
	margin: 0;
	border-color: var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--base);
	transition: border-color var(--wp--custom--motion--fast) var(--wp--custom--motion--easing), background-color var(--wp--custom--motion--fast) var(--wp--custom--motion--easing);
}

.oc-addons__option:hover {
	border-color: var(--wp--preset--color--contrast);
}

.oc-addons__option:has(input:checked) {
	border-color: var(--wp--preset--color--brand-text);
	background: var(--wp--preset--color--brand-soft);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--brand-text);
}

.oc-addons__option:has(input:focus-visible) {
	outline: 3px solid #0b5cd5;
	outline-offset: 2px;
}

.oc-addons__option input {
	align-self: center;
	width: 1.1rem;
	height: 1.1rem;
	accent-color: var(--wp--preset--color--brand-text);
}

.oc-addons__summary {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border: 1px dashed var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--base);
}

/* Delivery week in the add-to-cart form (OutdoorCabins Core markup, theme look). */
.oc-delivery-week__label {
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--contrast);
}

.oc-delivery-week__required {
	color: var(--wp--preset--color--contrast-muted);
}

.oc-delivery-week__select,
.oc-cart-week__select,
.oc-addons__select {
	width: 100%;
	min-height: 2.75rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
}

.oc-delivery-week__select:hover,
.oc-cart-week__select:hover,
.oc-addons__select:hover {
	border-color: var(--wp--preset--color--contrast);
}

.oc-delivery-week__select:focus-visible,
.oc-cart-week__select:focus-visible,
.oc-addons__select:focus-visible {
	outline: 3px solid #0b5cd5;
	outline-offset: 2px;
}

/* «Se i AR» under the gallery (plugin block product-ar; only on products with an AR address). */
.oc-product__ar {
	margin-block-start: var(--wp--preset--spacing--30);
}

.oc-product__ar .oc-ar__button {
	border-color: var(--wp--preset--color--border-strong);
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
	transition: border-color var(--wp--custom--motion--fast) var(--wp--custom--motion--easing), background-color var(--wp--custom--motion--fast) var(--wp--custom--motion--easing);
}

.oc-product__ar .oc-ar__button:is(:hover, :focus-visible) {
	border-color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--surface);
}

/* Our availability line (below the price) replaces WooCommerce's stock line in the form. */
.oc-product__summary:has(.oc-availability) .wp-block-add-to-cart-form .stock {
	display: none;
}

.oc-product__aside > * + * {
	margin-top: var(--wp--preset--spacing--60);
}

/* The first heading of the side column starts level with «Beskrivelse» (whichever product block
   comes first: equipment wraps its heading one level deeper than specifications). */
.oc-product__aside > :first-child > :first-child,
.oc-product__aside > :first-child > :first-child > :first-child {
	margin-block-start: 0;
}

.oc-product__section {
	margin-top: var(--wp--preset--spacing--60);
}

.oc-product .related.products h2,
.oc-product .wc-block-related-products h2 {
	margin-bottom: var(--wp--preset--spacing--40);
}

@media (max-width: 781px) {
	.oc-product__top {
		gap: var(--wp--preset--spacing--40);
	}
}

/* --- Product data blocks (OutdoorCabins Core markup, theme look) ------------------------ */

.oc-key-facts__item {
	border-color: var(--wp--preset--color--border-strong);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* On cards the facts are a quiet line of text ("1–2 personer · 1 rom · Isolert"), not chips. The
   separator hangs on to the fact before it, so a wrapped line never starts with «·». */
.oc-product-card__facts {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-muted);
}

.oc-product-card__facts .oc-key-facts__item {
	display: inline;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-size: inherit;
	color: inherit;
}

.oc-product-card__facts .oc-key-facts__item:not(:last-child)::after {
	content: "\00a0·";
	margin-inline-end: 0.15em;
}

.oc-availability {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-muted);
}

.oc-product__availability {
	font-size: var(--wp--preset--font-size--medium);
}

.oc-availability__label {
	color: var(--wp--preset--color--contrast);
}

.oc-availability--in-stock .oc-availability__label::before {
	background: var(--wp--preset--color--success);
}

.oc-availability--made-to-order .oc-availability__label::before {
	background: var(--wp--preset--color--brand);
}

.oc-availability--temporarily-unavailable .oc-availability__label::before {
	background: var(--wp--preset--color--warning);
}

.oc-availability--discontinued .oc-availability__label::before,
.oc-availability--out-of-stock .oc-availability__label::before {
	background: var(--wp--preset--color--border-strong);
}

.oc-spec__group-title {
	margin: 0 0 var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-muted);
}

.oc-spec__row {
	padding-block: var(--wp--preset--spacing--20);
	border-bottom-color: var(--wp--preset--color--border);
}

.oc-spec__row dt {
	font-weight: 400;
	color: var(--wp--preset--color--contrast-muted);
}

.oc-equipment__list {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	padding: 0;
	list-style: none;
}

.oc-equipment__list li {
	position: relative;
	padding-inline-start: 1.75em;
}

.oc-equipment__list li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.2em;
	width: 1.1em;
	height: 1.1em;
	border-radius: 50%;
	background: var(--wp--preset--color--success-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%231f7a52' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 8.5l2.5 2.5L12 5.5'/%3E%3C/svg%3E") no-repeat center / 80%;
}

.oc-equipment__section--optional-equipment .oc-equipment__list li::before {
	background: var(--wp--preset--color--muted) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%235b5a54' stroke-width='2' stroke-linecap='round' d='M8 4.5v7M4.5 8h7'/%3E%3C/svg%3E") no-repeat center / 80%;
}

.oc-delivery__facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: 0;
	list-style: none;
	font-weight: 600;
}

.oc-delivery__note {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-muted);
}

.oc-floor-plan__figure img {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--base);
}

.oc-video__frame {
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
	background: var(--wp--preset--color--bar);
}

/* Product video: the product photo (dimmed) behind the same orange play button as the video
   sections, instead of an empty black box. */
.oc-video__poster {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	filter: brightness(0.6);
	transition: filter var(--wp--custom--motion--base) var(--wp--custom--motion--easing);
}

.oc-video__play > :not(.oc-video__poster) {
	position: relative;
}

.oc-video__play .oc-video__icon {
	inline-size: 4.5rem;
	block-size: 4.5rem;
	background: var(--wp--preset--color--brand);
	box-shadow: var(--wp--preset--shadow--lg);
	transition: transform var(--wp--custom--motion--base) var(--wp--custom--motion--easing), background-color var(--wp--custom--motion--fast) var(--wp--custom--motion--easing);
}

.oc-video__play .oc-video__icon::after {
	border-inline-start-color: var(--wp--preset--color--contrast);
}

.oc-video__label {
	text-shadow: 0 1px 3px rgb(0 0 0 / 60%);
}

.oc-video__play:is(:hover, :focus-visible) .oc-video__poster {
	filter: brightness(0.7);
}

.oc-video__play:is(:hover, :focus-visible) .oc-video__icon {
	background-color: var(--wp--preset--color--brand-hover);
	transform: scale(1.06);
}

/* The frame clips an outer focus ring: draw it inside. */
.oc-video__play:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: -6px;
}

.oc-video__note {
	color: var(--wp--preset--color--contrast-muted);
	opacity: 1;
}

/* --- Article ----------------------------------------------------------------------- */

.oc-article__header {
	margin-bottom: var(--wp--preset--spacing--40);
}

.oc-article__header h1 {
	margin-block: var(--wp--preset--spacing--20);
}

.oc-article__meta {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-muted);
}

.oc-article__hero {
	margin-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}

.oc-article__hero img {
	border-radius: var(--wp--custom--radius--xl);
}

.oc-toc {
	margin-block: 0 var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--surface);
}

.oc-toc__title {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-weight: 700;
}

.oc-toc__list {
	margin: 0;
	padding-left: 1.25rem;
}

.oc-toc__item {
	margin-bottom: var(--wp--preset--spacing--10);
}

.oc-toc__item--level-3 {
	margin-left: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--small);
}

/* Long lists (the sales terms, the privacy policy): two columns on wider screens. */
@media (min-width: 782px) {
	.oc-toc--long .oc-toc__list {
		columns: 2;
		column-gap: var(--wp--preset--spacing--60);
	}

	.oc-toc--long .oc-toc__item {
		break-inside: avoid;
	}
}

/* Headings with their own numbers: no list numbers in front of them. */
.oc-toc--plain .oc-toc__list {
	padding-inline-start: 0;
	list-style: none;
}

/* Pages: the table of contents sits under the title, before the content. */
.oc-page-header .oc-toc {
	margin-block: var(--wp--preset--spacing--40) 0;
}

.oc-toc a {
	text-decoration: none;
}

.oc-toc a:hover,
.oc-toc a:focus {
	text-decoration: underline;
}

.oc-article .wp-block-post-content > h2 {
	margin-top: var(--wp--preset--spacing--60);
}

.oc-article .wp-block-post-content > h3 {
	margin-top: var(--wp--preset--spacing--50);
}

.oc-article .wp-block-post-content {
	font-size: var(--wp--preset--font-size--large);
	line-height: var(--wp--custom--line-height--relaxed);
}

/* --- Footer --------------------------------------------------------------------------- */

.oc-footer {
	background: var(--wp--preset--color--bar);
	color: var(--wp--preset--color--base);
	padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
	/* A hairline where a dark call-to-action band runs into the footer. */
	border-top: 1px solid rgb(255 255 255 / 8%);
}

.oc-footer__grid {
	gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

.oc-footer__title {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 800;
	letter-spacing: -0.01em;
	text-transform: uppercase;
}

.oc-footer__title a {
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.oc-footer__about p {
	color: #d9d7d0;
	max-width: 22rem;
}

.oc-footer__heading {
	color: inherit;
	margin-block: 0 var(--wp--preset--spacing--30);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: var(--wp--preset--font-size--small);
}

.oc-footer__links {
	list-style: none;
	padding: 0;
	margin: 0;
}

.oc-footer__links li {
	margin-bottom: var(--wp--preset--spacing--20);
	color: #d9d7d0;
}

.oc-footer a {
	color: inherit;
	text-decoration: none;
}

.oc-footer a:hover,
.oc-footer a:focus {
	color: var(--wp--preset--color--brand);
	text-decoration: underline;
}

/* Wide screens: one row; the about column is the widest, the contact column never breaks a line
   such as «Mandag–fredag: 11:00–14:00». */
@media (min-width: 64rem) {
	.oc-footer__grid.is-layout-grid {
		grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)) minmax(max-content, 1fr);
	}
}

.oc-footer__social {
	margin-block: var(--wp--preset--spacing--40) 0;
}

/* The social-links block's own rules that the footer uses. Its stylesheet (12 KB with every network's
   colours, render-blocking on every page) is not loaded on the storefront (functions.php
   outdoorcabins_social_links_style; docs/PERFORMANCE.md 2026-10-07). */
.wp-block-social-links {
	box-sizing: border-box;
	padding-left: 0;
	padding-right: 0;
	text-indent: 0;
	margin-left: 0;
	background: none;
	font-size: 24px;
}

.wp-block-social-links .wp-social-link a,
.wp-block-social-links .wp-social-link a:hover {
	text-decoration: none;
	border-bottom: 0;
	box-shadow: none;
}

.wp-block-social-links .wp-social-link svg {
	width: 1em;
	height: 1em;
}

.wp-block-social-link {
	display: block;
	height: auto;
	border-radius: 9999px;
	transition: transform 0.1s ease;
}

.wp-block-social-link a {
	display: flex;
	align-items: center;
	line-height: 0;
}

.wp-block-social-link:hover {
	transform: scale(1.1);
}

.wp-block-social-links .wp-block-social-link.wp-social-link {
	display: inline-block;
	margin: 0;
	padding: 0;
}

.wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor,
.wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor:hover,
.wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor:active,
.wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor:visited,
.wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor svg {
	color: currentColor;
	fill: currentColor;
}

:root :where(.wp-block-social-links .wp-social-link a) {
	padding: 0.25em;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-social-link {
		transition-duration: 0s;
		transition-delay: 0s;
	}
}

/* Social icons in the footer's own quiet colour (not Facebook blue and Instagram pink); orange
   on hover like the other footer links. Four classes beat the social-links block's
   `.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-{service}`. */
.oc-footer .oc-footer__social.wp-block-social-links .wp-social-link {
	border: 1px solid rgb(255 255 255 / 25%);
	background-color: transparent;
	color: #d9d7d0;
}

.oc-footer .oc-footer__social.wp-block-social-links .wp-social-link:is(:hover, :focus-within) {
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand);
}

.oc-footer__contact p {
	color: #d9d7d0;
	margin-block: 0 var(--wp--preset--spacing--40);
}

.oc-footer__contact strong {
	color: var(--wp--preset--color--base);
}

.oc-footer .oc-footer__about a,
.oc-footer__contact a {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Links to another site (the assembly guide and claims on arcticoutdoorcabins.com): an arrow
   shows it; the link's aria-label (and its title) says so in words. */
.oc-footer a[rel~="external"]::after {
	/* A no-break space keeps the arrow with the last word. */
	content: "\00a0\2197";
	font-size: 0.85em;
}

.oc-footer__bottom {
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid rgb(255 255 255 / 14%);
	color: #b9b7b0;
	font-size: var(--wp--preset--font-size--small);
}

.oc-footer__bottom p {
	margin: 0;
}

/* --- WooCommerce presentation ----------------------------------------------------------- */

.wc-block-components-product-price__value.is-discounted,
.woocommerce-Price-amount ins,
.price ins {
	text-decoration: none;
	color: var(--wp--preset--color--sale);
}

.wc-block-components-product-price__regular,
.price del {
	color: var(--wp--preset--color--contrast-muted);
}

.wc-block-grid__product-onsale,
.wc-block-components-product-sale-badge,
.oc-product .onsale {
	background: var(--wp--preset--color--sale);
	color: var(--wp--preset--color--base);
	border: 0;
	border-radius: var(--wp--custom--radius--sm);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	padding: 0.2rem 0.6rem;
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.5;
	min-height: 0;
}

.woocommerce-breadcrumb,
.wc-block-breadcrumbs {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-muted);
	margin-bottom: var(--wp--preset--spacing--30);
}

.woocommerce-breadcrumb a {
	color: inherit;
}

.wc-block-store-notices .wc-block-components-notice-banner,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-radius: var(--wp--custom--radius--md);
}

/*
 * Cart, mini-cart and checkout summary lines: the addon choices and the delivery week one per
 * line («Ovn: …», «Leveringsuke: …») instead of one «/»-separated paragraph, and no cut-off
 * product summary («Isolert badstue…») above them.
 */
:is(.wc-block-cart-item__product, .wc-block-components-order-summary-item) .wc-block-components-product-metadata__description {
	display: none;
}

.wc-block-components-product-details > span {
	display: block;
}

.wc-block-components-product-details > span > [aria-hidden="true"] {
	display: none;
}

.wc-block-components-product-details__name {
	font-weight: 600;
}

/* The chosen configuration is what the customer checks before paying: readable, not 12 px. */
:is(.wc-block-cart-item__product, .wc-block-components-order-summary-item) .wc-block-components-product-details {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

/* Query pagination */
.wp-block-query-pagination {
	margin-top: var(--wp--preset--spacing--50);
	font-weight: 600;
}

.wp-block-query-pagination-numbers .page-numbers {
	padding: 0.35rem 0.7rem;
	border-radius: var(--wp--custom--radius--sm);
	text-decoration: none;
}

.wp-block-query-pagination-numbers .page-numbers.current {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* --- Phase 2 QA fixes (visual QA, axe, review 2026-09-29) ------------------------------ */

/* Footer title: beat `.oc-footer a { color: inherit }` and the underline of the about links. */
.oc-footer .oc-footer__title a,
.oc-footer .oc-footer__about .oc-footer__title a {
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.oc-footer .oc-footer__about .oc-footer__title a:is(:hover, :focus) {
	color: var(--wp--preset--color--brand);
}

/* Focus rings on dark bars. */
.oc-usp-bar :focus-visible,
.oc-footer :focus-visible,
.oc-cta :focus-visible {
	outline-color: #ffffff;
}

/* Grid sections fill the row instead of leaving an empty track. */
.oc-features.is-layout-grid,
.oc-trust.is-layout-grid {
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}

/* Category card image fills its 4:3 box on archive pages too (WooCommerce sets img height:auto). */
.oc-category-card .oc-category-card__image {
	height: 100%;
}

/* Price filter text inputs: WooCommerce's `.wc-block-product-filter-price-slider .text input[type="text"]` is (0,3,1).
   They share the filter column (about 185–215 px between 782 and 1199 px), so they shrink with it
   instead of having a fixed width that spilled over the first product card. */
.oc-catalog__filters .wc-block-product-filter-price-slider__content {
	grid-template-columns: minmax(0, 1fr) 0.5rem minmax(0, 1fr);
}

/* A column too narrow for two amounts side by side (tablets): the two fields under each other. */
@media (min-width: 782px) and (max-width: 959px) {
	.oc-catalog__filters .wc-block-product-filter-price-slider__content {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "price-slider" "left-input" "right-input";
		row-gap: var(--wp--preset--spacing--20);
	}

	.oc-catalog__filters .wc-block-product-filter-price-slider__content > :not(.wc-block-product-filter-price-slider__range, .text) {
		display: none;
	}
}

.oc-catalog__filters .wc-block-product-filter-price-slider .text input[type="text"] {
	box-sizing: border-box;
	min-width: 0;
	max-width: none;
	width: 100%;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	padding-inline: 0.5rem;
	text-align: center;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--md);
}

.oc-catalog__filters .wc-block-product-filter-checkbox-list__input {
	border: 1px solid var(--wp--preset--color--contrast-muted);
	background-color: var(--wp--preset--color--base);
}

/* Specifications: the block renders .wp-block-woocommerce-product-specifications (a core table). */
.oc-product .wp-block-woocommerce-product-specifications table {
	width: 100%;
	border: 0;
	border-collapse: collapse;
}

.oc-product .wp-block-woocommerce-product-specifications th,
.oc-product .wp-block-woocommerce-product-specifications td {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30) var(--wp--preset--spacing--20) 0;
	text-align: left;
	vertical-align: top;
	background: transparent;
}

.oc-product .wp-block-woocommerce-product-specifications th {
	width: 40%;
	font-weight: 600;
	color: var(--wp--preset--color--contrast-muted);
}

/* Purchase panel uses the full form width. */
.oc-product form.cart table.variations,
.oc-product form.cart .single_variation_wrap,
.oc-product form.cart .woocommerce-variation-add-to-cart {
	width: 100%;
}

/* WooCommerce halves the disabled button with opacity; keep the label legible. */
.oc-product form.cart .single_add_to_cart_button.disabled,
.oc-product form.cart .single_add_to_cart_button:disabled {
	opacity: 1;
	background: var(--wp--preset--color--muted);
	color: var(--wp--preset--color--contrast-muted);
}

/* Old prices must stay readable (WooCommerce sets opacity .7 on del). */
.oc-product del,
.oc-product-card del,
.price del {
	opacity: 1;
	color: var(--wp--preset--color--contrast-muted);
}

ins .woocommerce-Price-amount,
.wc-block-components-product-price ins .woocommerce-Price-amount {
	color: var(--wp--preset--color--sale);
	text-decoration: none;
}

/* «Laveste pris de siste 30 dagene» under a reduced price (plugin, Pricing\Display). Its own line in
   normal weight, also inside the product page's xx-large price. */
.oc-lowest-price {
	display: block;
	margin-block-start: 0.25rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	line-height: 1.4;
	color: var(--wp--preset--color--contrast-muted);
}

.oc-lowest-price .woocommerce-Price-amount {
	white-space: nowrap;
}

/* Product card: left-aligned button like the rest of the card. */
.oc-product-card .wc-block-components-product-button,
.oc-product-card .wp-block-button.wc-block-components-product-button {
	align-items: flex-start;
	justify-content: flex-start;
	text-align: left;
}

/* Mini-cart badge follows the brand rule: orange fill, dark text. */
.oc-header .oc-header__actions .wc-block-mini-cart__badge {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--contrast);
}

/* Submenu disclosure button: at least 24 × 24 px target (WCAG 2.5.8). */
.oc-header__nav .wp-block-navigation-submenu__toggle {
	min-width: 24px;
	min-height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* No white strip between header and hero on the front page and landing pages. */
.wp-site-blocks > .oc-home,
.wp-site-blocks > .oc-landing {
	margin-top: 0;
}

/* The (usually empty) store notices block would otherwise push the hero down by one block gap. */
:is(.oc-home, .oc-landing) > .wp-block-woocommerce-store-notices:has(.woocommerce-notices-wrapper:empty) + .wp-block-post-content {
	margin-block-start: 0;
}

/* Phones: a tighter list in the overlay menu. */
@media (max-width: 599px) {
	.oc-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		padding: var(--wp--preset--spacing--10) 0;
	}
}

/* --- Product level in the menu (plugin: Chrome\MenuProducts) ---------------------------------
   Every category item gets the category's products: a category without subcategories lists them in
   its own panel after its other items, a subcategory becomes a submenu (.oc-menu-products) whose
   products open beside it on large screens. */
.oc-menu-product .wp-block-navigation-item__content {
	font-weight: 400;
}

.oc-menu-product--all .wp-block-navigation-item__content {
	font-weight: 600;
}

@media (min-width: 75rem) {
	/* A hairline between a panel's own items and the products listed after them. */
	.oc-header__nav .wp-block-navigation__submenu-container > .wp-block-navigation-item:not(.oc-menu-product) + .oc-menu-product {
		margin-block-start: var(--wp--preset--spacing--10);
		padding-block-start: var(--wp--preset--spacing--10);
		border-top: 1px solid var(--wp--preset--color--border);
	}

	/* The products of a subcategory open beside its panel (core: left 100%); near the right edge
	   of the page they open towards the left instead. */
	.oc-header__nav .wp-block-navigation .oc-menu-products > .wp-block-navigation__submenu-container {
		top: calc(-1 * var(--wp--preset--spacing--30) - 1px);
		min-width: 18rem;
	}

	.oc-header__nav .wp-block-navigation__container > .has-child:nth-last-child(-n + 4) .oc-menu-products > .wp-block-navigation__submenu-container {
		left: auto;
		right: 100%;
	}

	.oc-header__nav .wp-block-navigation .oc-menu-products > .wp-block-navigation__submenu-icon {
		margin-inline-start: auto;
		padding-inline-start: var(--wp--preset--spacing--20);
	}

	.oc-header__nav .wp-block-navigation .oc-menu-products > .wp-block-navigation__submenu-icon svg {
		transform: rotate(-90deg);
	}
}

/* In the overlay the products of a subcategory stay on the subcategory's page (the list would
   otherwise be several screens long); a category without subcategories shows its products. */
@media (max-width: 74.99rem) {
	.oc-header__nav .wp-block-navigation__responsive-container.is-menu-open .oc-menu-products > .wp-block-navigation__submenu-container,
	.oc-header__nav .wp-block-navigation__responsive-container.is-menu-open .oc-menu-products > .wp-block-navigation__submenu-icon {
		display: none;
	}

	.oc-header__nav .wp-block-navigation__responsive-container.is-menu-open .oc-menu-product .wp-block-navigation-item__content {
		font-size: var(--wp--preset--font-size--small);
	}
}

/* --- Bottom navigation on phones (parts/mobile-nav.html) --------------------------------------
   Hjem · Meny · Søk · Handlekurv · Kontakt, fixed to the bottom edge below 782px. «Meny» opens the
   header's overlay menu and «Søk» moves to the search field (functions.php, a few lines of script);
   without the script they lead to the catalogue and the search page. */
.oc-mobile-nav {
	display: none;
}

/* The Site Editor shows the part as it looks on a phone (this stylesheet is an editor style too). */
.editor-styles-wrapper .oc-mobile-nav {
	display: block;
	position: static;
	max-inline-size: 30rem;
	border: 1px solid var(--wp--preset--color--border);
}

.editor-styles-wrapper .oc-mobile-nav__list {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
}

.editor-styles-wrapper .oc-mobile-nav__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15rem;
	padding: 0.5rem 0;
	font-size: var(--wp--preset--font-size--x-small);
	text-decoration: none;
	color: var(--wp--preset--color--contrast-muted);
}

.editor-styles-wrapper .oc-mobile-nav__badge[hidden] {
	display: none;
}

@media (max-width: 781px) {
	:root {
		--oc-mobile-nav-height: 3.75rem;
	}

	body {
		padding-block-end: calc(var(--oc-mobile-nav-height) + env(safe-area-inset-bottom, 0px));
	}

	.oc-mobile-nav {
		display: block;
		position: fixed;
		inset-inline: 0;
		inset-block-end: 0;
		z-index: 90;
		padding-block-end: env(safe-area-inset-bottom, 0px);
		background: var(--wp--preset--color--base);
		border-top: 1px solid var(--wp--preset--color--border);
		box-shadow: 0 -4px 16px rgb(23 22 20 / 8%);
	}

	.oc-mobile-nav__list {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.oc-mobile-nav__item {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 0.15rem;
		min-block-size: var(--oc-mobile-nav-height);
		color: var(--wp--preset--color--contrast-muted);
		font-size: var(--wp--preset--font-size--x-small);
		font-weight: 600;
		line-height: 1.2;
		text-decoration: none;
	}

	.oc-mobile-nav__item:is(:hover, :focus-visible),
	.oc-mobile-nav__item[aria-current="page"] {
		color: var(--wp--preset--color--contrast);
	}

	.oc-mobile-nav__item[aria-current="page"] .oc-mobile-nav__icon {
		color: var(--wp--preset--color--brand-text);
	}

	.oc-mobile-nav__icon {
		inline-size: 1.5rem;
		block-size: 1.5rem;
	}

	.oc-mobile-nav__badge {
		position: absolute;
		inset-block-start: 0.4rem;
		inset-inline-start: calc(50% + 0.3rem);
		min-inline-size: 1.1rem;
		block-size: 1.1rem;
		padding-inline: 0.25rem;
		border-radius: 999px;
		background: var(--wp--preset--color--brand);
		color: var(--wp--preset--color--contrast);
		font-size: 0.65rem;
		line-height: 1.1rem;
		text-align: center;
	}

	.oc-mobile-nav__badge[hidden] {
		display: none;
	}

	/* The compare bar sits above the bottom navigation. */
	.oc-compare-bar {
		inset-block-end: calc(var(--oc-mobile-nav-height) + env(safe-area-inset-bottom, 0px));
	}
}

/* Empty cart: calmer than WooCommerce's default crying face. */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
	display: none;
}

.wp-block-woocommerce-empty-cart-block .wp-block-separator {
	display: none;
}