/* Trondheim Maskinutleie — project design implementation.
   Ports the approved "Nettside 2.0" prototype (design_handoff) into the site,
   re-skinned to the trimmed project palette. NO ORANGE, NO TEAL — this project's
   single action colour is LOGO-BLUE, straight from the wordmark:
     primary   = #00486A (navy, headings / dark surfaces / footer)
     logo-blue = #558ED5 (action colour — CTAs, eyebrows, numbers, rules, hovers)
     surface   = #f0f7fa
   Typography is Oswald (display) + Inter (body) per client sign-off. */

/* Stardos Stencil — closest free web font to the logo's stencil "army" wordmark
   (the logo itself is a PNG, so the exact face can't be extracted). Used for the
   HERO heading only. */
@import url('https://fonts.bunny.net/css?family=stardos-stencil:400,700&display=swap');

:root {
	--tmu-primary: #00486a;
	--tmu-teal: #558ed5; /* legacy var name; value is now logo-blue */
	--tmu-accent: #558ed5;
	--tmu-surface: #f0f7fa;
	--tmu-ink: #00486a;
	--tmu-body: #5a6b76;
	--tmu-line: #e2ecf0;
	--tmu-content: 1200px;
	/* No orange/teal in this project: any styrk-block that falls back to the
	   brand accent (orange #F5833C) is redirected to logo-blue here. */
	--wp--preset--color--accent: #558ed5;
	/* The parent theme paints every focus ring with
	   `var(--wp--preset--color--secondary, #0084AF) !important`. That variable
	   is undefined here, so without this line every keyboard focus ring on the
	   site renders in the banned teal. Navy gives 9.8:1 on white. */
	--wp--preset--color--secondary: #00486a;
	--wp--preset--color--accent-80: #77a5dd;
	--wp--preset--color--accent-50: #aac7ea;
	/* ONE shared rail for the whole page. The shared header + footer defaulted
	   to --cb-content-max 1280 / --cb-rail 3.25rem, while the content sections
	   use --content-width 1200 / 24px padding — so the header logo, the section
	   content, and the footer columns all sat on DIFFERENT left/right edges.
	   Collapse the header/footer rail onto the 1200/24 content rail so every
	   section's outer edges line up on the same vertical lines. */
	--cb-content-max: 1200px;
	--cb-rail: 24px;

	/* Product presentation. Every value here is the shipped default; the
	   "Utseende" section under WooCommerce → Settings → Products prints an
	   override block after this stylesheet (see inc/product-appearance.php).
	   Archive cards and the single product page both read these, so the two
	   stay in sync from one place. */
	--tmu-card-radius: 4px;
	--tmu-card-bg: #fff;
	--tmu-card-border-width: 1px;
	--tmu-card-border-color: #e2ecf0;
	--tmu-card-shadow: 0 2px 6px rgba(0, 72, 106, 0.05);
	--tmu-card-shadow-hover: 0 22px 44px -20px rgba(0, 72, 106, 0.3);
	--tmu-card-img-ratio: 1 / 1;
	--tmu-card-img-fit: contain;
	--tmu-card-img-pad: 0px;
	--tmu-card-img-border-width: 0px;
	--tmu-card-img-border-color: #e2ecf0;
	--tmu-product-btn-radius: 10px;
	--tmu-shop-bg: transparent;
	/* Card CTA icon buttons (ring / e-post). */
	--tmu-iconbtn-bg: #fff;
	--tmu-iconbtn-fg: #00486a;
	--tmu-iconbtn-border: #e2ecf0;
	--tmu-iconbtn-bg-hover: #fff;
	--tmu-iconbtn-fg-hover: #558ed5;
}

/* ─────────── shared bits ─────────── */
.tmu-wrap {
	max-width: var(--tmu-content);
	margin-inline: auto;
	padding-inline: 24px;
}
.tmu-eyebrow {
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tmu-teal);
}
.tmu-h2 {
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	font-size: clamp(2rem, 3.4vw, 2.9rem);
	line-height: 1.08;
	letter-spacing: -0.005em;
	color: var(--tmu-ink);
	margin: 12px 0 0;
}
.tmu-lead {
	margin: 12px 0 0;
	color: var(--tmu-body);
	font-size: 17px;
	max-width: 54ch;
	line-height: 1.6;
}

/* buttons */
.tmu-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	border: none;
	cursor: pointer;
	border-radius: 11px;
	padding: 13px 20px;
	transition: transform 0.15s, box-shadow 0.15s, filter 0.15s,
		background 0.15s, border-color 0.15s;
}
.tmu-btn--accent {
	background: var(--tmu-accent);
	color: #fff;
	box-shadow: 0 12px 30px -10px rgba(85, 142, 213, 0.55);
}
.tmu-btn--accent:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 36px -10px rgba(85, 142, 213, 0.65);
}
.tmu-btn--dark {
	background: var(--tmu-primary);
	color: #fff;
}
.tmu-btn--dark:hover {
	filter: brightness(1.15);
}
.tmu-btn--outline {
	background: none;
	border: 1.5px solid var(--tmu-line);
	color: var(--tmu-ink);
}
.tmu-btn--outline:hover {
	border-color: var(--tmu-teal);
	background: var(--tmu-surface);
}

/* ─────────── value props (numbered, editorial — no cards) ─────────── */
.tmu-vps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
	gap: clamp(28px, 4vw, 44px);
	padding-block: clamp(48px, 6vw, 72px);
}
.tmu-vp__num {
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.16em;
	color: var(--tmu-teal);
}
.tmu-vp__rule {
	height: 3px;
	width: 34px;
	background: var(--tmu-accent);
	border-radius: 2px;
	margin: 14px 0 18px;
}
.tmu-vp__h {
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	font-size: 19px;
	margin: 0 0 8px;
	color: var(--tmu-ink);
}
.tmu-vp__p {
	margin: 0;
	color: var(--tmu-body);
	font-size: 15px;
	line-height: 1.55;
}

/* ─────────── category cards (image well + multiply + hover) ─────────── */
.tmu-cats-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 38px;
}
.tmu-cats {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 24px;
}
.tmu-cat {
	display: block;
	text-align: left;
	background: #fff;
	border: 1px solid var(--tmu-line);
	border-radius: 18px;
	overflow: hidden;
	text-decoration: none;
	box-shadow: 0 2px 6px rgba(0, 72, 106, 0.05);
	transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.tmu-cat:hover {
	transform: translateY(-4px);
	box-shadow: 0 22px 44px -20px rgba(0, 72, 106, 0.3);
	border-color: rgba(85, 142, 213, 0.45);
}
.tmu-cat__well {
	background: #fff;
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
}
.tmu-cat__well img {
	max-height: 100%;
	max-width: 100%;
	width: auto;
	object-fit: contain;
	mix-blend-mode: multiply; /* melts white studio bg into the card */
}
.tmu-cat__body {
	padding: 18px 22px 22px;
	border-top: 1px solid #eef4f7;
}
.tmu-cat__h {
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	font-size: 18px;
	color: var(--tmu-ink);
	margin: 0;
}
.tmu-cat__p {
	margin: 7px 0 0;
	color: var(--tmu-body);
	font-size: 14px;
	line-height: 1.5;
}

.tmu-section-pad {
	padding-block: clamp(56px, 7vw, 88px);
}

/* Front-page "Velg kategori" — now a DYNAMIC [product_categories] grid (real
   WooCommerce categories, auto-synced) instead of hardcoded cards. The shortcode
   renders a full-width .woocommerce wrapper, so cap + centre it on the content
   rail and tuck it under the section header (which keeps its own bottom pad off). */
.home .tmu-cats-section {
	padding-bottom: 0;
}
.home .woocommerce ul.products {
	margin-top: 8px;
	margin-bottom: clamp(56px, 7vw, 88px);
}

/* Keep the product / category grid on the SAME 1200 content rail the header and
   footer use, so the cards' outer edges line up with the logo and footer columns
   instead of spilling wider than them. The full-bleed BANDS (hero, arch-header)
   break out on their own 100vw rule, so capping the .woocommerce wrapper here
   only reins in the grid + result-count/ordering row. */
.home .woocommerce,
.post-type-archive-product ul.products,
.post-type-archive-product .woocommerce-result-count,
.post-type-archive-product .woocommerce-ordering,
.tax-product_cat ul.products,
.tax-product_cat .woocommerce-result-count,
.tax-product_cat .woocommerce-ordering,
.tax-product_tag ul.products {
	max-width: var(--tmu-content, 1200px);
	margin-inline: auto;
	padding-inline: 24px;
	box-sizing: border-box;
}
/* WooCommerce floats the result-count + ordering, which makes margin-inline:auto
   compute to 0 — so they hugged the viewport edge while the grid sat centred on
   the rail. Unfloat them so they centre on the same 1200 rail as the cards. */
.post-type-archive-product .woocommerce-result-count,
.post-type-archive-product .woocommerce-ordering,
.tax-product_cat .woocommerce-result-count,
.tax-product_cat .woocommerce-ordering,
.tax-product_tag .woocommerce-result-count,
.tax-product_tag .woocommerce-ordering {
	float: none;
}

/* ─────────── tune the styrk blocks we keep ─────────── */
/* Om-oss split image: melt the white product photo into the frame */
.cb-block-split img,
.cb-split img {
	mix-blend-mode: multiply;
}

@media (prefers-reduced-motion: reduce) {
	.tmu-btn,
	.tmu-cat {
		transition: none;
	}
	.tmu-btn:hover,
	.tmu-cat:hover {
		transform: none;
	}
}


/* ─────────── WooCommerce product cards (category + shop archives) ───────────
   WooCommerce ships li.product as floated blocks with natural-height images,
   so cards are ragged and each "Ring Tor" CTA sits at a different height.
   Rebuild the loop as a CSS grid of equal-height cards: a uniform image well
   (same W×H for every product, portrait or landscape) and the CTA pinned to
   the card bottom so all buttons align on one line. */
.woocommerce ul.products {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 28px;
	margin: 0 auto 48px; /* auto = stay centred on the 1200 rail (see cap above) */
	padding-block: 0; /* keep the cap rule's padding-inline:24 rail gutter */
	list-style: none;
}
/* WooCommerce's clearfix pseudo-elements would become stray grid cells. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
	display: none !important;
}
.woocommerce ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	display: flex;
	flex-direction: column;
	background: var(--tmu-card-bg);
	border: var(--tmu-card-border-width) solid var(--tmu-card-border-color);
	border-radius: var(--tmu-card-radius);
	overflow: hidden;
	padding: 0 0 20px;
	box-shadow: var(--tmu-card-shadow);
	transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.woocommerce ul.products li.product:hover {
	transform: translateY(-4px);
	box-shadow: var(--tmu-card-shadow-hover);
	border-color: rgba(85, 142, 213, 0.45);
}
/* Image + title link grows to fill, pushing the CTA to the bottom. */
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	text-decoration: none;
}
/* Uniform image well — identical box for every product. A square well plus
   `contain` means square AND landscape studio shots fill the card's full width
   edge-to-edge (no side gutters), while nothing ever gets cropped. The old
   4/3 well + 20px padding letterboxed every image into the middle of the card. */
/* "Luft rundt bildet" is padding inside the image well: the well keeps its full
   card width and the picture shrinks within it. The `a img` selector is
   required, not decorative: WooCommerce ships
   `li.product a img { width:100%; margin:0 0 1em }`, which outranks a plain
   `li.product img`. */
.woocommerce ul.products li.product img,
.woocommerce ul.products li.product a img {
	aspect-ratio: var(--tmu-card-img-ratio);
	object-fit: var(--tmu-card-img-fit);
	width: 100%;
	height: auto;
	margin: 0 0 16px;
	padding: var(--tmu-card-img-pad);
	border: var(--tmu-card-img-border-width) solid var(--tmu-card-img-border-color);
	box-sizing: border-box; /* padding + border eat into the well, never grow it */
	background: var(--tmu-card-bg);
	mix-blend-mode: multiply;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	font-size: 18px;
	line-height: 1.2;
	color: var(--tmu-ink);
	padding: 0 20px;
	margin: 0;
}
/* Category-card title. WooCommerce uses a DIFFERENT class for category loops
   (.woocommerce-loop-category__title) than for product loops, and it shipped
   with no inset — so the label + count sat flush against the card's left edge.
   Give it the same horizontal gutter as the rest of the card. */
.woocommerce ul.products li.product-category .woocommerce-loop-category__title {
	padding: 0 16px;
}
/* Quiet contact row pinned to the card bottom (call + e-post icon buttons).
   The card image/title already links to the product, so this stays subtle
   instead of a loud repeated phone pill. */
.woocommerce ul.products li.product .tmu-card-contact {
	display: flex;
	gap: 8px;
	margin: 16px 20px 0;
}
.tmu-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1.5px solid var(--tmu-iconbtn-border);
	border-radius: var(--tmu-product-btn-radius);
	background: var(--tmu-iconbtn-bg);
	color: var(--tmu-iconbtn-fg);
	text-decoration: none;
	transition: color 0.18s, border-color 0.18s, background 0.18s;
}
/* Hover tints the glyph and the edge; it no longer floods the button with a
   pale fill. The border tracks the hover glyph colour so the affordance is
   never carried by colour alone. */
.tmu-icon-btn:hover,
.tmu-icon-btn:focus-visible {
	color: var(--tmu-iconbtn-fg-hover);
	border-color: var(--tmu-iconbtn-fg-hover);
	background: var(--tmu-iconbtn-bg-hover);
}
/* Keyboard focus must stay distinguishable from hover, and survive whatever
   colours the client picks for the button. The parent theme sets its focus ring
   with `!important`, so beating it needs `!important` back — a 3px navy ring
   plus a white gap, which keeps >=3:1 against a light card AND against a
   saturated hover fill. The hover fill alone is NOT a focus indicator: hover
   and focus would then look identical to a keyboard user. */
.woocommerce ul.products li.product .tmu-icon-btn:focus-visible {
	outline: 3px solid var(--tmu-primary) !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 2px #fff;
}
/* The card link fills the card, and the card is `overflow: hidden` (needed to
   clip the image to the rounded corners). That clips the link's own focus ring
   down to a sliver along the bottom edge — the ring is drawn, just invisible.
   So hoist it onto the card element, whose outline its own overflow can't clip. */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link:focus-visible {
	outline: none !important;
}
.woocommerce ul.products li.product:has(a.woocommerce-LoopProduct-link:focus-visible) {
	outline: 3px solid var(--tmu-primary);
	outline-offset: 2px;
}
.tmu-icon-btn svg {
	display: block;
}
@media (prefers-reduced-motion: reduce) {
	.tmu-icon-btn {
		transition: none;
	}
}
@media (prefers-reduced-motion: reduce) {
	.woocommerce ul.products li.product {
		transition: none;
	}
	.woocommerce ul.products li.product:hover {
		transform: none;
	}
}

/* ─────────── Single product page ───────────
   Default WooCommerce ships a full-bleed, float-based two-column layout with
   oversized 20px body copy and a title that overflows its column. Cap it to the
   site content rail, tighten the type rhythm, and give the CTA + meta room. */
.woocommerce div.product {
	max-width: var(--cb-content-max, 1280px);
	margin: clamp(24px, 4vw, 48px) auto;
	padding: 0 var(--cb-rail, 1rem);
	box-sizing: border-box;
}
/* Keep the default gallery|summary split but let each column shrink so long
   words/titles wrap instead of overflowing. */
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product .entry-summary {
	min-width: 0;
}
.woocommerce div.product .product_title {
	font-family: 'Oswald', 'Arial Narrow', system-ui, sans-serif;
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	line-height: 1.1;
	margin: 0 0 0.5rem;
	overflow-wrap: break-word;
	color: var(--tmu-ink);
}
/* Bold intro line (short description lead) + body rhythm. Cap the measure so
   lines don't run the full 680px column, and drop 20px → ~16.5px with 1.6
   line-height and tighter paragraph gaps for a calm, readable block. */
.woocommerce div.product .woocommerce-product-details__short-description {
	max-width: 62ch;
	color: var(--tmu-ink);
}
.woocommerce div.product .woocommerce-product-details__short-description p {
	font-size: 1.0625rem;
	line-height: 1.6;
	margin: 0 0 0.75rem;
}
.woocommerce div.product .woocommerce-product-details__short-description p:last-child {
	margin-bottom: 0;
}
/* CTA + meta breathing room — the "Ring Tor" button and the product meta were
   jammed together directly under the copy. */
.woocommerce div.product .entry-summary .tmu-single-contact {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 1.5rem 0 0;
}
.woocommerce div.product .entry-summary .tmu-single-contact .tmu-product-cta,
.woocommerce div.product .entry-summary .tmu-single-contact .tmu-product-cta-alt {
	margin: 0;
}
.woocommerce div.product .product_meta {
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--tmu-line);
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--tmu-muted, #5a6b78);
}
.woocommerce div.product .product_meta > span {
	display: block;
	margin-bottom: 0.25rem;
}
.woocommerce div.product .product_meta a {
	color: var(--tmu-accent, #558ed5);
	text-decoration: none;
}
.woocommerce div.product .product_meta a:hover {
	text-decoration: underline;
}

/* ─── Product tabs (Beskrivelse + any custom tabs registered in functions.php) ─── */
.woocommerce div.product .woocommerce-tabs {
	max-width: var(--cb-content-max, 1280px);
	margin: clamp(2rem, 5vw, 3.5rem) auto 0;
	padding: 0 var(--cb-rail, 1rem);
	box-sizing: border-box;
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin: 0 0 1.5rem;
	padding: 0 0 0;
	border-bottom: 2px solid var(--tmu-line);
	list-style: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after {
	display: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: 0.65rem 1.1rem;
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--tmu-muted, #5a6b78);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--tmu-ink);
	border-bottom-color: var(--tmu-accent, #558ed5);
}
.woocommerce div.product .woocommerce-tabs .panel {
	max-width: 68ch;
	margin: 0;
	color: var(--tmu-ink);
}
.woocommerce div.product .woocommerce-tabs .panel h2:first-child {
	font-family: 'Oswald', sans-serif;
	font-size: 1.35rem;
	margin: 0 0 0.75rem;
}
.woocommerce div.product .woocommerce-tabs .panel p {
	font-size: 1.0625rem;
	line-height: 1.6;
	margin: 0 0 0.75rem;
}

@media (max-width: 768px) {
	.woocommerce div.product .product_title {
		font-size: clamp(1.5rem, 7vw, 2rem);
	}
}

/* Page-header title — this project's display type is Oswald everywhere, not
   the styrk-blocks default Fraunces serif. Keep the band, swap the face.
   Also CAP the size: styrk-blocks ships a fixed 104px, which is absurd for an
   inner-page title — clamp it to a responsive display size. */
.cb-page-header__title {
	font-family: 'Oswald', 'Arial Narrow', system-ui, -apple-system, sans-serif !important;
	font-weight: 600 !important;
	letter-spacing: -0.005em;
	font-size: clamp(2.25rem, 3.5vw + 1rem, 3.75rem) !important;
	line-height: 1.05 !important;
	max-width: 20ch;
}

/* The page-header block ships ~8-10rem top/bottom padding for overlay-hero
   clearance. But on inner pages it sits inside .cb-page-main, which ALREADY
   pads the top to clear the fixed header — so the block's own big padding just
   stacked into a huge empty light band above the title and below the subtitle.
   Trim it to modest internal spacing; cb-page-main handles header clearance. */
.cb-page-header {
	padding-top: clamp(1.5rem, 3vw, 2.5rem) !important;
	padding-bottom: clamp(1.5rem, 3vw, 2.5rem) !important;
}
/* page.html gives .cb-page-main a big top padding meant to clear an OVERLAY
   header — but on these inner pages the header is in-flow (position:relative),
   so that padding was just an ugly dead gap between the header and the surface
   band. Drop it so the band meets the header seamlessly (the band carries its
   own internal top padding for the breadcrumb). */
.cb-page-main {
	padding-top: 0 !important;
}
/* Hero heading SCALE only — no font-family here.
 *
 * The stencil face is NOT a site default. It is registered in theme.json purely
 * as a selectable family, and is applied per-heading via the hero block's
 * "Skrifttype" control (which emits an inline font-family). Setting it here
 * leaked the stencil onto every hero on every ordinary page (e.g. the privacy
 * page's auto-title). Headings otherwise inherit Oswald from theme.json. */
.cb-hero-content :is(h1, h2),
.cb-hero__main :is(h1, h2),
.text-hero,
.cb-hero .text-hero {
	letter-spacing: 0.01em;
	font-size: clamp(2.4rem, 5vw, 4.4rem) !important;
	line-height: 1.08;
}

/* No baked-in gap between the inner-page sections — spacing is controlled with
   Gutenberg spacer/divider blocks in the editor instead. The blocks ship a big
   96px `py-section`; on these short inner pages that read as dead gaps, so trim
   it right down and let the editor add spacers where separation is wanted. */
.cb-page-main > .entry-content > .alignfull:not(.cb-page-header) {
	padding-top: 0;
}
.cb-page-main .py-section {
	padding-top: clamp(1.25rem, 3vw, 2.25rem) !important;
	padding-bottom: clamp(1.25rem, 3vw, 2.25rem) !important;
}

/* FAQ accordion rows: the block's `divide-muted` hairline (#E2ECF0) is nearly
   invisible on the surface bg, so the terms list read as bare floating rows.
   Give each row a visible-but-subtle divider so the accordion has structure. */
.wp-block-styrk-blocks-faq-accordion [role="listitem"] + [role="listitem"] {
	border-top: 1px solid rgba(0, 72, 106, 0.13);
}

/* ── Inner pages (Kurs / Kontakt / Leievilkår): full-width sections ──────────
   styrk-theme/page.html double-constrains the content column to 720px — great
   for prose, but it also traps the full-width SECTIONS (page-header, faq,
   call-card, cta) at 720px with wide white gutters, so they read as broken.
   Break every alignfull section inside the reading column out to the viewport;
   each section's own inner wrapper keeps its CONTENT centred and capped. */
.cb-page-main .alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
/* 100vw is viewport-incl-scrollbar, so it overhangs by the scrollbar width →
   a faint horizontal scroll. Clip it on the block wrapper (overflow-x:clip
   doesn't create a scroll container, so the sticky header is unaffected). */
.wp-site-blocks {
	overflow-x: clip;
}

/* Full-bleed hero on the shop. WooCommerce wraps the shop content (incl. any
   hero placed in the shop page's description) in a width-capped container, so
   an `alignfull` hero can't reach the edges and its dark background sits inset
   with white gutters — mismatched against the full-width header. Break it out to
   the viewport edges (the hero's own inner rail keeps the CONTENT capped). */
.woocommerce .cb-hero,
.post-type-archive-product .cb-hero {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
/* WooCommerce pipes the shop's archive description (which holds this hero block)
   through wpautop, which converts the newline after the <h2> open tag into a
   stray LEADING <br>. That empty first line stranded the eyebrow far above the
   title. Hero titles never use an intentional break, so drop it on the shop. */
.post-type-archive-product .cb-hero-content :is(h1, h2) br {
	display: none;
}
/* 100vw is viewport-incl-scrollbar, so it overhangs the usable width by the
   scrollbar (~8px) → a faint horizontal scroll. Clip it on the block wrapper
   (body/viewport overflow propagates, so clipping there doesn't work).
   overflow-x:clip (not hidden) doesn't create a scroll container, so the
   header's sticky/relative behaviour is unaffected. */
.post-type-archive-product .wp-site-blocks {
	overflow-x: clip;
}

/* Readability: body copy was the same heavy navy (#00486A) as the headings, so
   nothing led and long paragraphs read cold/dense. Soften long-form body text
   to a slate — headings stay navy and now clearly lead. */
.woocommerce div.product .woocommerce-product-details__short-description p,
.cb-page-header__intro,
.cb-page-header__lead {
	color: #47566a;
}

/* Header logo — enforce the react-header's intended sizing on EVERY template.
   The block's own stylesheet (.rh-logo { height:44px }) is not enqueued on
   WooCommerce archive pages, so the mounted logo renders at its native size
   (978×219). project.css loads site-wide, so we pin it here as a safety net. */
.rh-logo,
.site-header-react .rh-logo,
.react-header-live-wrapper img {
	height: 44px !important;
	width: auto !important;
	display: block;
}
@media (max-width: 782px) {
	.rh-logo,
	.site-header-react .rh-logo,
	.react-header-live-wrapper img {
		height: 36px !important;
	}
}

/* ─────────── Product archive landing pages (category / tag) ───────────
   Branded editorial band (rendered in functions.php → archive_branded_header)
   that replaces WooCommerce's bare flush-left title. Self-contained so it
   doesn't depend on the page-header block stylesheet (not loaded on archives).
   Full-bleed: the woo archive wraps content in a width-capped container, so
   break the band out to the viewport edges like the shop hero. */
.tmu-arch-header {
	background: var(--tmu-surface);
	border-bottom: 1px solid var(--tmu-line);
	/* Mirrors .cb-page-header so archives read exactly like the other inner
	   pages. NOTE: these are re-declared in the high-specificity rule below —
	   see the comment there. This copy only applies if the band is ever nested
	   deeper than a direct child of <main>. */
	padding-top: clamp(1.5rem, 3vw, 2.5rem) !important;
	padding-bottom: clamp(1.5rem, 3vw, 2.5rem) !important;
	/* The block-theme wrapper stamps `alignwide` on hooked WooCommerce output,
	   whose max-width (wide-size) beats a plain width:100vw. Force the breakout
	   so the band reaches both viewport edges like the page-header on normal
	   pages. Gutter lives on __inner so the band bg stays edge-to-edge. */
	padding-inline: 0 !important;
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}
/* Air between the surface band and the content below. The BAND owns this space,
   so it holds no matter what renders first: a product list (result-count + sort)
   or a subcategory grid (bare ul.products, no result-count). The old rule hung
   the margin off .woocommerce-result-count, so category pages that show
   subcategories — e.g. /utleie/betongutstyr/ — sat flush against the band.
   Adjacent margins collapse, so the sibling rule below can't double it up. */
/* styrk-blocks' style-index.css sets `padding: 0 !important; margin-top: 0
   !important; margin-bottom: 0 !important` on EVERY direct child of <main>
   (`.wp-site-blocks > main:not(.cb-page-main) > *`, specificity 0-2-1), because
   its section blocks own their padding. A bare `.tmu-arch-header` (0-1-0) loses
   to that even with !important — which is why the band rendered with zero
   internal padding AND no bottom air on every product archive. Match the same
   context so these legitimately win.

   The band owns its bottom spacing, so it holds whether what follows is a
   result-count + sort row, or a bare subcategory ul.products. */
.wp-site-blocks > main:not(.cb-page-main) > .tmu-arch-header {
	padding-top: clamp(1.5rem, 3vw, 2.5rem) !important;
	padding-bottom: clamp(1.5rem, 3vw, 2.5rem) !important;
	padding-inline: 0 !important;
	margin-bottom: clamp(2.5rem, 5vw, 4rem) !important;
}
/* The shop archive (/butikk/) has no band — keep its own top air. */
.post-type-archive-product .woocommerce-result-count,
.post-type-archive-product .woocommerce-notices-wrapper + ul.products,
.post-type-archive-product ul.products:first-child {
	margin-top: clamp(2.5rem, 5vw, 4rem) !important;
}
/* Match the content column exactly: the product grid and the site logo both sit
   at (content-max centred) + 24px, so the header text needs the same gutter or
   it hangs 24px to the left of everything below it. */
.tmu-arch-header__inner {
	max-width: var(--tmu-content);
	margin-inline: auto;
	padding-inline: var(--cb-rail, 24px);
	box-sizing: border-box;
}
.tmu-arch-header__crumbs {
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	color: var(--tmu-body);
	margin: 0 0 22px;
}
.tmu-arch-header__crumbs a {
	color: var(--tmu-body);
	text-decoration: none;
}
.tmu-arch-header__crumbs a:hover {
	color: var(--tmu-accent);
}
.tmu-arch-header__sep {
	margin: 0 9px;
	opacity: 0.5;
}
.tmu-arch-header__title {
	font-family: 'Oswald', 'Arial Narrow', system-ui, sans-serif;
	font-weight: 600;
	font-size: clamp(2.25rem, 3.5vw + 1rem, 3.75rem);
	line-height: 1.05;
	letter-spacing: -0.005em;
	color: var(--tmu-ink);
	margin: 10px 0 0;
	max-width: 20ch;
}
.tmu-arch-header__rule {
	width: 34px;
	height: 3px;
	background: var(--tmu-accent);
	border: 0;
	border-radius: 2px;
	margin: 20px 0 0;
}
.tmu-arch-header__sub {
	margin: 18px 0 0;
	color: #47566a;
	max-width: 60ch;
	font-size: 16px;
	line-height: 1.6;
}
/* The shop page renders the page-header BLOCK inside WooCommerce's width-capped
   .content-area, so its own `alignfull` breakout never reaches the viewport.
   Force it, so /utleie/ matches the category archives and the normal pages. */
.woocommerce-products-header .cb-page-header,
.content-area .cb-page-header.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* 100vw breakout overhangs by the scrollbar width → clip it on the archive. */
.tax-product_cat .wp-site-blocks,
.tax-product_tag .wp-site-blocks,
.woocommerce-page .wp-site-blocks,
.post-type-archive-product .wp-site-blocks {
	overflow-x: clip;
}

/* Result count + ordering row — WooCommerce ships them unstyled (a raw select
   floating top-right). Give them the site's type + a tidy control. */
.woocommerce .woocommerce-result-count {
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	color: var(--tmu-body);
	margin: 0 0 24px;
}
.woocommerce .woocommerce-ordering select {
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	color: var(--tmu-ink);
	border: 1.5px solid var(--tmu-line);
	border-radius: var(--tmu-product-btn-radius);
	padding: 9px 14px;
	background: #fff;
	cursor: pointer;
	transition: border-color 0.18s;
}
.woocommerce .woocommerce-ordering select:hover,
.woocommerce .woocommerce-ordering select:focus-visible {
	border-color: var(--tmu-accent);
	outline: none;
}

/* Product CTA radius is scoped to the product pages so the shop settings can't
   reshape the hero/footer buttons that share the .tmu-btn class. */
.woocommerce div.product .tmu-btn {
	border-radius: var(--tmu-product-btn-radius);
}
/* Archive background. Default `transparent` keeps whatever the page/template
   already paints; a colour here tints the shop + category listings only. */
.tax-product_cat .content-area,
.tax-product_tag .content-area,
.post-type-archive-product .content-area {
	background: var(--tmu-shop-bg);
}

/* Single product: drop the meaningless "Produktnummer" (SKU = product name in a
   rental catalog) and add breathing room + a short trust note under the CTA. */
.woocommerce div.product .product_meta .sku_wrapper {
	display: none;
}
.tmu-single-note {
	margin: 14px 0 0;
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	line-height: 1.55;
	color: var(--tmu-body);
}

/* ─────────── Contact split (theme block pattern: kontakt-split) ───────────
   Two-column dark contact CTA that matches the Trondheim design (the built-in
   call-card is single-column, phone-only). Built from CORE blocks so it stays
   fully editable in Gutenberg — this CSS only handles the look: the dark band,
   the logo-blue phone card, the dark e-post card, the icon tiles (CSS mask) and
   the whole-card click target (stretched link). No shared-block fork. */
.tmu-contact {
	background: #14171c;
	color: #fff;
	padding: clamp(3rem, 6vw, 5rem) 24px !important;
}
.tmu-contact__cols {
	gap: clamp(2rem, 5vw, 4rem) !important;
}
.tmu-contact__eyebrow {
	color: var(--tmu-accent);
	margin: 0 0 14px;
}
.tmu-contact__title {
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	font-size: clamp(2rem, 3.4vw, 2.9rem);
	line-height: 1.08;
	color: #fff;
	margin: 0;
}
.tmu-contact__lead {
	color: #b8c2cf;
	font-size: 17px;
	line-height: 1.6;
	margin: 14px 0 0;
	max-width: 46ch;
}

/* Contact cards */
.tmu-contact-card {
	position: relative;
	border-radius: 16px;
	padding: 20px 22px 20px 84px; /* left inset for the icon tile */
	transition: transform 0.18s, filter 0.18s, border-color 0.18s;
}
.tmu-contact-card + .tmu-contact-card {
	margin-top: 14px;
}
.tmu-contact-card--phone {
	background: var(--tmu-accent);
}
.tmu-contact-card--email {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.12);
}
.tmu-contact-card:hover {
	transform: translateY(-2px);
}
.tmu-contact-card--phone:hover {
	filter: brightness(1.05);
}
.tmu-contact-card--email:hover {
	border-color: rgba(255, 255, 255, 0.28);
}
/* icon tile (::before) + glyph (::after, CSS mask so it inherits a flat colour) */
.tmu-contact-card::before {
	content: "";
	position: absolute;
	left: 22px;
	top: 50%;
	transform: translateY(-50%);
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.18);
}
.tmu-contact-card--email::before {
	background: rgba(255, 255, 255, 0.07);
}
.tmu-contact-card::after {
	content: "";
	position: absolute;
	left: 33px;
	top: 50%;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	background: #fff;
	-webkit-mask: var(--tmu-ico) center / 24px no-repeat;
	mask: var(--tmu-ico) center / 24px no-repeat;
}
.tmu-contact-card--phone {
	--tmu-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}
.tmu-contact-card--email {
	--tmu-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpolyline points='22,4 12,13 2,4'/%3E%3C/svg%3E");
}
.tmu-contact-card__label {
	margin: 0;
	font-size: 13px;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.82);
}
.tmu-contact-card--email .tmu-contact-card__label {
	color: #9aa6b3;
}
.tmu-contact-card__value {
	margin: 2px 0 0;
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	font-size: clamp(1.4rem, 2.2vw, 1.7rem);
	line-height: 1.1;
}
.tmu-contact-card__value a {
	color: #fff;
	text-decoration: none;
}
.tmu-contact-card--email .tmu-contact-card__value {
	font-size: clamp(1rem, 1.6vw, 1.15rem);
	word-break: break-word;
}
/* Stretched link — the whole card is the click target, but only the real
   <a> is in the DOM (accessible: one link, full-card hit area). */
.tmu-contact-card__value a::after {
	content: "";
	position: absolute;
	inset: 0;
}
@media (prefers-reduced-motion: reduce) {
	.tmu-contact-card {
		transition: none;
	}
	.tmu-contact-card:hover {
		transform: none;
	}
}

/* Footer "Følg oss": the standard 20px column-heading margin left an oversized
   gap above the small social icons. Tighten it just for the socials column. */
.site-footer__col-heading:has( + .site-footer__social ) {
	margin-bottom: 4px !important;
}
/* The two social icons were jammed together (0px between them). Lay the row out
   as a flex row with real spacing between the links, sitting right under the
   heading. */
.site-footer__social {
	display: flex !important;
	align-items: center;
	gap: 12px;
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* Long footer column heading (the full "Trondheim Maskinutleie AS") was ~5px
   too wide for its column, so "AS" wrapped onto an orphan second line. Tighten
   the uppercase tracking so it fits on one line; balance as a graceful fallback
   for any even-longer heading. */
.site-footer__col-heading {
	letter-spacing: 0.06em !important;
	text-wrap: balance;
}

/* Inline text-colour on the hero heading is applied via <mark>; strip its
   default yellow highlight background so only the text colour shows. */
.cb-hero mark,
.text-hero mark,
.cb-hero-content mark {
	background-color: transparent;
	padding: 0;
}