/*
 * FRAM theme stylesheet — THE stylesheet.
 * Registered as frontend style (inc/enqueue.php) AND editor style (inc/setup.php).
 * Every block-style's CSS lives here, banner-commented with its Figma node
 * and JS/PHP counterpart.
 */

/* -------------------------------------------------------------------------
 * Base — box model.
 * border-box everywhere (user decision 2026-08-10): content-box kept
 * producing padding-vs-dimension surprises (first hit: the sticky
 * section-nav card overshooting its viewport max-height cap by 2x
 * padding). Block CSS in the plugin stays self-contained and does not
 * rely on this reset.
 * ---------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* -------------------------------------------------------------------------
 * Base — font rendering.
 * Figma renders text with grayscale antialiasing; macOS browsers default
 * to heavier subpixel AA, which made e.g. the white header-nav text look
 * bolder than the comps (user 2026-08-10). Grayscale AA site-wide matches
 * the approved design. Inherited from body; no-op outside macOS engines.
 * ---------------------------------------------------------------------- */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* Full-bleed-pseudoer (100vw, f.eks. toolbar-keylinen på PLP) skal
	 * ikke gi horisontal scroll når OS-et har synlig scrollbar. clip
	 * lager IKKE scroll-container — sticky forblir viewport-basert. */
	overflow-x: clip;
}

/* -------------------------------------------------------------------------
 * Base — root padding (inset) on phones.
 * Figma phone comps (156:1303 etc.) use a 12px gutter; 40px (user
 * 2026-08-12, opp fra 20) on tablet/desktop. theme.json presets can't
 * be responsive, so the custom property is overridden here — everything
 * consuming the token (root padding, badge offset, infobar width)
 * follows automatically.
 * ---------------------------------------------------------------------- */

@media (max-width: 599px) {
	body {
		--wp--preset--spacing--inset: 12px;
	}
}

/* -------------------------------------------------------------------------
 * Base — full-viewport covers vs the admin bar.
 * The heroes/banners set min-height:100svh inline (block setting); with
 * the admin bar the page content starts below it, so 100svh overshoots
 * by the bar height. Subtract it when logged in — !important because
 * the block setting is an inline style. Quality gate: every layer
 * respects --wp-admin--admin-bar--height.
 * ---------------------------------------------------------------------- */

body.admin-bar .fram-hero,
body.admin-bar .fram-banner,
body.admin-bar .fram-single-hero,
body.admin-bar .fram-page-hero--full {
	min-height: calc(100svh - var(--wp-admin--admin-bar--height, 32px)) !important;
}

/* Single-hero uten featured image (useFeaturedImage → tom cover):
 * dim-laget alene blir flat grå over hvit side — gi coveren zinc-deep
 * som bakteppe, så fallbacken leser som brand-flate (dim 50% oppå). */
.fram-single-hero:not(:has(img)),
.fram-archive-hero:not(:has(img)) {
	background-color: var(--wp--preset--color--zinc-deep);
}

/* -------------------------------------------------------------------------
 * Base — kill UA heading margins.
 * Outside layout containers (e.g. post-template <li> card internals) the
 * browser's 1em heading margins survive and inflate stack gaps — a card
 * title at h-2 dumped 38px below itself where the system wants 20px.
 * :where() keeps specificity at 0 so WP's blockGap flow rules still
 * apply their margin-block-start in layout containers; author-origin
 * still beats the UA default. Rhythm belongs to blockGap + explicit
 * spacing tokens, never UA defaults.
 * ---------------------------------------------------------------------- */

:where(h1, h2, h3, h4, h5, h6) {
	margin-block: 0;
}

/* -------------------------------------------------------------------------
 * Base — display-heading overflow guard (phones).
 * Long Norwegian compounds ("polarheltenes", "Nordvestpassasjen") can
 * exceed the 335px content column even at the h-1 fluid minimum; an
 * unbreakable word widens the layout viewport and the whole page pans
 * sideways. overflow-wrap only (NOT hyphens: auto — that hyphenates to
 * optimize line filling even when the word fits, mangling headings).
 * Dormant unless a word alone overflows its line box.
 * ---------------------------------------------------------------------- */

@media (max-width: 599px) {
	.has-h-1-font-size,
	.has-h-2-font-size {
		overflow-wrap: break-word;
	}
}

/* -------------------------------------------------------------------------
 * core/button styles — Figma tokens frame 156:743 (button3, node 68:545)
 * PHP: inc/block-styles.php. Default (Zinc → Zinc Dark) via theme.json
 * elements.button. Hover colors from Figma variables:
 * rust1 → rust2, white → gray1, transparent inverts on hover.
 * ---------------------------------------------------------------------- */

.wp-block-button .wp-block-button__link {
	transition: background-color var(--wp--custom--transition--default),
		color var(--wp--custom--transition--default),
		border-color var(--wp--custom--transition--default);
}

.wp-block-button.is-style-rust .wp-block-button__link {
	background-color: var(--wp--preset--color--rust);
	color: var(--wp--preset--color--white);
}

.wp-block-button.is-style-rust .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--rust-dark);
}

.wp-block-button.is-style-light .wp-block-button__link {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--black);
}

.wp-block-button.is-style-light .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--gray-1);
	color: var(--wp--preset--color--black);
}

/* -------------------------------------------------------------------------
 * Icons. Innholds-ikoner = core/icon fra ikonsamlingen «fram» (WP 7.1
 * Icons API, plugin inc/icons.php): mønstrene setter ikon + avsnitt i
 * en flex-gruppe «fram-icon-row» (gap xs, 20px). Knapper med ikon
 * (klassen fram-icon--<navn> på core/button) får SVG-en injisert av
 * inc/icons.php. De gjenværende mask-tokenene under er KUN for chrome-
 * knapper som ikke er blokker (ch/drawer-triggere, ch/carousel-piler,
 * Woo mini-cart) — Figma-beskårne glyfer med håndsatt optisk størrelse.
 * Deklarasjon + konsumenter MÅ stå i samme stilark (relativ url()).
 * ---------------------------------------------------------------------- */

:root {
	--fram-icon-cart: url("https://frammuseum.no/wp-content/themes/fram/assets/icons/shopping-cart.svg"); /* Woo mini-cart-badge */
	--fram-icon-search: url("https://frammuseum.no/wp-content/themes/fram/assets/icons/search.svg");
	--fram-icon-menu: url("https://frammuseum.no/wp-content/themes/fram/assets/icons/dehaze.svg");
	--fram-icon-close: url("https://frammuseum.no/wp-content/themes/fram/assets/icons/close.svg");
}

.fram-icon-row > .wp-block-icon {
	flex-shrink: 0;
}

.wp-block-button.fram-icon .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.wp-block-button.fram-icon .wp-block-button__link svg {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	fill: currentColor; /* registeret stripper fill-attributtet */
}

/* -------------------------------------------------------------------------
 * Header nav — Figma 68:151. patterns/header.php.
 * Lives inside the hero on the front page; standalone on subpages.
 * ---------------------------------------------------------------------- */

.fram-nav {
	position: relative;
	border-radius: var(--wp--custom--radius);
	padding: 0.5rem 1.5rem;
	gap: 0.75rem;
}

/* The whole header row must stay visible AND clickable while the
 * (non-modal) menu overlay is open — the Meny/Lukk toggle lives here.
 * The drawer <dialog> (z 90) is a DOM CHILD of .fram-nav, so plain
 * z-index on the header is not enough: every sibling layer needs its
 * own position+z above 90. Pill background lives on ::before (z 94)
 * because a parent's background always paints below positive-z
 * children — the dialog would otherwise cover it. */
.fram-header {
	position: relative;
	z-index: 100;
	/* Padding lives in the pattern (inset token on all four sides).
	 * Default (templates without a hero): solid brand band so the white
	 * logo/nav stay visible. Hero templates use the fram-header-overlay
	 * template-part variant below. */
	background-color: var(--wp--preset--color--zinc-deep);
}

/* Overlay variant — template-part className on hero templates
 * (front-page, page-hero): transparent header floated over the hero,
 * which pads its own top to clear it. */
.fram-header-overlay .fram-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background: none;
}

/* Lys variant — template-part className (PDP først, user 2026-08-11):
 * brand-båndet av, logo black. Logoen er hvit SVG i en <img> (site-logo)
 * — fill kan ikke settes via CSS, så filter: invert(0.882) mapper
 * #FFF → #1E1E1E (token black). Nav-pillen står uendret (mørk glass
 * fungerer på lys flate). */
.fram-header-light .fram-header {
	background: none;
}

.fram-header-light .fram-header__logo img {
	filter: invert(0.882);
}

/* The overlay wrapper is zero-height (its only child is absolute), so
 * the root blockGap on the NEXT sibling paints as a white strip above
 * the hero — null it. Double selector beats core's :root :where rule. */
.wp-site-blocks > .fram-header-overlay + * {
	margin-block-start: 0;
}

/* Logged-in admin bar: WP exposes its height as a custom property —
 * shift every viewport-pinned layer below it. */
.admin-bar .fram-header-overlay .fram-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.admin-bar .fram-nav .ch-drawer__dialog {
	top: var(--wp-admin--admin-bar--height, 32px);
	height: calc(100dvh - var(--wp-admin--admin-bar--height, 32px));
}

.fram-nav::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.5);
	border-radius: var(--wp--custom--radius);
	z-index: 94;
}

.fram-nav > .fram-nav__item,
.fram-nav > .fram-nav__actions, /* core/navigation: Besøk/Billetter/Nettbutikk */
.fram-nav > nav, /* polylang/language-switcher wrapper */
.fram-nav .ch-drawer__trigger-wrap {
	position: relative;
	z-index: 95;
}

/* Header actions = core/navigation bound to the wp_navigation menu
 * «fram-header-actions» (nb + en). Items get the pill-item skin. */
.fram-nav .fram-nav__actions .wp-block-navigation-item {
	display: flex;
	align-items: center;
	padding: 0.75rem 1rem;
	border-radius: var(--wp--custom--radius);
	color: var(--wp--preset--color--white);
}

.fram-nav .fram-nav__actions .wp-block-navigation-item a {
	color: inherit;
	text-decoration: none;
}

/* Pill-dropdowns (Besøk / Om museet, core/navigation-submenu) — INGEN
 * Figma-comp finnes (bekreftet 2026-09-02): nøktern token-styling i
 * påvente av designgjennomgang. Hvit flate, keyline, radius-token;
 * hover/fokus-åpning + pil-knapp kommer fra core. */
.fram-nav .fram-nav__actions .wp-block-navigation__submenu-container {
	/* Under pill-wrapperen, ikke under li-en: klarer pillens 0.5rem
	 * bunnpadding (user 2026-09-02 — panelet overlappet pillen). */
	top: calc(100% + 0.5rem);
	background-color: var(--wp--preset--color--white);
	border: var(--wp--custom--keyline);
	border-radius: var(--wp--custom--radius);
	padding: 0.5rem;
	min-width: 16rem;
}

/* Usynlig hover-bro over gapet li → panel, ellers lukker
 * mouseleave dropdownen før pekeren når den. */
.fram-nav .fram-nav__actions .wp-block-navigation__submenu-container::before {
	content: "";
	position: absolute;
	top: -0.5rem;
	left: 0;
	right: 0;
	height: 0.5rem;
}

.fram-nav .fram-nav__actions .wp-block-navigation__submenu-container .wp-block-navigation-item {
	color: var(--wp--preset--color--black);
	padding: 0.5rem 0.75rem;
	white-space: nowrap;
	transition: background-color var(--wp--custom--transition--default);
}

.fram-nav .fram-nav__actions .wp-block-navigation__submenu-container .wp-block-navigation-item:hover {
	background-color: var(--wp--preset--color--gray-2);
}

/* Core padder lenkene i submenus selv — li-paddingen over eier rommet. */
.fram-nav .fram-nav__actions .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0;
}

.fram-header__logo {
	position: relative;
	z-index: 96;
}

/* Telefon: logo 170 → 124 og nav-gap 12 → 8 så logo + lupe + Meny +
 * handlekurv (48) får plass på 375 (rad 351: 124 + radgap 24 + 36 + 8 +
 * 96 + 8 + 48 = 344). Figma-compen 156:1305 har bare logo + Meny; lupe
 * og kurv er additive. Fast størrelse uansett kurv, så logoen ikke
 * hopper når kurven dukker opp. Core setter inline width på img —
 * max-width vinner uten !important. */
@media (max-width: 599px) {
	.fram-header__logo img {
		max-width: 124px;
		height: auto;
	}

	.fram-nav {
		gap: 0.5rem;
	}
}

.fram-nav .fram-nav__item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	border-radius: var(--wp--custom--radius);
	color: var(--wp--preset--color--white);
}

.fram-nav .fram-nav__item a {
	color: inherit;
	text-decoration: none;
}

.fram-nav .fram-nav__item--menu {
	background-color: var(--wp--preset--color--zinc);
	transition: background-color var(--wp--custom--transition--default);
}

.fram-nav .fram-nav__item--menu:hover {
	background-color: var(--wp--preset--color--zinc-dark);
}

.fram-nav .fram-nav__item--lang {
	padding-inline: 0;
}

.fram-nav .fram-nav__item--lang a {
	text-decoration: underline;
}

/* Polylang language switcher (polylang/language-switcher w/
 * hide_current) — header pill + menu overlay. Pattern siblings:
 * patterns/header.php (.fram-nav__item--lang), patterns/menu-overlay.php
 * (.fram-menu-overlay__lang). Reset the ul chrome; link styling comes
 * from the surrounding context rules. */
.wp-block-polylang-language-switcher {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wp-block-polylang-language-switcher li {
	margin: 0;
}

/* Mobile nav — Figma 156:1305: only logo + Meny button; the rest lives
 * in the (pending) mega-menu overlay. Grense 799 (var 899): tablet-
 * compen 156:875 viser FULL pill på 810. Full nb-nav trenger 864px
 * ukomprimert (logo 170 + pill 654 + gutters) — vinduet 800–899 får
 * derfor strammere item-padding under. */
@media (max-width: 799px) {
	.fram-nav {
		padding: 0;
	}

	.fram-nav::before {
		display: none;
	}

	/* Telefon-raden = logo + lupe + Meny (+ handlekurv når den har varer).
	 * Språkvelgeren bor i meny-overlayen; dens tomme <nav>-wrapper må
	 * også bort, ellers står den igjen som 0px flex-item og legger en
	 * gap til høyre for Meny (user 2026-09-07). */
	.fram-nav .fram-nav__item:not(.fram-nav__item--menu):not(.fram-nav__minicart),
	.fram-nav .fram-nav__actions,
	.fram-nav > nav:not(.fram-nav__actions) {
		display: none;
	}
}

/* Tablet-vindu 800–899: full pill, komprimert (16→8px sidepadding og
 * mindre gap) så nb-strengene får plass ned til 800. */
@media (min-width: 800px) and (max-width: 899px) {
	.fram-nav {
		gap: 4px;
	}

	.fram-nav .fram-nav__item,
	.fram-nav .fram-nav__actions .wp-block-navigation-item {
		padding-right: 0.5rem;
		padding-left: 0.5rem;
	}
}

/* -------------------------------------------------------------------------
 * Hero — Figma 68:150. patterns/hero.php.
 * core/cover with background video since 2026-08-10; padding is block
 * settings. ONLY the two-slot vertical layout (H1 centered in the
 * leftover space, infobar + badge at the bottom) lives here — cover
 * can't express that as settings. Cover core is a flex row; stretch
 * the inner container to full height and stack it as a column;
 * .fram-hero__middle flexes to eat the space above the infobar.
 * ---------------------------------------------------------------------- */

.fram-hero .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	align-self: stretch;
}

.fram-hero__middle {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
}

/* Infobar structure/skin = block settings in patterns/infobar.php
 * since 2026-08-10. Only what settings can't express lives here:
 * the phone stacking (core has no responsive orientation). Width
 * comes free: the wrapper spans the padded container, the pill hugs
 * on desktop and fills on phones. */

/* Mobile infobar — Figma 156:1315: stacked column, full width.
 * Grense 799: tablet-compen 156:875 viser rad-infobar på 810. */
@media (max-width: 799px) {
	.fram-infobar {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--xs);
		width: 100%;
	}
}

/* -------------------------------------------------------------------------
 * Menu overlay — Figma 158:1832 / 157:1547. ch/drawer (width full) in
 * patterns/header.php -> parts/menu-overlay.html -> fram/menu-overlay.
 * ---------------------------------------------------------------------- */

/* Trigger: the zinc "Meny" pill with dehaze icon. (Both header drawers —
 * Meny and Søk — share the .fram-nav .ch-drawer__trigger-wrap z-layer and
 * the admin-bar offset above.) */
.fram-menu-drawer .ch-drawer__trigger {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	border: 0;
	border-radius: var(--wp--custom--radius);
	background-color: var(--wp--preset--color--zinc);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--body);
	cursor: pointer;
	transition: background-color var(--wp--custom--transition--default);
}

.fram-menu-drawer .ch-drawer__trigger:hover {
	background-color: var(--wp--preset--color--zinc-dark);
}

.fram-menu-drawer .ch-drawer__trigger::before {
	content: "";
	flex-shrink: 0;
	/* Figma meny-glyph is 14x14 optical (the 20px Material box carries
	 * built-in padding our SVG asset doesn't). */
	width: 14px;
	height: 14px;
	background-color: currentColor;
	-webkit-mask: var(--fram-icon-menu) center / contain no-repeat;
	mask: var(--fram-icon-menu) center / contain no-repeat;
}

/* Same button toggles open/close: label swaps via labelOpen (view.js),
 * icon swaps dehaze -> close here. */
.fram-menu-drawer .ch-drawer__trigger[aria-expanded="true"]::before {
	-webkit-mask-image: var(--fram-icon-close);
	mask-image: var(--fram-icon-close);
}


/* Panel: fullscreen zinc-deep takeover. */
.fram-menu-drawer .ch-drawer__panel {
	background-color: var(--wp--preset--color--zinc-deep);
	color: var(--wp--preset--color--white);
}

/* Focus belongs on the links inside — never a ring around the whole
 * fullscreen dialog surface. */
.fram-menu-drawer .ch-drawer__dialog:focus,
.fram-menu-drawer .ch-drawer__dialog:focus-visible {
	outline: none;
}

/* The drawer's built-in close button is redundant here — the header's
 * Meny/Lukk toggle (visible above the non-modal panel) owns close. */
.fram-menu-drawer .ch-drawer__header {
	display: none;
}

/* Content column: top row / links / infobar. */
.fram-menu-drawer .ch-drawer__content {
	height: 100%;
}

.fram-menu-overlay {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 100%;
	/* Top padding clears the page header, which stays visible above the
	 * panel. */
	padding: 7.5rem var(--wp--preset--spacing--inset) var(--wp--preset--spacing--xl);
	gap: var(--wp--preset--spacing--xl);
}

.fram-menu-overlay a {
	color: inherit;
}

.fram-menu-overlay__top a {
	text-decoration: underline;
}

.fram-menu-overlay__nav {
	flex: 1 1 auto;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.fram-menu-overlay__nav a {
	font-family: var(--wp--preset--font-family--archivo-black);
	font-size: clamp(2rem, 4.25vw + 1rem, 3.375rem);
	line-height: 1;
	text-decoration: none;
}

.fram-menu-overlay__nav a:hover,
.fram-menu-overlay__nav a:focus-visible {
	text-decoration: underline;
	text-underline-position: from-font;
}

/* Eksterne lenker i overlayen (opensInNewTab — Virtuell omvisning, user
 * 2026-09-10): «åpnes i ny fane»-ikonet er inline SVG fra ikonsamlingen
 * «fram» (WP Icons API, plugin inc/icons.php), satt inn av temaets
 * inc/nav-external.php sammen med skjermleser-teksten. Her bare størrelse
 * relativt til skriften. */
.fram-nav-external__icon {
	width: 0.55em;
	height: 0.55em;
	margin-inline-start: 0.2em;
	vertical-align: 0.08em;
	fill: currentColor; /* registeret stripper fill-attributtet; core/icon-blokken gjør det samme i sin CSS */
}

/* Overlay infobar skin: transparent, white text. !important because
 * the pill's white/black now comes from preset classes
 * (has-white-background-color etc.), which core emits with
 * !important. */
.fram-menu-drawer .fram-infobar {
	background: none !important;
	color: var(--wp--preset--color--white) !important;
}

.fram-menu-drawer .fram-infobar a {
	color: inherit;
}

/* Desktop: Billetter/Nettbutikk/Søk/English live in the header pill
 * behind the dialog — hide the mobile-only rows. Double class beats
 * WP's `body .is-layout-flex` layout rule. */
@media (min-width: 800px) {
	.fram-menu-overlay .fram-menu-overlay__top,
	.fram-menu-overlay__nav .fram-menu-overlay__mobile-link {
		display: none;
	}
}

/* -------------------------------------------------------------------------
 * Search overlay — fullskjerm søk-lag (ingen Figma-comp; user 2026-09-07:
 * fullskjerm, hvit flate, ingen scope-velger). ch/drawer «fram-search»
 * (width full, non-modal) i patterns/header.php -> parts/search-overlay.html
 * -> fram/search-overlay. Søster-lag til meny-overlayen: samme chassis,
 * header synlig over panelet, single-at-a-time fra drawerens view.js.
 * Glue: assets/js/search-overlay.js (fokus ved åpning, overlayens
 * «Søk»-lenke som trigger).
 * ---------------------------------------------------------------------- */

/* Trigger: ikon-only hvit lupe i pillen (samme vekt som tekstlenkene —
 * Meny forblir eneste fylte element). Label lever for skjermlesere;
 * ikonet bytter til kryss når laget er åpent (labelOpen «Lukk» i JS). */
.fram-search-drawer .ch-drawer__trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 1rem;
	border: 0;
	border-radius: var(--wp--custom--radius);
	background: none;
	color: var(--wp--preset--color--white);
	cursor: pointer;
}

.fram-search-drawer .ch-drawer__trigger-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.fram-search-drawer .ch-drawer__trigger::before {
	content: "";
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: var(--fram-icon-search) center / contain no-repeat;
	mask: var(--fram-icon-search) center / contain no-repeat;
}

.fram-search-drawer .ch-drawer__trigger[aria-expanded="true"]::before {
	/* Samme 20px boks som lupen (ellers hopper pillens naboer 6px ved
	 * toggling — user 2026-09-07); kryss-glyfen tegnes 14px optisk inni. */
	-webkit-mask-image: var(--fram-icon-close);
	mask-image: var(--fram-icon-close);
	-webkit-mask-size: 14px;
	mask-size: 14px;
}

/* Telefon: lupen står ved siden av Meny (Figma 156:1305 har bare logo +
 * Meny; lupen er additiv). Strammere sidepadding så logo + lupe + Meny
 * får plass på 375 uten at Meny-etiketten brekker. Lys header (PDP):
 * pillens glass er av → hvit lupe på hvit flate — arv logoens sorte. */
@media (max-width: 799px) {
	.fram-search-drawer .ch-drawer__trigger {
		padding-inline: 0.5rem;
	}

	/* … og det samme for handlekurv-ikonet (arver hvit fra
	 * .fram-nav__item; user 2026-09-07, usynlig på PDP). */
	.fram-header-light .fram-search-drawer .ch-drawer__trigger,
	.fram-header-light .fram-nav .fram-nav__minicart {
		color: var(--wp--preset--color--black);
	}
}

/* Begge header-triggerne (Søk/Meny) er ett-linjes knapper — aldri brekk
 * etiketten når raden blir trang. */
.fram-nav .ch-drawer__trigger {
	white-space: nowrap;
}

/* Hero-templates har transparent header — med hvit overlay bak ville
 * den hvite logoen forsvinne. Båndet mørkner mens søket er åpent. Som
 * pillens glass: bakgrunnen må ligge på et pseudo-element med z over
 * dialogen (90) — headerens egen bakgrunn maler under sine positive-z-
 * barn, og dialogen er et DOM-barn av .fram-nav. */
.fram-header-overlay .fram-header:has(.fram-search-drawer[data-drawer-open])::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--wp--preset--color--zinc-deep);
	z-index: 92;
}

/* Panel: fullskjerm hvit flate; drawerens egen header/lukk er
 * overflødig (pillens trigger eier lukk, som for menyen). */
.fram-search-drawer .ch-drawer__panel {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--black);
	box-shadow: none;
}

.fram-search-drawer .ch-drawer__dialog:focus,
.fram-search-drawer .ch-drawer__dialog:focus-visible {
	outline: none;
}

.fram-search-drawer .ch-drawer__header {
	display: none;
}

.fram-search-drawer .ch-drawer__content {
	height: 100%;
	padding: 0;
}

.fram-search-overlay {
	/* Toppen klarer headeren (synlig over det ikke-modale panelet) —
	 * samme mål som meny-overlayen. */
	padding-top: 7.5rem;
	padding-bottom: var(--wp--preset--spacing--2-xl);
}

/* Feltet: form-systemet skalert opp — intro-størrelse, zinc ikon-knapp
 * inni rammen. Tripplet selektor slår cores button-inside-regler. */
.fram-search-overlay .fram-search-overlay__form .wp-block-search__inside-wrapper {
	border: 1px solid var(--wp--preset--color--gray-3);
	border-radius: var(--wp--custom--radius);
	padding: 4px;
	transition: border-color var(--wp--custom--transition--default);
}

.fram-search-overlay .fram-search-overlay__form .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--wp--preset--color--zinc);
}

.fram-search-overlay .fram-search-overlay__form .wp-block-search__input {
	border: 0;
	font-size: var(--wp--preset--font-size--intro);
	line-height: 1.4;
	padding: 0.75rem var(--wp--preset--spacing--sm);
}

.fram-search-overlay .fram-search-overlay__form .wp-block-search__input:focus {
	outline: none;
}

.fram-search-overlay .fram-search-overlay__form .wp-block-search__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	padding: 0;
	background-color: var(--wp--preset--color--zinc);
	color: var(--wp--preset--color--white);
	border: 0;
	border-radius: var(--wp--custom--radius);
	cursor: pointer;
	transition: background-color var(--wp--custom--transition--default);
}

.fram-search-overlay .fram-search-overlay__form .wp-block-search__button:hover {
	background-color: var(--wp--preset--color--zinc-dark);
}

/* Før skriving: «Populære søk» (chips) + «Snarveier». Kicker-overskrift
 * som kortenes; menyene er wp_navigation fram-search-popular /
 * fram-search-shortcuts (nb+en). */
.fram-search-overlay__label {
	margin: 0 0 var(--wp--preset--spacing--sm);
	color: var(--wp--preset--color--gray-3);
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.5;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* To faste kolonner (core grid columnCount) — én på telefon. Dobbel
 * selektor slår cores per-instans wp-container-regel. */
@media (max-width: 799px) {
	.fram-search-overlay .fram-search-overlay__suggest {
		grid-template-columns: minmax(0, 1fr);
	}
}

.fram-search-overlay__chips .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	padding: 0.625rem 1rem;
	border: var(--wp--custom--keyline);
	border-radius: var(--wp--custom--radius);
	color: inherit;
	text-decoration: none;
	transition: background-color var(--wp--custom--transition--default);
}

.fram-search-overlay__chips .wp-block-navigation-item__content:hover {
	background-color: var(--wp--preset--color--gray-2);
}

.fram-search-overlay__links .wp-block-navigation-item__content {
	color: inherit;
	text-decoration: underline;
	text-underline-position: from-font;
}

/* Image banners (Figma 68:203 / 68:493, patterns/banner-*.php) are
 * core/cover since 2026-08-10 — scrim (customGradient), bottom content
 * position, and the 1050px text cap are ALL block settings; no CSS
 * chassis. .fram-banner stays in the markup as a grep/skin hook only. */

/* -------------------------------------------------------------------------
 * Exhibitions carousel — Figma 68:169. patterns/exhibitions-carousel.php.
 * Controls row: heading left, arrows right, above the slides. Same row
 * for the «Dagen i dag» forside-carousel (fram/on-this-day compact,
 * section class fram-otd-section in page content).
 * ---------------------------------------------------------------------- */

.fram-exhibitions .ch-carousel-controls,
.fram-otd-section .ch-carousel-controls {
	justify-content: space-between;
	margin-bottom: var(--wp--preset--spacing--md);
}

/* Arrows — Figma 68:172/68:173: flat 40px Material arrows, black,
 * no circle/border; disabled state = 40% opacity. SITE-WIDE default
 * for every ch/carousel-arrows instance (galleries use ch-gcar with
 * round zinc pills instead — see below). Block's own chevron svg is
 * replaced by our arrow assets via mask. */
:root {
	--fram-icon-arrow-back: url("https://frammuseum.no/wp-content/themes/fram/assets/icons/arrow-back.svg");
	--fram-icon-arrow-forward: url("https://frammuseum.no/wp-content/themes/fram/assets/icons/arrow-forward.svg");
}

.ch-carousel-arrows__btn {
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--wp--preset--color--black);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: opacity var(--wp--custom--transition--default);
}

.ch-carousel-arrows__btn svg {
	display: none;
}

.ch-carousel-arrows__btn::before {
	content: "";
	width: 24px;
	height: 24px;
	background-color: currentColor;
	-webkit-mask: var(--fram-icon-arrow-back) center / contain no-repeat;
	mask: var(--fram-icon-arrow-back) center / contain no-repeat;
}

.ch-carousel-arrows__btn--next::before {
	-webkit-mask-image: var(--fram-icon-arrow-forward);
	mask-image: var(--fram-icon-arrow-forward);
}

.ch-carousel-arrows__btn:disabled,
.ch-carousel-arrows__btn[aria-disabled="true"] {
	opacity: 0.4;
	cursor: default;
}

/* -------------------------------------------------------------------------
 * Page hero — Figma 158:2169. patterns/page-hero.php.
 * core/cover since 2026-08-10 (featured image, gradient scrim, bottom
 * position, 1050px text cap — all block settings). Only the badge
 * pinning below is CSS; cover's own position:relative anchors it.
 * ---------------------------------------------------------------------- */

.fram-hero-badge {
	position: absolute;
	left: auto;
	right: var(--wp--preset--spacing--inset);
	/* 40 fra HERO-bunnen (= høyre-avstanden, user 2026-08-12).
	 * Posisjoneringskonteksten er inner-containeren (innenfor coverets
	 * padding-bottom), så paddingen må trekkes fra:
	 * bottom = inset − cover-padding. --fram-cover-pad-bottom settes
	 * per hero-klasse under og MÅ følge templatenes padding-attributt. */
	bottom: calc(var(--wp--preset--spacing--inset) - var(--fram-cover-pad-bottom, var(--wp--preset--spacing--inset)));
	z-index: 1; /* alltid UNDER infobaren (user 2026-08-12) */
	margin: 0 !important; /* beats constrained-layout's auto !important centering */
}

.fram-page-hero,
.fram-single-hero {
	--fram-cover-pad-bottom: var(--wp--preset--spacing--2-xl);
}

/* Heroen ligger kant i kant med det som følger (post-content / main):
 * rotens blockGap (md) ga en 24px stripe under heroen (user 2026-09-08).
 * Det som følger eier sin egen topp-luft (seksjons-/main-padding). */
.fram-page-hero + *,
.fram-single-hero + * {
	margin-block-start: 0;
}

/* Infobaren stables alltid OVER badgen (user 2026-08-12) — badgen
 * har z-index 1 i baseregelen over. */
.fram-infobar-row,
.fram-infobar {
	position: relative;
	z-index: 2;
}

.fram-hero-badge img {
	width: 143px;
	height: 143px;
	object-fit: cover;
	border-radius: 50%;
}

@media (max-width: 799px) {
	.fram-hero-badge img {
		width: 102px;
		height: 102px;
	}

	/* Phone comp (156:1324): badge sits above the infobar, flush right.
	 * Absolute bottom-anchoring collided with the card on phones, so go
	 * in-flow: hero is a flex column, infobar is pushed after the badge
	 * via order. margin needs !important to beat the base rule's. */
	.fram-hero .fram-hero-badge {
		position: static;
		align-self: flex-end;
		margin: 0 var(--wp--preset--spacing--inset) var(--wp--preset--spacing--sm) 0 !important;
	}

	.fram-hero .fram-infobar-row {
		order: 1;
	}
}

/* -------------------------------------------------------------------------
 * Text row — Figma 158:2225. patterns/text-row.php + page patterns.
 * ---------------------------------------------------------------------- */

.fram-text-row .wp-block-heading {
	line-height: 1;
}

/* Tablet (PYV-comp 162:389): etiketten stables OVER innholdet — 25%-
 * kolonnen er for smal for h-2-ordene («Åpningstider» brakk midt i
 * ordet). Core stacker først <782 og setter nowrap + inline
 * flex-basis ≥782, derav !important. */
@media (min-width: 782px) and (max-width: 899px) {
	.fram-text-row.wp-block-columns {
		flex-wrap: wrap !important;
	}

	.fram-text-row > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* Shared rounded-image utility (Figma rounded-rectangle images). */
.fram-rounded img {
	border-radius: var(--wp--custom--radius);
}

/* -------------------------------------------------------------------------
 * Gallery — Figma 162:368. ch/carousel single-slide + edge arrows.
 * Round zinc arrow pills per design (162:367).
 * ---------------------------------------------------------------------- */

/* Gallery slideshows (core/gallery + chCarousel via the ch-blocks
 * extension) get round zinc arrow pills — Figma 162:367. SITE-WIDE:
 * every gallery slideshow, unlike the flat ch/carousel-arrows. */
.ch-gcar__arrow {
	width: 44px;
	height: 44px;
	background-color: var(--wp--preset--color--zinc);
	color: var(--wp--preset--color--white);
	transition: background-color var(--wp--custom--transition--default);
}

.ch-gcar__arrow:hover {
	background-color: var(--wp--preset--color--zinc-dark);
}

.fram-gallery .wp-block-image img {
	width: 100%;
	aspect-ratio: 1440 / 957;
	object-fit: cover;
}

/* -------------------------------------------------------------------------
 * Card (carousel slide) — Figma 68:175. patterns/exhibitions-carousel.php.
 * ---------------------------------------------------------------------- */

.fram-card__image img {
	width: 100%;
	aspect-ratio: 450 / 568;
	object-fit: cover;
}

/* Card stack rhythm = the 20px stack token (Figma: image→kicker 20,
 * kicker→title 4, title→body 20, body→link 20). Card internals live in
 * a plain <li> (no layout container), so these margins own the gaps. */
.fram-card__kicker {
	margin-top: var(--wp--preset--spacing--stack);
}

.fram-card__title {
	margin-top: var(--wp--preset--spacing--xxs);
}

/* Utstillingskort droppet kicker-raden (user 2026-09-03) — tittel rett
 * etter bildet får stack-gapet kickeren bar. Polarhistorie-kortene
 * beholder kicker og treffes ikke av naboselektoren. */
.fram-card__image + .fram-card__title {
	margin-top: var(--wp--preset--spacing--stack);
}

.fram-card__body {
	margin-top: var(--wp--preset--spacing--stack);
	margin-bottom: 0; /* core excerpt ships its own 24px — stack owns the gap */
}

.fram-card__body p {
	margin-block: 0;
}

.fram-card__link {
	margin-top: var(--wp--preset--spacing--stack);
}

.fram-card__link a,
a.fram-card__link,
.fram-news__all a,
.fram-exhibitions__all a,
.fram-infobar__link a {
	color: inherit;
	text-decoration: underline;
	text-underline-position: from-font;
}

/* Read-more arrow — outside the underline (inline-block stops the
 * decoration from propagating in). */
a.fram-card__link::after {
	content: "\2192"; /* → — ASCII-escape: ren UTF-8-glyf i content: leses som Latin-1 (→) når stilarket serveres uten charset og uten @charset */
	display: inline-block;
	padding-left: 0.25em;
}

/* Strukket lenke (user 2026-09-03) — gjør en hel cover/flate klikkbar
 * uten JS: sett klassen på BLOKKEN som inneholder lenken (Avansert →
 * Ekstra CSS-klasse); lenkens klikkflate strekkes til nærmeste
 * POSISJONERTE forelder (core/cover er position:relative). Én lenke per
 * flate — konkurrerende lenker havner under klikkflaten. Bakgrunn:
 * Gutenberg har ingen native cover-lenke (gutenberg#19776/#77783). */
.fram-stretched-link a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* Cover-følgeregler: inner-containeren er position:relative i core og
 * ville klippet strekket der — gjør den statisk i covers som bruker
 * utilityen, og legg bakgrunn/scrim på negativ z så innholdet i flyt
 * fortsatt ligger over scrimmen. isolation holder negativ-z-lagene
 * INNE i coveren — uten den faller bilde/scrim bak forfedres bakgrunn
 * (usynlige fliser i seksjoner med bakgrunnsfarge). Klassen kan stå på
 * SELVE coveren (naturlig i editor) eller på blokken som holder lenken. */
.wp-block-cover.fram-stretched-link,
.wp-block-cover:has(.fram-stretched-link) {
	isolation: isolate;
}

/* Block style «Avrundet» (cover + group, inc/block-styles.php) —
 * radius-TOKENET, aldri frie verdier; overflow klipper bilde/scrim
 * til hjørnene. */
.wp-block-cover.is-style-rounded,
.wp-block-group.is-style-rounded {
	border-radius: var(--wp--custom--radius);
	overflow: hidden;
}

.wp-block-cover.fram-stretched-link .wp-block-cover__inner-container,
.wp-block-cover:has(.fram-stretched-link) .wp-block-cover__inner-container {
	position: static;
}

.wp-block-cover.fram-stretched-link > .wp-block-cover__background,
.wp-block-cover.fram-stretched-link > .wp-block-cover__image-background,
.wp-block-cover.fram-stretched-link > .wp-block-cover__video-background,
.wp-block-cover:has(.fram-stretched-link) > .wp-block-cover__background,
.wp-block-cover:has(.fram-stretched-link) > .wp-block-cover__image-background,
.wp-block-cover:has(.fram-stretched-link) > .wp-block-cover__video-background {
	z-index: -1;
}

/* Kicker is a post-terms link list — render as plain text. */
.fram-card__kicker a {
	color: inherit;
	text-decoration: none;
}

/* Single-hero: kicker (type-term) + metalinje (varighetsetikett/
 * periode via fram_years-bindingen — «Fast utstilling» osv., fra
 * varighet-termens description). gray-3 leser ikke på mørk cover —
 * arv heroens hvitfarge. Tom binding → tom <p> → :empty-regelen over. */
.fram-single-hero__content .fram-card__meta {
	color: inherit;
	margin-top: 0;
}

/* Varighetsfilter-chips (patterns/exhibition-filter.php) — speiler
 * timeline-steps-skinnet: keyline, radius-token, aktiv = zinc-fyll. */
.fram-filter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--xs);
}

.fram-filter__chip {
	display: inline-flex;
	align-items: center;
	padding: 0.625rem 1rem;
	border: var(--wp--custom--keyline);
	border-radius: var(--wp--custom--radius);
	font-size: var(--wp--preset--font-size--body);
	color: inherit;
	text-decoration: none;
	transition: background-color var(--wp--custom--transition--default),
		border-color var(--wp--custom--transition--default),
		color var(--wp--custom--transition--default);
}

.fram-filter__chip:hover {
	background-color: var(--wp--preset--color--gray-2);
}

.fram-filter__chip.is-active {
	background-color: var(--wp--preset--color--zinc);
	border-color: var(--wp--preset--color--zinc);
	color: var(--wp--preset--color--white);
}

/* Card anatomy is SHARED with the Polar History archive templates
 * (templates/archive-fram_*.html) and the fram/related-posts block
 * (plugin src/blocks/related-posts — grid layout lives in its
 * style.scss). Meta line = years/lifespan/utstillingsperiode via the
 * fram/post-meta binding (fram_years + fram_place_label virtual keys).
 * Unset binding → empty <p> in the markup: collapse it so blockGap
 * doesn't open a hole between title and excerpt. */
.fram-card__meta {
	margin-top: var(--wp--preset--spacing--xxs);
	color: var(--wp--preset--color--gray-3);
}

.fram-card__meta:empty {
	display: none;
}

.fram-card__title a {
	color: inherit;
	text-decoration: underline;
	text-underline-position: from-font;
}

/* -------------------------------------------------------------------------
 * Polar History archives + singles chassis (Phase A, existing design
 * system — Figma section comps pending). templates/archive-fram_*.html,
 * templates/single-fram_*.html.
 * ---------------------------------------------------------------------- */

.fram-archive-title {
	margin-bottom: var(--wp--preset--spacing--xl);
}

/* PLP-heroen (fram-archive-hero, 2026-08-12 — deler page-hero-
 * chassiset): tittel→intro strammes til heroens blockGap (xs) —
 * xl-marginen over gjelder arkivene UTEN hero. */
.fram-archive-hero .fram-archive-title {
	margin-bottom: 0;
}

/* Woo core gir breadcrumb-nav'en 1rem margin-bottom — blockGap/toolbar
 * eier rytmen her (PLP-toolbar + PDP-kjøpskolonne). */
.woocommerce .woocommerce-breadcrumb {
	margin-bottom: 0;
}

/* The badge overlaps the intro text on narrow viewports, and the
 * phone comps (160:712, 162:700) don't show it — desktop-only on
 * singles and page heroes (homepage hero keeps it, in-flow). */
@media (max-width: 899px) {
	.fram-single-hero .fram-hero-badge,
	.fram-page-hero .fram-hero-badge {
		display: none;
	}
}

/* Single-hero text measure + stack gap moved INTO the content group's
 * block settings 2026-08-10 (layout constrained, contentSize 1050px,
 * justifyContent left, blockGap stack) — adjustable per template in
 * the editor, no CSS. */

/* -------------------------------------------------------------------------
 * Polarhistorie-landingssiden (pages 389/5323, bin/setup-polar-landing.php).
 * Portal chassis on the existing design system — no Figma comp yet.
 * ---------------------------------------------------------------------- */

.fram-ph-stats__item {
	margin: 0;
}

/* ch/timeline-steps — THEME SKIN (third-party block; the theme owns
 * the visual layer). Pills follow the design system: radius 8, Inter,
 * gray-2 keylines, active = zinc fill like the Meny button. The
 * default arrowheads on connectors are dropped for a calm keyline. */
.ch-timeline-steps {
	--ch-ts-active: var(--wp--preset--color--zinc);
	--ch-ts-pill-radius: var(--wp--custom--radius);
	--ch-ts-pill-font: var(--wp--preset--font-size--body);
	margin-top: var(--wp--preset--spacing--lg);
}

.ch-timeline-steps__pill {
	font-family: var(--wp--preset--font-family--inter);
	letter-spacing: normal;
	border-color: var(--wp--preset--color--gray-2);
	transition: background-color var(--wp--custom--transition--default),
		border-color var(--wp--custom--transition--default),
		color var(--wp--custom--transition--default);
}

.ch-timeline-steps__pill.is-active {
	background-color: var(--wp--preset--color--zinc);
	border-color: var(--wp--preset--color--zinc);
	color: var(--wp--preset--color--white);
}

.ch-timeline-steps__connector {
	color: var(--wp--preset--color--gray-2);
}

.ch-timeline-steps__connector::after {
	display: none;
}

/* Lenkede entry-bilder: core/image legger <a display:inline-block>
 * mellom figure og img — den krymper til naturlig bildebredde og
 * gjør width:100% sirkulær. Blokknivå på ankeret løser det. */
.fram-ph-entry__image a {
	display: block;
}

.fram-ph-entry__image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.fram-ph-entry__title {
	margin-top: var(--wp--preset--spacing--sm);
}

.fram-ph-entry__title a {
	color: inherit;
	text-decoration: underline;
	text-underline-position: from-font;
}

.fram-ph-entry__count {
	color: var(--wp--preset--color--gray-3);
}

.fram-ph-diary {
	text-align: center;
}

.fram-ph-diary .has-intro-font-size {
	max-width: 46rem;
	margin-inline: auto;
}

/* Archive filter columns — PLP pattern: the trigger sits in the
 * toolbar ABOVE this layout, so the filter column can vanish
 * completely while closed (server renders the panel [hidden] until
 * state.panelOpen). :has() is baseline-stable. Block visuals live in
 * the plugin's style.scss; this is pure layout. */
.fram-archive-cols > .wp-block-column:has(.fram-archive-filter--panel[hidden]) {
	display: none;
}

.fram-archive-cols:has(.fram-archive-filter--panel[hidden]) > .wp-block-column:last-child {
	flex-basis: 100% !important; /* beats the column's inline flex-basis */
	flex-grow: 1;
}

/* Single-template two-column layout — Figma 68:315: article LEFT,
 * section-nav card RIGHT. Article column FIRST in the DOM (user
 * 2026-09-09: stablet på mobil skal nav-kortet komme ETTER innholdet,
 * ikke foran — også riktig leserekkefølge). Tidligere lå nav-kolonnen
 * først + row-reverse for å matche telefon-compene 160:712/160:872. */
@media (min-width: 782px) {
	.fram-single-cols {
		justify-content: space-between;
	}

	.fram-single-cols .fram-section-nav.fram-section-nav {
		max-width: none;
		margin-block: 0;
		/* Follow the reader down the article. The column stretches to
		 * the row height, so the card sticks within it. A panel taller
		 * than the viewport scrolls INTERNALLY so its bottom is always
		 * reachable. NO overscroll-behavior: contain — it blocks scroll
		 * chaining to the page even when the card has nothing to scroll,
		 * so a pointer over the card locked page scroll (user 2026-08-18;
		 * same trap as the PLP rail 2026-08-11). */
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--wp--preset--spacing--lg));
		max-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px) - 2 * var(--wp--preset--spacing--lg));
		overflow-y: auto;
	}
}

/* -------------------------------------------------------------------------
 * 50-50 split — Figma 68:229 / 68:238. patterns/split-*.php.
 * ---------------------------------------------------------------------- */

.fram-split__image img {
	width: 100%;
	aspect-ratio: 680 / 735;
	object-fit: cover;
}

/* -------------------------------------------------------------------------
 * News — Figma 68:209. patterns/news.php.
 * ---------------------------------------------------------------------- */

.fram-news__grid {
	margin-top: var(--wp--preset--spacing--lg);
}

.fram-news .wp-block-post-title a,
.fram-news__grid .wp-block-post-title a { /* nyhetsarkivet (home.html) gjenbruker kort-anatomien utenfor .fram-news */
	color: inherit;
	text-decoration: none;
}

.fram-news .wp-block-post-title a:hover,
.fram-news__grid .wp-block-post-title a:hover {
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * Footer — Figma 68:247. patterns/footer.php.
 * ---------------------------------------------------------------------- */

/* Footer link columns = core/navigation (vertical, blockGap 0) bound to
 * wp_navigation menus — the 2.2 line-height owns the row rhythm. */
.fram-footer__menu {
	line-height: 2.2;
}

.fram-footer__menu a,
.fram-footer__link a {
	color: inherit;
	text-decoration: none;
}

.fram-footer__menu a:hover,
.fram-footer__menu a:focus-visible,
.fram-footer__link a:hover,
.fram-footer__link a:focus-visible {
	text-decoration: underline;
}

.fram-partners__logo img {
	mix-blend-mode: multiply;
}

.fram-partners__row {
	gap: var(--wp--preset--spacing--2-xl);
}

/* Museumskart-flaggrad (patterns/footer-maps.php, user 2026-09-09 —
 * modell: live-footerens runde 44px-flagg). Lenken er selve sirkelen
 * (fokusring følger radius); keyline skiller hvite flaggfelt fra
 * bakgrunnen. Ingen hover-effekt (motion: én effekt om gangen). */
.fram-footer-maps .fram-footer-maps__flag {
	margin: 0;
}

.fram-footer-maps__flag a {
	display: block;
	border-radius: 50%;
	line-height: 0;
}

.fram-footer-maps__flag img {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: var(--wp--custom--keyline);
	box-sizing: border-box;
}


/* -------------------------------------------------------------------------
 * Form system — PLAN-shop fase 0. Derived from tokens (no Figma comps
 * exist): Inter body, radius token, gray-3 input keylines (gray-2 fails
 * the 3:1 non-text contrast on white), zinc focus, rust errors. Low
 * specificity via :where() so the Woo cart/checkout skin (fase 4) and
 * search (fase 5) build on it without fights.
 * ---------------------------------------------------------------------- */

:where(input[type="text"], input[type="email"], input[type="tel"],
	input[type="url"], input[type="password"], input[type="number"],
	input[type="search"], input[type="date"], textarea, select) {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.5;
	color: var(--wp--preset--color--black);
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--gray-3);
	border-radius: var(--wp--custom--radius);
	padding: 0.75rem var(--wp--preset--spacing--sm);
	transition: border-color var(--wp--custom--transition--default);
}

:where(textarea) {
	min-height: 8rem;
	resize: vertical;
}

:where(input, textarea, select)::placeholder {
	color: var(--wp--preset--color--gray-3);
	opacity: 1;
}

:where(input, textarea, select):focus {
	border-color: var(--wp--preset--color--zinc);
}

:where(input, textarea, select)[aria-invalid="true"] {
	border-color: var(--wp--preset--color--rust);
}

.fram-field__error {
	color: var(--wp--preset--color--rust);
	font-size: var(--wp--preset--font-size--body);
}

/* -------------------------------------------------------------------------
 * Contact Form 7 — skinn oppå form-systemet (user 2026-09-08). Malene
 * (plugin bin/seed-contact-forms.php) gir <p.fram-form__field> med
 * <label> + kontroll, og submit med wp-element-button (temaets knapp
 * fra theme.json). Her: stack-rytme, fulle bredder, select-chevron,
 * valideringstips og svarmelding i tokens (rust = feil, zinc = sendt).
 * ---------------------------------------------------------------------- */

.wpcf7 .fram-form {
	display: grid;
	gap: var(--wp--preset--spacing--stack);
	font-family: var(--wp--preset--font-family--inter);
}

.wpcf7 .fram-form__field,
.wpcf7 .fram-form__actions {
	margin: 0;
}

.wpcf7 .fram-form__field label {
	display: block;
	margin-bottom: var(--wp--preset--spacing--xxs);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 600;
	line-height: 1.5;
}

.wpcf7 .fram-form__req {
	color: var(--wp--preset--color--rust);
}

.wpcf7 .wpcf7-form-control-wrap {
	display: block;
}

.wpcf7 .wpcf7-form-control:not(.wpcf7-submit):not([type="checkbox"]):not([type="radio"]) {
	display: block;
	width: 100%;
	box-sizing: border-box;
}

/* Select: samme høyde/keyline som inputs, Material expand_more som chevron. */
.wpcf7 .wpcf7-select {
	appearance: none;
	padding-right: calc(var(--wp--preset--spacing--sm) * 2 + 24px);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' width='24' height='24' fill='%231E1E1E'%3E%3Cpath d='M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--wp--preset--spacing--sm) center;
	background-size: 24px 24px;
	cursor: pointer;
}

.wpcf7 .wpcf7-textarea {
	min-height: 10rem;
}

.wpcf7 .wpcf7-submit {
	border: 0;
	cursor: pointer;
	transition: background-color var(--wp--custom--transition--default);
}

.wpcf7 .wpcf7-submit:disabled {
	opacity: 0.6;
	cursor: progress;
}

.wpcf7 .wpcf7-spinner {
	margin-inline-start: var(--wp--preset--spacing--sm);
}

/* Feltfeil under kontrollen (CF7 legger span.wpcf7-not-valid-tip inn i wrap). */
.wpcf7 .wpcf7-not-valid-tip {
	display: block;
	margin-top: var(--wp--preset--spacing--xxs);
	color: var(--wp--preset--color--rust);
	font-size: 0.875rem;
	line-height: 1.5;
}

/* Svarmelding: keyline-kort; sendt = zinc, feil/ugyldig = rust. */
.wpcf7 .wpcf7-form .wpcf7-response-output {
	margin: var(--wp--preset--spacing--stack) 0 0;
	padding: var(--wp--preset--spacing--sm);
	border: 1px solid var(--wp--preset--color--gray-3);
	border-radius: var(--wp--custom--radius);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.5;
}

.wpcf7 .wpcf7-form.sent .wpcf7-response-output {
	border-color: var(--wp--preset--color--zinc);
	background-color: var(--wp--preset--color--gray-1);
}

.wpcf7 .wpcf7-form.invalid .wpcf7-response-output,
.wpcf7 .wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7 .wpcf7-form.failed .wpcf7-response-output,
.wpcf7 .wpcf7-form.aborted .wpcf7-response-output,
.wpcf7 .wpcf7-form.spam .wpcf7-response-output {
	border-color: var(--wp--preset--color--rust);
	color: var(--wp--preset--color--rust);
}

/* Site-wide focus ring (PLAN-shop fase 0; full audit lands in fase 5).
 * :where() keeps it overridable by any component-level focus style. */
:where(a, button, input, textarea, select, summary,
	[tabindex]:not([tabindex="-1"])):focus-visible {
	outline: 2px solid var(--wp--preset--color--zinc);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * WooCommerce skin — PLAN-shop fase 1. No Figma shop comps: derived from
 * the Fram system (fram-card anatomy, tokens). Verified against the
 * product diversity matrix (single image / gallery, short / long copy,
 * sale, out of stock, variable) — see PLAN-shop.md.
 * ---------------------------------------------------------------------- */

/* Product cards (archive-product + product-search-results templates).
 * Mixed product photography (book covers, busts, mugs): uniform 3/4
 * tile, CONTAIN on gray-1 so nothing gets cropped. */
/* Tile: gray-2-bakgrunn på containeren + multiply på bildet — hvite
 * produktfoto-bakgrunner smelter inn i tilen (Nike-teknikken). */
.fram-card--product .fram-card__image a {
	background-color: var(--wp--preset--color--gray-2);
	overflow: hidden;
}

.fram-card--product .fram-card__image img {
	aspect-ratio: 3 / 4;
}

/* Adaptiv fit (inc/shop.php setter is-fit-cover ved ratio nær 3:4):
 * default = contain (!important — Woo emitter cover INLINE) MED
 * multiply-blend mot tilen; nær-3:4-bilder beholder Woos cover,
 * fyller tilen og blendes IKKE (dekker hele bakteppet). */
.fram-card--product .fram-card__image:not(.is-fit-cover) img {
	object-fit: contain !important;
	mix-blend-mode: multiply;
}

.fram-card--product .fram-card__price {
	margin-top: var(--wp--preset--spacing--xxs);
}

/* Sale badge — rust chip, top-left over the image tile. */
.wc-block-components-product-sale-badge {
	background-color: var(--wp--preset--color--rust);
	color: var(--wp--preset--color--white);
	border: 0;
	border-radius: var(--wp--custom--radius);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
	padding: 0.25rem 0.75rem;
}

/* Price: sale = old price struck in gray-3, current in rust. */
.wc-block-components-product-price del {
	color: var(--wp--preset--color--gray-3);
}

.wc-block-components-product-price ins {
	color: var(--wp--preset--color--rust);
	text-decoration: none;
	font-weight: 600;
}

/* Breadcrumbs + toolbar chrome — quiet gray-3 metadata. */
.wc-block-breadcrumbs,
.wc-block-product-results-count,
.woocommerce-result-count {
	color: var(--wp--preset--color--gray-3);
}

.wc-block-breadcrumbs a {
	color: inherit;
	text-decoration: none;
}

.wc-block-breadcrumbs a:hover {
	text-decoration: underline;
	text-underline-position: from-font;
}

.fram-archive-toolbar .woocommerce-ordering {
	margin-bottom: 0; /* .woocommerce .woocommerce-ordering har margin-bottom — brøt vertikal justering mot toggleren */
}

.fram-archive-toolbar .wc-block-catalog-sorting select,
.fram-archive-toolbar .woocommerce-ordering select {
	border: 0;
	background: none;
	padding: 0.5rem 0;
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--body);
	color: var(--wp--preset--color--black);
	cursor: pointer;
}

.fram-archive-toolbar .wc-block-catalog-sorting select:hover,
.fram-archive-toolbar .woocommerce-ordering select:hover {
	color: var(--wp--preset--color--zinc);
}

/* Pagination — Inter, zinc current page. */
.fram-archive-pagination {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--body);
}

.fram-archive-pagination .page-numbers {
	padding: 0.25rem 0.5rem;
}

.fram-archive-pagination .page-numbers.current {
	color: var(--wp--preset--color--zinc);
	font-weight: 600;
}

/* Store notices — gray-1 card with keyline. */
.wc-block-store-notices .wc-block-components-notice-banner,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background-color: var(--wp--preset--color--gray-1);
	border: var(--wp--custom--keyline);
	border-radius: var(--wp--custom--radius);
	color: var(--wp--preset--color--black);
}

/* PDP buy column rhythm (single-product template): stack token gaps. */
.fram-product-buy__price {
	margin-top: var(--wp--preset--spacing--stack);
}

.fram-product-buy__summary {
	margin-top: var(--wp--preset--spacing--stack);
}

.fram-product-buy .wp-block-woocommerce-add-to-cart-form {
	margin-top: var(--wp--preset--spacing--stack);
}

.fram-product-buy .quantity .qty {
	width: 5rem;
	text-align: center;
}

/* Stock status */
.fram-product-buy .stock.out-of-stock {
	color: var(--wp--preset--color--rust);
	font-weight: 600;
}

.fram-product-buy .stock.in-stock {
	color: var(--wp--preset--color--zinc);
}

/* Variable products: variation table rendered by Woo — calm it down. */
.fram-product-buy table.variations th,
.fram-product-buy table.variations td {
	border: 0;
	padding: 0.25rem 0;
	text-align: left;
	vertical-align: middle;
}

.fram-product-buy table.variations th {
	padding-right: var(--wp--preset--spacing--sm);
	font-weight: 600;
}

/* Logistics attributes (pa_hs_code, pa_country_of_origin) are never
 * customer-facing — hide their rows in Additional information. */
.woocommerce-product-attributes-item--attribute_pa_hs_code,
.woocommerce-product-attributes-item--attribute_pa_country_of_origin {
	display: none;
}

/* Woo injects .75rem margin-bottom between card children (:where(), 0
 * specificity) — zero it so the stack tokens own the card rhythm. */
.fram-card--product .wc-block-product > :not(:last-child) {
	margin-bottom: 0;
}

/* Product kicker: products carry hierarchical category chains — show
 * only the FIRST term on cards (exhibitions-card convention). */
.fram-card--product .fram-card__kicker a:not(:first-child),
.fram-card--product .fram-card__kicker .wp-block-post-terms__separator {
	display: none;
}

/* -------------------------------------------------------------------------
 * PLP v2 — persistent left filter rail (PLAN-shop fase 2, revidert
 * 2026-08-11 etter referanse-research: Nike/Gymshark/Baymard). Desktop:
 * alltid-synlig venstre-rail + «Skjul filtre»-toggle i toolbaren
 * (assets/js/plp-rail.js). <=600px: Woos NATIVE bunn-sheet (trigger +
 * overlay) tar over — vi styler den, tvinger den ikke lenger på alle
 * bredder. Kategorier = lenkeliste (navigasjon), ikke checkboxer.
 * ---------------------------------------------------------------------- */

/* Sticky toolbar-rad (Nike): count venstre, toggle + sortering høyre. */
.fram-archive-toolbar {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 10;
	background-color: var(--wp--preset--color--white);
	padding-block: var(--wp--preset--spacing--sm);
}

/* Keylinen under toolbaren strekkes alignfull (user 2026-08-11):
 * elementet er alignwide, så linjen bor på en viewport-bred pseudo
 * (100vw sentrert). Krever overflow-x: clip på body — se base-laget. */
.fram-archive-toolbar::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	border-bottom: var(--wp--custom--keyline);
}

/* Rail-toggle: keyline-chip. Skjult av JS-fila til den er koblet, og
 * alltid skjult der railen ikke finnes (<=600). */
.fram-plp-rail-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: none;
	border: 0;
	padding: 0.5rem 0;
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--body);
	color: var(--wp--preset--color--black);
	cursor: pointer;
	transition: color var(--wp--custom--transition--default);
}

.fram-plp-rail-toggle:hover {
	color: var(--wp--preset--color--zinc);
}

@media (max-width: 600px) {
	.fram-plp-rail-toggle {
		display: none;
	}
}

/* Kollapset rail: kolonnen forsvinner, gridet tetner 3 -> 4 kolonner.
 * Kun desktop — på mobil eier Woos bunn-sheet filtrene. */
@media (min-width: 601px) {
	/* Vis/skjul-animasjon = Nike-mønsteret (målt 2026-08-11:
	 * margin-left 300ms + visibility-flip ved slutt — grid-en
	 * reflowes med i samme bevegelse). Rail-bredde 280 + 2-xl-gap. */
	.fram-plp-cols .fram-plp-rail {
		transition: margin-left 300ms, visibility 300ms;
	}

	.fram-plp-cols.is-rail-hidden .fram-plp-rail {
		margin-left: calc(-280px - var(--wp--preset--spacing--2-xl));
		visibility: hidden;
	}
}

.fram-plp-cols.is-rail-hidden .wc-block-product-template__responsive.columns-3 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Rail-innhold: kategorilenker øverst, filtergrupper under, keyline-
 * skiller mellom seksjonene (Gymshark-rytme). */
.fram-plp-rail__categories {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--body);
	margin-bottom: var(--wp--preset--spacing--lg);
}

.fram-plp-rail__categories .wp-block-ch-product-category-nav__back {
	display: inline-block;
	color: var(--wp--preset--color--gray-3);
	text-decoration: none;
	margin-bottom: var(--wp--preset--spacing--xs);
}

.fram-plp-rail__categories .wp-block-ch-product-category-nav__back:hover {
	color: var(--wp--preset--color--black);
	text-decoration: underline;
	text-underline-position: from-font;
}

.fram-plp-rail__categories .wp-block-ch-product-category-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.fram-plp-rail__categories .wp-block-ch-product-category-nav__link {
	color: inherit;
	text-decoration: none;
}

.fram-plp-rail__categories .wp-block-ch-product-category-nav__link:hover {
	text-decoration: underline;
	text-underline-position: from-font;
}

.fram-plp-rail__categories .wp-block-ch-product-category-nav__link[aria-current] {
	font-weight: 600;
	color: var(--wp--preset--color--zinc);
}

.fram-plp-rail__categories .wp-block-ch-product-category-nav__count {
	color: var(--wp--preset--color--gray-3);
}

/* Filter-internals: chips = kort-systemets keyline-chips, checkboxer og
 * range i zinc, «Vis flere» som underlinjelenke. */
.fram-plp-filters input[type="checkbox"],
.fram-plp-filters input[type="radio"],
.fram-plp-filters input[type="range"] {
	accent-color: var(--wp--preset--color--zinc);
}

.fram-plp-filters .wc-block-product-filter-chips__item,
.fram-product-buy .wc-block-product-filter-chips__item {
	border: var(--wp--custom--keyline);
	border-radius: var(--wp--custom--radius);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--body);
	padding: 0.25rem 0.75rem;
	background: none;
	cursor: pointer;
	transition: background-color var(--wp--custom--transition--default),
		border-color var(--wp--custom--transition--default),
		color var(--wp--custom--transition--default);
}

.fram-plp-filters .wc-block-product-filter-chips__item:hover,
.fram-product-buy .wc-block-product-filter-chips__item:hover {
	border-color: var(--wp--preset--color--zinc);
}

.fram-plp-filters .wc-block-product-filter-chips__item[aria-checked="true"],
.fram-plp-filters .wc-block-product-filter-chips__item.is-selected,
.fram-product-buy .wc-block-product-filter-chips__item[aria-checked="true"],
.fram-product-buy .wc-block-product-filter-chips__item.is-selected {
	background-color: var(--wp--preset--color--zinc);
	border-color: var(--wp--preset--color--zinc);
	color: var(--wp--preset--color--white);
}

.fram-plp-filters .wc-block-product-filter-clear-button,
.fram-plp-filters .wc-block-product-filter__clear-button,
.fram-plp-filters .wc-block-product-filter__show-more {
	color: inherit;
	text-decoration: underline;
	text-underline-position: from-font;
	background: none;
	border: 0;
	cursor: pointer;
}

/* Mobil (<=600): Woos native trigger + bunn-sheet — kun skin. Media-
 * scopet: Woo skjuler triggeren >=601 med :where (0 spesifisitet), så
 * en uscopet display-regel her VISTE den på desktop (feilrapportert). */
@media (max-width: 600px) {
	.fram-plp-filters .wc-block-product-filters__open-overlay {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		background: none;
		border: var(--wp--custom--keyline);
		border-color: var(--wp--preset--color--gray-3);
		border-radius: var(--wp--custom--radius);
		padding: 0.5rem var(--wp--preset--spacing--sm);
		font-family: var(--wp--preset--font-family--inter);
		font-size: var(--wp--preset--font-size--body);
		color: var(--wp--preset--color--black);
		cursor: pointer;
	}
}

.fram-plp-filters .wc-block-product-filters__overlay-dialog {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--black);
	font-family: var(--wp--preset--font-family--inter);
}

.fram-plp-filters .wc-block-product-filters__overlay-content {
	padding: 0; /* desktop: samme container brukes inline — padding kun i sheeten */
	overflow-x: hidden;
}

.fram-plp-filters .wc-block-product-filters__overlay-content > * {
	max-width: 100%;
}

@media (max-width: 600px) {
	.fram-plp-filters .wc-block-product-filters__overlay-content {
		padding: var(--wp--preset--spacing--sm);
	}
}

.fram-plp-filters.is-overlay-opened .wc-block-product-filters__overlay {
	z-index: 990; /* over header/nav; under admin-bar */
	top: var(--wp-admin--admin-bar--height, 0px);
}

/* Apply i sheeten: kanonisk knapp (KANONISK KNAPP-seksjonen) + full bredde. */
.fram-plp-filters .wc-block-product-filters__apply {
	width: 100%;
}

/* <=600: kolonnene legges i blokk-flyt — rail-kolonnen krymper til
 * trigger-pillen over gridet; kategorilenkene skjules (bor i arket). */
@media (max-width: 600px) {
	.wp-block-columns.fram-plp-cols {
		display: block;
	}

	.fram-plp-cols .fram-plp-rail {
		width: auto;
		flex-basis: auto;
		margin-bottom: var(--wp--preset--spacing--sm);
	}

	.fram-plp-rail__categories {
		display: none;
	}
}

/* Toolbar wrapper på phones (sortering + count på én linje sprenger 375). */
@media (max-width: 599px) {
	.fram-archive-toolbar {
		flex-wrap: wrap;
	}
}

/* PLP-grid: rausere luft enn Woo-default (referanse-rytme), og
 * EKSPLISITTE kolonnetall — Woos auto-fill-minmax er kalibrert til
 * deres 1.25em-gap og kollapser med vårt 40px-gap. */
.fram-plp-main .wc-block-product-template__responsive {
	gap: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--stack);
}

.fram-plp-main .wc-block-product-template__responsive.columns-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 999px) {
	.fram-plp-main .wc-block-product-template__responsive.columns-3,
	.fram-plp-cols.is-rail-hidden .wc-block-product-template__responsive.columns-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Sale-badge: absolute chip over tilen, topp-venstre (rust-skinnet
 * kommer fra den globale .wc-block-components-product-sale-badge-
 * regelen i fase 1-seksjonen). */
.fram-card--product .fram-card__image a {
	position: relative;
	display: block;
}

.fram-card--product .fram-card__image a > .wp-block-woocommerce-product-sale-badge {
	position: absolute;
	top: var(--wp--preset--spacing--sm);
	left: var(--wp--preset--spacing--sm);
	z-index: 2;
	margin: 0;
}

/* Woos indre badge-span har egen posisjonering/transform — nøytraliser
 * så wrapperen alene eier plasseringen. */
.fram-card--product .fram-card__image .wc-block-components-product-sale-badge {
	position: static;
	inset: auto;
	transform: none;
	margin: 0;
}

/* -------------------------------------------------------------------------
 * PDP fase 3 (PLAN-shop): sticky buy column, product-details prose,
 * related grid rides the fram-card system.
 * ---------------------------------------------------------------------- */

/* Buy column sticks while the gallery scrolls (section-nav convention).
 * Columns stretch children by default — flex-start is required for
 * sticky to engage. */
@media (min-width: 900px) {
	.fram-product-cols .fram-product-buy {
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--wp--preset--spacing--stack));
		align-self: flex-start;
	}
}

/* product-details (is-style-minimal): section headings on the type
 * scale, prose at body size with sane measure. */
.fram-product-details h2 {
	font-size: var(--wp--preset--font-size--h-4);
	margin-bottom: var(--wp--preset--spacing--stack);
}

.fram-product-details p {
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.5;
}

.fram-product-details .woocommerce-product-attributes th,
.fram-product-details .woocommerce-product-attributes td {
	border: 0;
	border-bottom: var(--wp--custom--keyline);
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm)
		var(--wp--preset--spacing--xs) 0;
	text-align: left;
	font-size: var(--wp--preset--font-size--body);
}

.fram-product-details .woocommerce-product-attributes th {
	font-weight: 600;
	color: var(--wp--preset--color--gray-3);
}

/* -------------------------------------------------------------------------
 * Mini-cart + cart/checkout — PLAN-shop fase 4.
 * Trigger lives in the header nav pill (replaces the static Nettbutikk
 * link); drawer + cart/checkout blocks ride the token system.
 * ---------------------------------------------------------------------- */

/* Trigger: match the nav items — currentColor icon, no chrome. */
.fram-nav .wc-block-mini-cart {
	display: flex;
	align-items: center;
}

.fram-nav .wc-block-mini-cart__button {
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	padding: 0;
	display: inline-flex;
	align-items: center;
}

/* Ikon: samme Material Symbols shopping_cart som resten av
 * ikonsystemet (Figma 176:1586) — Woos egen SVG skjules og
 * mask-glyfen tegnes på knappen. */
.fram-nav .wc-block-mini-cart__icon {
	display: none;
}

/* Woo wrapper (quantity-badge) er badgens posisjoneringskontekst —
 * glyfen må tegnes DER, ikke på knappen, ellers havner badgen ved
 * siden av ikonet. */
.fram-nav .wc-block-mini-cart__quantity-badge {
	position: relative;
	display: flex;
	align-items: center;
}

.fram-nav .wc-block-mini-cart__quantity-badge::before {
	content: "";
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: var(--fram-icon-cart) center / contain no-repeat;
	mask: var(--fram-icon-cart) center / contain no-repeat;
}

/* Count badge — Figma 176:1587: zinc 16px-sirkel på ikonets øvre
 * høyre hjørne, 11px medium. */
.fram-nav .wc-block-mini-cart__button {
	position: relative;
}

.fram-nav .wc-block-mini-cart__badge {
	position: absolute;
	top: -9px;
	left: 12px;
	right: auto;
	margin: 0; /* Woo: margin-left -44% — nulles */
	transform: none; /* Woo: translateY(-50%) — nulles */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	/* Woo hydrerer badgen med INLINE hvit bg + tellerfarge
	 * (productCountColorValue styrer kun teksten) — derfor
	 * !important. */
	background-color: var(--wp--preset--color--zinc) !important;
	color: var(--wp--preset--color--white) !important;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 11px;
	font-weight: 500;
	line-height: 1;
}

/* Språkvelgeren står 24px fra resten (Figma 176:1579: ytre gap 24,
 * indre 12 — 12 ekstra oppå nav-gapen). */
.fram-nav > nav:not(.fram-nav__actions) {
	margin-inline-start: 0.75rem;
}

/* Drawer panel */
.wc-block-components-drawer__screen-overlay {
	background-color: rgba(0, 0, 0, 0.5);
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 990;
}

.wc-block-components-drawer {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--black);
	width: min(420px, 100dvw);
	max-width: none;
	font-family: var(--wp--preset--font-family--inter);
}

/* h2. prefix: Woo's own `h2.wc-block-mini-cart__title { font-size: 2em }`
 * otherwise wins over the class selector. */
h2.wc-block-mini-cart__title {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--h-5);
	font-weight: 600;
	flex-wrap: wrap;
	padding: var(--wp--preset--spacing--sm);
}

/* «(elementer: N)» dropped — the drawer title is just «Din handlekurv» (user 2026-08-17). */
.wp-block-woocommerce-mini-cart-title-items-counter-block {
	display: none;
}

.wc-block-mini-cart__products-table {
	padding-inline: var(--wp--preset--spacing--sm);
}

.wc-block-cart-item__image img {
	border-radius: var(--wp--custom--radius);
}

/* Cart line items (mini-cart drawer, cart page, checkout summary):
 * name + variation details + line total only — no short description,
 * no unit price (user 2026-08-17). */
table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__prices,
.wc-block-components-order-summary-item__description .wc-block-cart-item__prices,
.wc-block-components-product-metadata__description {
	display: none;
}

.wc-block-components-product-name {
	color: inherit;
	font-weight: 600;
	text-decoration: none;
}

.wc-block-components-product-name:hover {
	text-decoration: underline;
	text-underline-position: from-font;
}

.wc-block-mini-cart__footer {
	border-top: var(--wp--custom--keyline);
	padding: var(--wp--preset--spacing--sm);
}

/* Buttons across mini-cart, cart and checkout blocks: token buttons.
 * Contained = zinc; the drawer's checkout CTA = rust (primary action);
 * outlined = keyline ghost. */
/* KANONISK KNAPP (theme.json elements.button / Figma button3): Inter,
 * body, weight 400, core-padding, radius-token, zinc→zinc-dark. ALLE
 * shop-UI-knapper utenfor core/button følger denne — avvik skal være
 * bevisste (ingen definert per nå). */
.wc-block-components-button:not(.outlined),
.fram-plp-filters .wc-block-product-filters__apply,
.fram-search-form .wp-block-search__button,
.fram-atc-bar__button,
.fram-product-buy .single_add_to_cart_button {
	background-color: var(--wp--preset--color--zinc);
	color: var(--wp--preset--color--white);
	border: 0;
	border-radius: var(--wp--custom--radius);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 400;
	padding: calc(0.667em + 2px) calc(1.333em + 2px);
	cursor: pointer;
	transition: background-color var(--wp--custom--transition--default);
}

.wc-block-components-button:not(.outlined):hover,
.fram-plp-filters .wc-block-product-filters__apply:hover,
.fram-search-form .wp-block-search__button:hover,
.fram-atc-bar__button:hover,
.fram-product-buy .single_add_to_cart_button:hover {
	background-color: var(--wp--preset--color--zinc-dark);
}

.wc-block-components-button.outlined {
	background: none;
	color: var(--wp--preset--color--black);
	border: 1px solid currentColor;
	border-radius: var(--wp--custom--radius);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 400;
	padding: calc(0.667em + 2px) calc(1.333em + 2px);
}

.wc-block-mini-cart__footer-checkout:not(.outlined) {
	background-color: var(--wp--preset--color--rust);
}

.wc-block-mini-cart__footer-checkout:not(.outlined):hover {
	background-color: var(--wp--preset--color--rust-dark);
}

/* Cart + checkout pages: inherit the type system, quiet cards. */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	font-family: var(--wp--preset--font-family--inter);
}

.wc-block-components-sidebar .wc-block-components-totals-wrapper,
.wc-block-components-order-summary {
	font-size: var(--wp--preset--font-size--body);
}

.wc-block-cart .wc-block-cart__totals-title {
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
}

.wc-block-components-quantity-selector {
	border-radius: var(--wp--custom--radius);
}

.wc-block-components-radio-control__option,
.wc-block-components-checkbox {
	font-size: var(--wp--preset--font-size--body);
}

/* Checkout step headings */
.wc-block-components-checkout-step__title {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--body-big);
	font-weight: 600;
}

/* Mini-cart trigger is ADDITIVE to the Nettbutikk link (user
 * 2026-08-11) and only surfaces once the cart has items — the badge
 * carries [hidden] at zero (IA flips it live on add-to-cart). */
.fram-nav .fram-nav__minicart:has(.wc-block-mini-cart__badge[hidden]) {
	display: none;
}

/* -------------------------------------------------------------------------
 * Site search — PLAN-shop fase 5 (no Figma comp; form-system derived).
 * ---------------------------------------------------------------------- */

.fram-search-form .wp-block-search__inside-wrapper {
	border: 1px solid var(--wp--preset--color--gray-3);
	border-radius: var(--wp--custom--radius);
	padding: 4px;
}

.fram-search-form .wp-block-search__input {
	border: 0;
	padding: 0.75rem var(--wp--preset--spacing--sm);
}

/* Result rows (patterns/search-results.php, «Search v3» fase 3): 96px
 * bilde + kicker (fram_type_kicker-binding, samme som live-søket) +
 * tittel + Relevanssi-uthevet utdrag; keyline mellom radene. Fane-
 * raden over = fram/search-scopes (plugin-skin). */
.fram-search-results .wp-block-post-template > li {
	border-bottom: var(--wp--custom--keyline);
	padding-bottom: var(--wp--preset--spacing--sm);
}

.fram-search-results .fram-search-results__row {
	gap: var(--wp--preset--spacing--md);
}

.fram-search-results .fram-search-results__image {
	flex: none;
	width: 96px;
	border-radius: var(--wp--custom--radius);
	overflow: hidden;
	background-color: var(--wp--preset--color--gray-2);
}

.fram-search-results .fram-search-results__image img {
	display: block;
	width: 96px;
	height: 96px;
	object-fit: cover;
}

.fram-search-results .fram-search-results__body {
	min-width: 0;
}

.fram-search-results .fram-search-results__kicker {
	margin: 0 0 var(--wp--preset--spacing--xxs);
	color: var(--wp--preset--color--gray-3);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.fram-search-results .fram-search-results__kicker:empty {
	display: none;
}

.fram-search-results .fram-search-results__title {
	margin-top: 0;
}

.fram-search-results .fram-search-results__title a {
	color: inherit;
	text-decoration: underline;
	text-underline-position: from-font;
}

.fram-search-results .fram-search-results__excerpt {
	margin-top: var(--wp--preset--spacing--xxs);
	color: var(--wp--preset--color--gray-3);
}

/* -------------------------------------------------------------------------
 * Sidehode — default page-templaten (patterns/page-header.php, user
 * 2026-09-08; ingen Figma-comp). H1 + manuell ingress + bredt featured
 * image når satt. Tom ingress (binding → null) kollapser.
 * ---------------------------------------------------------------------- */

.fram-page-header .fram-page-header__intro:empty {
	display: none;
}

.fram-page-header .fram-page-header__intro {
	color: var(--wp--preset--color--gray-3);
	max-width: 46rem;
}

/* -------------------------------------------------------------------------
 * Polfarer-hode (patterns/explorer-header.php → single-fram_explorer.html,
 * user 2026-09-09; ingen Figma-comp). Portrettene er 7:10 ansikt/
 * overkropp i lav oppløsning — aldri cover-crop eller tekst over bildet.
 * Mørkt bånd rett under header-båndet (samme zinc-deep → én flate):
 * tekststabel venstre, ucroppet portrett høyre, bunnjustert. Fakta =
 * grid med etikettkolonne; tomme rader (null-binding → tom <p>, eller
 * post-terms uten termer → ingen verdi-node) kollapser.
 * ---------------------------------------------------------------------- */

/* Kant i kant med main (rotens blockGap ga 24px stripe); main eier
 * topp-luften selv (xl i templaten — 2-xl + stripe = 104px var for mye,
 * user 2026-09-09). */
.fram-explorer-header + * {
	margin-block-start: 0;
}

.fram-explorer-header__text {
	flex: 1 1 auto;
	min-width: 0;
}

.fram-explorer-header__portrait {
	flex: 0 0 clamp(220px, 26vw, 380px);
	margin: 0;
}

.fram-explorer-header__portrait img {
	display: block;
	width: 100%;
	height: auto;
}

.fram-explorer-header__facts {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	column-gap: var(--wp--preset--spacing--md);
	row-gap: var(--wp--preset--spacing--xs);
}

/* Raden er display:contents så etikett + verdi blir egne grid-celler i
 * felles kolonner. Slår WPs .is-layout-flex (display:flex). */
.fram-explorer-header .fram-explorer-header__fact {
	display: contents;
}

.fram-explorer-header .fram-explorer-header__fact:has(> p:empty),
.fram-explorer-header .fram-explorer-header__fact:not(:has(> :nth-child(2))) {
	display: none;
}

.fram-explorer-header__facts a {
	color: inherit;
	text-underline-offset: 0.15em;
}

.fram-explorer-header__facts a:hover {
	text-decoration: none;
}

@media (max-width: 781px) {
	.fram-explorer-header {
		padding-top: var(--wp--preset--spacing--lg) !important;
		padding-bottom: var(--wp--preset--spacing--xl) !important;
	}

	/* Telefon: stabel, portrett først (som profilkort) — H1 beholder
	 * DOM-plassen før bildet. */
	.fram-explorer-header .fram-explorer-header__row {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--lg);
	}

	.fram-explorer-header__portrait {
		order: -1;
		flex-basis: auto;
		width: min(240px, 64%);
	}

	/* Én kolonne: raden blir en egen stabel (etikett over verdi, xxs),
	 * radene skilles med sm. Skjul-regelen over har høyere spesifisitet. */
	.fram-explorer-header__facts {
		display: flex;
		flex-direction: column;
		gap: var(--wp--preset--spacing--sm);
	}

	.fram-explorer-header .fram-explorer-header__fact {
		display: flex;
		flex-direction: column;
		align-items: flex-start; /* WPs .is-layout-flex sentrerer */
		gap: var(--wp--preset--spacing--xxs);
		margin-block-start: 0; /* flow-gap fra foreldergruppen; radene skilles av gap over */
	}
}

/* -------------------------------------------------------------------------
 * Innholdsfortegnelse-kolonner (patterns/toc-columns.php → templates
 * page-toc.html / single-toc.html, user 2026-09-08). ch/toc-skinnet
 * via blokkens custom props: keyline-rail, zinc-markør, gray-3 → black.
 * Klistret på desktop under header-båndet (+ admin-bar).
 * ---------------------------------------------------------------------- */

.fram-toc-columns .ch-toc {
	--ch-toc-rail: var(--wp--preset--color--gray-2);
	--ch-toc-marker: var(--wp--preset--color--zinc);
	/* Idle (over første overskrift): tydelig svakere enn aktiv — gray-3 på
	 * 30 % (user 2026-09-08: full gray-3 leste som markert). */
	--ch-toc-marker-idle: color-mix(in srgb, var(--wp--preset--color--gray-3) 30%, transparent);
	--ch-toc-link-opacity: 1;
	--ch-toc-active-weight: 600;
	--ch-toc-transition: var(--wp--custom--transition--state);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--body);
}

.fram-toc-columns .ch-toc__label,
.fram-toc-columns .ch-toc__toggle {
	color: var(--wp--preset--color--gray-3);
	font-weight: 400;
	opacity: 1;
}

/* Accordion-knappen på telefon: kicker-typografi, keyline over/under. */
.fram-toc-columns .ch-toc__toggle {
	font-size: 0.75rem;
	transition: color var(--wp--custom--transition--default);
}

.fram-toc-columns .ch-toc__toggle:hover,
.fram-toc-columns .ch-toc__toggle[aria-expanded="true"] {
	color: var(--wp--preset--color--black);
}

.fram-toc-columns .ch-toc__link {
	color: var(--wp--preset--color--gray-3);
	transition: color var(--wp--custom--transition--default);
}

.fram-toc-columns .ch-toc__link:hover,
.fram-toc-columns .ch-toc__link:focus-visible,
.fram-toc-columns .ch-toc__link.is-active {
	color: var(--wp--preset--color--black);
}

@media (min-width: 782px) {
	.fram-toc-columns .ch-toc {
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--wp--preset--spacing--xl));
	}
}

/* -------------------------------------------------------------------------
 * Ekspedisjonsreisen — Chapter story (patterns/expedition-story.php,
 * 2026-09-08, erstattet fram/history-timeline). Kapitlene er core/cover
 * i hero-chassiset inne i en Query Loop; her bor bare det attributter
 * ikke uttrykker: kicker-typografi, kicker→tittel 4px, tekstbredder,
 * rail-klaring og Dots-skinnet på den flytende innholdsfortegnelsen.
 * Gutteren er coverets egen L/R-padding (inset-token, chassis
 * 2026-09-10) — inner-containeren er nullet av kjernen (nested
 * has-global-padding) og skal ikke få padding her.
 * ---------------------------------------------------------------------- */

/* Årstall over tittelen: hvit Inter SemiBold — zinc Archivo Black på foto
 * ga for lav kontrast (user 2026-08-18). */
.fram-expedition-story__kicker {
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
	text-shadow: 0 1px 12px rgba(30, 30, 30, 0.6);
}

/* Kicker→tittel = 4px (kort-rytmen), over gruppens 20px stack-gap. */
.fram-expedition-story__content > .fram-expedition-story__kicker + .fram-expedition-story__title {
	margin-block-start: var(--wp--preset--spacing--xxs);
}

.fram-expedition-story__title {
	max-width: 15ch;
}

.fram-expedition-story__title a {
	color: inherit;
	text-decoration: none;
}

.fram-expedition-story__title a:hover,
.fram-expedition-story__title a:focus-visible {
	text-decoration: underline;
}

.fram-expedition-story__body {
	color: var(--wp--preset--color--gray-2);
	max-width: 56ch;
}

/* Dots-rail: Inter, årstall tabulære; prikk 10px. */
.fram-expedition-story .ch-toc {
	--ch-toc-transition: var(--wp--custom--transition--state);
	--ch-toc-active-weight: 600;
	font-family: var(--wp--preset--font-family--inter);
	font-variant-numeric: tabular-nums;
	text-shadow: 0 1px 10px rgba(30, 30, 30, 0.7);
}

/* Smale desktop-/nettbrettbredder: hold innholdet unna railen — 120px
 * på inner-containeren, i tillegg til coverets egen gutter. */
@media (min-width: 782px) and (max-width: 1279px) {
	.fram-expedition-story__chapter > .wp-block-cover__inner-container {
		padding-inline-end: 120px;
	}
}

/* Innhold uten overskrifter: ch/toc setter [hidden] på seg selv — da
 * skal hele kolonnen bort, ellers står 280px tom luft igjen — og
 * hovedkolonnen (post-content i flow-layout) skal ikke arve hele
 * wide-bredden: hold den på innholdsbredden, sentrert (2026-09-10). */
.fram-toc-columns .fram-toc-columns__aside:has(> .ch-toc[hidden]) {
	display: none;
}

.fram-toc-columns:has(> .fram-toc-columns__aside > .ch-toc[hidden]) > .fram-toc-columns__main {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
}

/* Telefon: kolonnene stables — innholdsfortegnelsen øverst, med luft ned
 * til brødteksten. */
@media (max-width: 781px) {
	.fram-toc-columns .fram-toc-columns__aside {
		margin-bottom: var(--wp--preset--spacing--lg);
	}
}

/* Relevanssi-utheving av søkeordene i utdraget. */
.fram-search-results .fram-search-results__excerpt strong {
	font-weight: 600;
	color: var(--wp--preset--color--black);
}

@media (max-width: 599px) {
	.fram-search-results .fram-search-results__image,
	.fram-search-results .fram-search-results__image img {
		width: 64px;
	}

	.fram-search-results .fram-search-results__image img {
		height: 64px;
	}
}

/* -------------------------------------------------------------------------
 * Produktkort v2 (PLAN-shop, referanse-research 2026-08-11): rene
 * bold-titler uten underlinje (underline kun på hover — Nike/Gymshark),
 * sale som rust TEKST-kicker under bildet i stedet for chip oppå
 * (gjenbruker Woos oversatte badge-tekst), kategori-kicker i gray-3.
 * ---------------------------------------------------------------------- */

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

.fram-card--product .fram-card__title a:hover,
.fram-card--product .fram-card__title a:focus-visible {
	text-decoration: underline;
	text-underline-position: from-font;
}

.fram-card--product .fram-card__kicker {
	color: var(--wp--preset--color--gray-3);
}


/* -------------------------------------------------------------------------
 * PLP rail v2.1 (brukerfeedback 2026-08-11): core accordion rundt
 * filtergruppene (Nike), pris som bucket-lenker (fram/plp-price-buckets
 * — slider fjernet), availability fjernet.
 * ---------------------------------------------------------------------- */

.fram-plp-accordion .wp-block-accordion-item {
	border-top: var(--wp--custom--keyline);
	margin-block-start: 0; /* blockGap-flyten ga md på alle unntatt første */
}

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

.fram-plp-accordion .wp-block-accordion-heading__toggle-icon {
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 400;
	color: var(--wp--preset--color--gray-3);
	transition: transform var(--wp--custom--transition--default);
}

.fram-plp-accordion .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon {
	transform: rotate(45deg);
}

.fram-plp-accordion .wp-block-accordion-panel {
	margin-top: 0;
	padding-bottom: var(--wp--preset--spacing--sm);
}

/* Pris-buckets: checkbox-lignende rader (Nike «Kjøp etter pris»). */
.fram-price-buckets {
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--body);
}

.fram-price-buckets li {
	margin-block: var(--wp--preset--spacing--xs);
}

.fram-price-buckets__link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: inherit;
	text-decoration: none;
}

.fram-price-buckets__link::before {
	content: "";
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	border: 1px solid var(--wp--preset--color--gray-3);
	border-radius: 4px;
	background-color: var(--wp--preset--color--white);
	transition: background-color var(--wp--custom--transition--default),
		border-color var(--wp--custom--transition--default);
}

.fram-price-buckets__link:hover::before {
	border-color: var(--wp--preset--color--zinc);
}

.fram-price-buckets__link.is-active::before {
	border-color: var(--wp--preset--color--zinc);
	background-color: var(--wp--preset--color--zinc);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3'/%3E%3C/svg%3E");
	background-size: 14px;
	background-position: center;
	background-repeat: no-repeat;
}

/* Filtertellere i accordion-titlene («Size (2)») — plp-rail.js. */
.fram-filter-count {
	color: var(--wp--preset--color--gray-3);
	font-weight: 400;
}

/* Tomme filtergrupper: når attributt-filteret ikke har verdier i
 * gjeldende kontekst (hideEmpty setter wc-block-product-filter--hidden)
 * skjules HELE accordion-elementet — ingen døde togglere
 * (brukerfeedback 2026-08-11). :has() følger klassen også ved
 * IAPI-region-swaps. */
.fram-plp-accordion .wp-block-accordion-item:has(.wc-block-product-filter--hidden) {
	display: none;
}

/* Sticky rail (brukerfeedback 2026-08-11): pinner under den sticky
 * toolbaren (~75px + stack-gap). SMART: max-height mot viewport +
 * intern scroll — en rail som er høyere enn skjermen scroller selv
 * (section-nav-presedensen). INGEN overscroll-behavior: contain —
 * den blokkerte scroll-kjeding til siden når railen var utscrollet
 * (eller ikke hadde noe å scrolle), så musen over railen låste
 * sidescroll (user 2026-08-11). Kun desktop; mobil har sheet. */
@media (min-width: 601px) {
	.fram-plp-cols .fram-plp-rail {
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + 96px);
		align-self: flex-start;
		max-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px) - 96px - var(--wp--preset--spacing--stack));
		overflow-y: auto;
		scrollbar-width: thin;
		scrollbar-color: var(--wp--preset--color--gray-2) transparent;
	}
}

/* Kategoriliste-trunkering («Vis flere», Baymard >8) — plp-rail.js. */
.fram-plp-rail__more {
	background: none;
	border: 0;
	padding: 0;
	margin-top: var(--wp--preset--spacing--xs);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--body);
	color: inherit;
	text-decoration: underline;
	text-underline-position: from-font;
	cursor: pointer;
}

/* [hidden] taper mot ch-blokkens display-regel på li — håndhev. */
.fram-plp-rail__categories .wp-block-ch-product-category-nav__list li[hidden] {
	display: none !important;
}

/* Manuell override fra media-modalen («Contain uten blend»). */
.fram-card--product .fram-card__image.is-no-blend img {
	mix-blend-mode: normal;
}

/* Antall i breadcrumben (inc/shop.php) — stille gray-3. */
.fram-breadcrumb-count {
	color: var(--wp--preset--color--gray-3);
}

/* -------------------------------------------------------------------------
 * PDP v2 — PLAN-shop fase 3, referanse-research 2026-08-11 (Nike/
 * Gymshark/Baymard): galleri på tile-systemet, chips i stedet for
 * selects, USP-boks ved kjøpsknappen, accordions i stedet for tabs,
 * related som Woo-carousel, sticky mobil-ATC.
 * ---------------------------------------------------------------------- */

/* Galleri: ch/product-gallery i grid-flow-layout. Blend-bakgrunn (gray-2
 * + multiply, kontinuitet fra PLP-kortene) og stack-gap eies av
 * blokk-attributtene i templaten. Ingen radius på gallerí-tiles
 * (user 2026-08-11). */


/* Kjøpsblokk: Woos add-to-cart-with-options (variant-chips via
 * product-filter-chips — deler kort-systemets chip-skin, se scope
 * under). Quantity-selector fjernet + knapp 100% bred via
 * theme-override av Woos template-parts
 * (parts/{simple,variable}-product-add-to-cart-with-options.html). */
.fram-product-buy__atc .wp-block-button__link,
.fram-product-buy__atc .wc-block-components-product-button button {
	width: 100%;
}

/* USP-boks: keyline-ramme under kjøpsknappen (Baymard/Gymshark). */
.fram-pdp-usp {
	display: flex;
	flex-wrap: wrap;
	column-gap: var(--wp--preset--spacing--md);
	row-gap: var(--wp--preset--spacing--xs);
	border-top: var(--wp--custom--keyline);
	padding-top: var(--wp--preset--spacing--sm);
	margin-top: var(--wp--preset--spacing--stack);
	color: var(--wp--preset--color--gray-3);
}

.fram-pdp-usp p {
	margin-block: 0;
	font-size: 0.875rem; /* 14px — same secondary scale as PDP breadcrumb */
	line-height: 20px; /* = icon box, so the 20px mask sits on whole pixels (crisp) */
}

/* PDP-accordions: gjenbruker PLP-skinnet. */
.fram-pdp-accordion {
	margin-top: var(--wp--preset--spacing--stack);
}

.fram-pdp-accordion .wp-block-accordion-item {
	border-top: var(--wp--custom--keyline);
	margin-block-start: 0;
}

.fram-pdp-accordion .wp-block-accordion-item:last-child {
	border-bottom: var(--wp--custom--keyline);
}

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

.fram-pdp-accordion .wp-block-accordion-heading__toggle-icon {
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 400;
	color: var(--wp--preset--color--gray-3);
	transition: transform var(--wp--custom--transition--default);
}

.fram-pdp-accordion .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon {
	transform: rotate(45deg);
}

.fram-pdp-accordion .wp-block-accordion-panel {
	margin-top: 0;
	padding-bottom: var(--wp--preset--spacing--sm);
}

.fram-pdp-description {
	font-size: var(--wp--preset--font-size--body);
}

.fram-pdp-description :where(h1, h2, h3, h4) {
	font-size: var(--wp--preset--font-size--h-5);
	margin-block: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--xs);
}

/* Related-carousel (Woo displayLayout carousel): fram-kort i sporene,
 * pilknapper i zinc-pillene fra gallerisystemet. Woos karusell-CSS
 * (flex-basis/min-width/scroll-snap på barna) forutsetter flex-rad —
 * håndskrevet template-markup får is-layout-flow, så vi setter den. */
.fram-related-products .is-product-collection-layout-carousel {
	display: flex;
	gap: var(--wp--preset--spacing--stack);
}

.fram-related-products .is-product-collection-layout-carousel > li {
	margin-block-start: 0; /* blockGap-flyten ga margin på alle unntatt første */
}

/* Pilene følger SITE-WIDE-systemet (flate 40px Material-piler, sort —
 * samme som ch/carousel-arrows på Exhibitions; zinc-pillene er KUN
 * for galleri-slideshows). Woos egne svg-chevroner byttes med
 * pil-assetene via mask, som i ch-skinnet. */
.fram-related-products .wc-block-next-previous-buttons button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--wp--preset--color--black);
	cursor: pointer;
	transition: opacity var(--wp--custom--transition--default);
}

.fram-related-products .wc-block-next-previous-buttons button svg {
	display: none;
}

.fram-related-products .wc-block-next-previous-buttons button::before {
	content: "";
	width: 24px;
	height: 24px;
	background-color: currentColor;
	-webkit-mask: var(--fram-icon-arrow-back) center / contain no-repeat;
	mask: var(--fram-icon-arrow-back) center / contain no-repeat;
}

.fram-related-products .wc-block-next-previous-buttons button:last-child::before {
	-webkit-mask-image: var(--fram-icon-arrow-forward);
	mask-image: var(--fram-icon-arrow-forward);
}

.fram-related-products .wc-block-next-previous-buttons button:disabled {
	opacity: 0.3;
	cursor: default;
}

/* Sticky bunn-ATC-bar (pdp.js) — kun mobil/tablet. */
.fram-atc-bar {
	position: fixed;
	inset: auto 0 0;
	z-index: 90;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--sm);
	background-color: var(--wp--preset--color--white);
	border-top: var(--wp--custom--keyline);
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--inset)
		calc(var(--wp--preset--spacing--xs) + env(safe-area-inset-bottom));
}

@media (min-width: 900px) {
	.fram-atc-bar {
		display: none;
	}
}

.fram-atc-bar__price {
	margin: 0;
	font-weight: 600;
	white-space: nowrap;
}

.fram-atc-bar__button {
	flex: 1; /* typografi/padding: KANONISK KNAPP-seksjonen */
}

/* -------------------------------------------------------------------------
 * Fase 6 — Motion-systempass (PLAN-shop). ÉN easing-tabell:
 * hovers = transition--default (150ms), tilstandsskifter =
 * transition--state (380ms cubic-bezier(0.2,0.8,0.2,1)), store
 * bevegelser = transition--smooth (600ms). Kun transform/opacity;
 * reduced-motion-baseline nederst i seksjonen.
 * ---------------------------------------------------------------------- */

/* Kort-hover: bildet skalerer 1.03 inne i tilen (overflow clip),
 * tittelen skifter til zinc — samme bevegelse for utstillings-,
 * nyhets- og produktkort. */
.fram-card__image,
.fram-news__image {
	overflow: clip;
}

/* Produktkort-hover: crossfade til galleriets bilde 2 (Gymshark/
 * Nike-mønsteret, målt — swap-bildet injiseres av
 * fram_product_image_hover_swap i inc/shop.php). Item-rot er
 * li.wc-block-product — ALDRI UL-en (bærer .fram-card på PLP). */
.fram-card__image-swap {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
	opacity: 0;
	transition: opacity 250ms ease-in-out;
}

.fram-card--product .fram-card__image img {
	transition: opacity 250ms ease-in-out;
}

.wc-block-product:hover .fram-card__image-swap {
	opacity: 1;
}

/* Primærbildet fades KUN når tilen faktisk har et swap-bilde —
 * produkter uten galleribilde beholder bildet sitt (user-bug
 * 2026-08-11: alle kort mistet bildet på hover). */
.wc-block-product:hover .fram-card__image:has(.fram-card__image-swap) img:not(.fram-card__image-swap) {
	opacity: 0;
}

.fram-card__title a {
	transition: color var(--wp--custom--transition--default);
}

:is(.wp-block-group.fram-card, .wp-block-post, .wc-block-product):hover .fram-card__title a {
	color: var(--wp--preset--color--zinc);
}

/* Hero-innzooming ved load: infobar stiger, badge følger forsinket.
 * Egen keyframe — scroll-entry-keyframen har andre verdier. */
@keyframes fram-infobar-rise {
	from {
		opacity: 0;
		transform: translateY(24px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.fram-hero .fram-infobar-row {
	animation: fram-infobar-rise 380ms cubic-bezier(0.2, 0.8, 0.2, 1) 150ms both;
}

.fram-hero .fram-hero-badge {
	animation: fram-fade-in 320ms ease-out 450ms both;
}

@keyframes fram-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* Sticky mobil-ATC-bar: sklir opp når den aktiveres (pdp.js toggler
 * [hidden]). */
.fram-atc-bar:not([hidden]) {
	animation: fram-rise-in 380ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes fram-rise-in {
	from { transform: translateY(100%); }
	to { transform: none; }
}

/* Reduced motion — baseline for HELE motion-laget: transisjoner og
 * animasjoner dør, innhold vises statisk. :where() holder
 * spesifisiteten på null der det er mulig, men animasjonene over
 * trenger overstyring med samme styrke. */
@media (prefers-reduced-motion: reduce) {
	.fram-hero .fram-infobar-row,
	.fram-hero .fram-hero-badge,
	.fram-atc-bar:not([hidden]) {
		animation: none;
	}

	.fram-card__image-swap,
	.fram-card--product .fram-card__image img {
		transition: none;
	}
}