/*
 * Butikken — Permafrost 2026.
 *
 * WooCommerce har sitt eget stilark og sin egen markup. Her legges designspråket
 * oppå: samme farger, typografi og bildebehandling som resten av nettstedet.
 * Alt henter verdiene fra temaets tokener, så butikken følger lys og mørk modus
 * uten egne unntak.
 */

/* ---------- Rammen rundt ----------
 *
 * Handlevogn, kasse og Min konto er vanlige sider med en kortkode, så de
 * gjengis av page.php og havner inne i .pf-innhold — som er satt til 760 px
 * fordi den er laget for brødtekst. Butikkens tabeller og skjemaer trenger
 * hele bredden, så begrensningen løftes her.
 */
.woocommerce .pf-side,
.woocommerce-page .pf-side {
	padding: 40px 0 88px;
}

.woocommerce-cart .pf-innhold,
.woocommerce-checkout .pf-innhold,
.woocommerce-account .pf-innhold,
.woocommerce .pf-innhold,
.woocommerce-page .pf-innhold {
	max-width: none;
	font-size: 16px;
	line-height: 1.6;
}

/* Butikksidene får bredere ramme enn tekstsidene. */
.woocommerce-cart .pf-side > .wrap,
.woocommerce-checkout .pf-side > .wrap {
	max-width: min(1560px, 88vw);
}

.woocommerce .woocommerce-breadcrumb {
	font-size: 13px;
	color: var(--ink-soft);
	margin: 0 0 22px;
}

.woocommerce .woocommerce-breadcrumb a:hover {
	color: var(--sage-dark);
}

.woocommerce h1.page-title,
.woocommerce .woocommerce-products-header__title {
	font-family: 'Montserrat', sans-serif;
	font-size: 34px;
	font-weight: 700;
	margin: 0 0 24px;
}

.woocommerce .woocommerce-result-count {
	font-size: 13px;
	color: var(--ink-soft);
	margin: 0 0 24px;
}

.woocommerce .woocommerce-ordering select,
.woocommerce select.orderby {
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 500;
	background: var(--card);
	color: var(--ink);
}

/* ---------- Produktrutenettet ---------- */

.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
	margin: 0 0 48px;
	padding: 0;
	list-style: none;
}

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

/*
 * Bredden bestemmes av rutenettet, ikke av WooCommerce sine prosenter.
 *
 * WooCommerce setter bredde pa flisene ut fra hvor mange kolonner katalogen er
 * satt til, og har en egen, mer spesifikk regel per antall:
 * `.woocommerce ul.products.columns-3 li.product { width: 30.75% }`. Butikken
 * sender `columns-4` og traff derfor bare den generelle regelen, som min slo -
 * men kategorisidene sender `columns-3`, og der vant WooCommerce. Flisene ble
 * 30,75 % av sin egen rutenettcelle, altsa 92 piksler, med teksten rennende ut
 * av kortet.
 *
 * Attributtvelgeren under dekker alle antall, og lastes sist.
 */
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product,
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	width: auto;
	margin: 0;
	padding: 0;
	float: none;
	clear: none;
	text-align: left;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.woocommerce ul.products li.product:hover {
	border-color: var(--sage);
	box-shadow: 0 10px 26px var(--skygge);
	transform: translateY(-2px);
}

/*
 * Produktbildene fyller den kvadratiske flaten.
 *
 * 14 av 17 produktbilder er ikke kvadratiske - teppene er 1,51 og 1,78 brede -
 * og med `contain` sto de med store tomme felt over og under i et kvadratisk
 * kort. Rutenettet ble mest luft.
 *
 * Med `cover` er et kvadratisk bilde uberort, mens et bredt beskjaeres til
 * midten. Det koster kantene av produktet, men gir et rutenett der alle
 * kortene har samme vekt - og hele bildet er alltid ett klikk unna.
 */
.pf-vare__bilde {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--sage-tint);
	aspect-ratio: 1 / 1;
}

/*
 * Velgeren ma vaere spesifikk nok til a sla `.woocommerce ul.products
 * li.product a img { height: auto }`. Med bare `.pf-vare__bilde img` vant
 * WooCommerce, og da ble bildet sa hoyt som proporsjonene tilsa - kvadratiske
 * bilder fylte boksen, brede la seg som en stripe med tom flate under.
 */
.woocommerce ul.products li.product .pf-vare__bilde img,
.pf-vare__bilde img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	margin: 0;
	transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.woocommerce ul.products li.product:hover .pf-vare__bilde img {
	transform: scale(1.05);
}

.pf-vare__overlegg {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(35, 34, 32, 0) 45%, rgba(24, 23, 21, 0.9) 100%);
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.3s ease, transform 0.3s ease;
	display: flex;
	align-items: flex-end;
	padding: 20px;
}

.woocommerce ul.products li.product:hover .pf-vare__overlegg,
.pf-vare__bilde:focus-visible .pf-vare__overlegg {
	opacity: 1;
	transform: translateY(0);
}

.pf-vare__lenke {
	color: #fff;
	font-size: 12.5px;
	font-weight: 600;
}

.pf-vare__merke {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	background: var(--sage-dark);
	color: #fff;
	border-radius: 999px;
	padding: 5px 12px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.pf-vare__merke--tom {
	background: var(--ink-soft);
}

.pf-vare__tekst {
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
	border-top: 1px solid var(--line);
}

.pf-vare__cat {
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sage-dark);
	font-weight: 700;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: 'Montserrat', sans-serif;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.25;
	margin: 0;
	padding: 0;
	color: var(--ink);
}

.pf-vare__pris,
.woocommerce ul.products li.product .price {
	font-size: 15px;
	font-weight: 600;
	color: var(--ink);
	margin: 0;
}

.woocommerce ul.products li.product .price del {
	opacity: 0.6;
	margin-right: 6px;
}

.woocommerce ul.products li.product .price ins {
	text-decoration: none;
	font-weight: 700;
	color: var(--ink);
}

/* Kjøpsknappen skal være rolig i rutenettet og tydelig ved berøring. */
.woocommerce ul.products li.product .button {
	margin-top: 8px;
	align-self: flex-start;
	background: none;
	border: 1.5px solid var(--line);
	color: var(--ink);
	border-radius: 999px;
	padding: 8px 18px;
	font-size: 13px;
	font-weight: 600;
}

.woocommerce ul.products li.product .button:hover {
	background: var(--sage-dark);
	border-color: var(--sage-dark);
	color: #fff;
}

.woocommerce ul.products li.product .added_to_cart {
	font-size: 13px;
	font-weight: 600;
	border-bottom: 1.5px solid var(--sage);
	margin-top: 8px;
	align-self: flex-start;
}

/* ---------- Produktsiden ---------- */

.woocommerce div.product {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 56px;
	align-items: start;
}

.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product div.images {
	width: auto;
	float: none;
	margin: 0;
}

.woocommerce div.product .woocommerce-product-gallery__wrapper img {
	border-radius: 8px;
}

/*
 * Miniatyrbildene under hovedbildet.
 *
 * WooCommerce legger dem som `float: left; width: 25%` uten avstand - hverken
 * til hovedbildet over eller seg imellom. De ble staende som en sammenhengende
 * stripe og sa ut som en del av bildet.
 *
 * Rutenettet her tar hvilket som helst antall kolonner. Gallerier kan settes
 * til annet enn fire, og da skal det fortsatt stemme.
 *
 * Velgerne speiler WooCommerce sine egne noyaktig - `div.images` og alt.
 * Deres `... div.images .flex-control-thumbs li` har ett elementledd mer enn
 * `... .woocommerce-product-gallery .flex-control-thumbs li`, og vant derfor
 * selv om dette arket lastes sist. Miniatyrbildene ble 25 % av sin egen
 * rutenettcelle, altsa 22 piksler.
 */
.woocommerce div.product div.images .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
	gap: 10px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	overflow: visible;
}

.woocommerce div.product div.images .flex-control-thumbs li {
	width: auto;
	margin: 0;
	padding: 0;
	float: none;
	list-style: none;
}

.woocommerce div.product div.images .flex-control-thumbs img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 6px;
	opacity: 0.55;
	cursor: pointer;
	transition: opacity 0.18s ease, box-shadow 0.18s ease;
}

.woocommerce div.product div.images .flex-control-thumbs img:hover,
.woocommerce div.product div.images .flex-control-thumbs img.flex-active {
	opacity: 1;
	box-shadow: 0 0 0 2px var(--sage);
}


.woocommerce div.product .summary,
.woocommerce div.product div.summary {
	width: auto;
	float: none;
	margin: 0;
}

.woocommerce div.product .product_title {
	font-family: 'Montserrat', sans-serif;
	font-size: 36px;
	font-weight: 700;
	line-height: 1.1;
	margin: 0 0 14px;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-size: 22px;
	font-weight: 600;
	color: var(--ink);
	margin: 0 0 20px;
}

.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--ink-soft);
	font-size: 16px;
	line-height: 1.7;
}

.woocommerce div.product form.cart {
	margin: 26px 0;
	display: flex;
	gap: 12px;
	align-items: center;
	flex-wrap: wrap;
}

.woocommerce div.product .product_meta {
	border-top: 1px solid var(--line);
	padding-top: 18px;
	margin-top: 24px;
	font-size: 13px;
	color: var(--ink-soft);
}

.woocommerce div.product .woocommerce-tabs {
	grid-column: 1 / -1;
	margin-top: 24px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0;
	margin: 0 0 24px;
	border-bottom: 1px solid var(--line);
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	content: none;
	border: none;
	box-shadow: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: none;
	border: none;
	border-radius: 0;
	margin: 0;
	padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 14px;
	color: var(--ink-soft);
	padding: 10px 14px;
	display: block;
	border-bottom: 2px solid transparent;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--ink);
	border-bottom-color: var(--sage);
}

/*
 * Den aktive fanen.
 *
 * Reglene over slar av bakgrunnen pa `li`, men WooCommerce setter hvit
 * bakgrunn pa `li.active` - et hakk mer spesifikt, og dermed sto den aktive
 * fanen hvit med lys tekst oppa i mork modus. Den ma slas der den settes.
 */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active,
.woocommerce div.product .woocommerce-tabs ul.tabs li:hover {
	background: none;
	border: none;
	box-shadow: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::after {
	content: none;
	box-shadow: none;
}

/* Innholdet i fanen. */
.woocommerce div.product .woocommerce-Tabs-panel {
	color: var(--ink);
}

.woocommerce div.product .woocommerce-Tabs-panel h2 {
	font-size: 22px;
	margin: 0 0 18px;
}

.woocommerce div.product .woocommerce-Tabs-panel p {
	color: var(--ink-soft);
	line-height: 1.65;
}

.woocommerce div.product .woocommerce-Tabs-panel table.shop_attributes th,
.woocommerce div.product .woocommerce-Tabs-panel table.shop_attributes td {
	border-bottom: 1px solid var(--line);
	padding: 12px 0;
	font-style: normal;
	color: var(--ink);
}

.woocommerce div.product .woocommerce-Tabs-panel table.shop_attributes th {
	color: var(--ink-soft);
	font-weight: 600;
	width: 200px;
}

.woocommerce .related.products,
.woocommerce .up-sells {
	grid-column: 1 / -1;
	border-top: 1px solid var(--line);
	padding-top: 40px;
	margin-top: 16px;
}

.woocommerce .related.products > h2,
.woocommerce .up-sells > h2,
.woocommerce .cross-sells > h2 {
	font-family: 'Montserrat', sans-serif;
	font-size: 24px;
	font-weight: 700;
	margin: 0 0 24px;
}

/* ---------- Antallsvelger ---------- */

.woocommerce .quantity .qty {
	border: 1.5px solid var(--line);
	border-radius: 6px;
	padding: 11px 8px;
	width: 78px;
	text-align: center;
	background: var(--card);
	color: var(--ink);
	font: inherit;
}

/* ---------- Knapper ---------- */

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
	font-family: 'Work Sans', system-ui, sans-serif;
	background: var(--sage-dark);
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 13px 24px;
	font-size: 14px;
	font-weight: 700;
	text-shadow: none;
	line-height: 1.2;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background: var(--sage);
	color: #fff;
}

.woocommerce a.button.wc-backward {
	background: none;
	border: 1.5px solid var(--ink);
	color: var(--ink);
	border-radius: 999px;
}

.woocommerce a.button.wc-backward:hover {
	background: var(--ink);
	color: var(--bg);
}

/* ---------- Handlekurv ---------- */

.woocommerce table.shop_table {
	border: 1px solid var(--line);
	border-radius: 8px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: var(--card);
	font-size: 14.5px;
}

.woocommerce table.shop_table th {
	font-family: 'Montserrat', sans-serif;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-soft);
	font-weight: 700;
	padding: 16px 18px;
	border-bottom: 1px solid var(--line);
}

.woocommerce table.shop_table td {
	padding: 18px;
	border-top: none;
	border-bottom: 1px solid var(--line);
	color: var(--ink);
}

.woocommerce table.shop_table tbody tr:last-child td {
	border-bottom: none;
}

/*
 * WooCommerce sitt eget stilark nullstilte punktlisten for fraktvalg og
 * betalingsmater - det gjorde ikke butikk.css, siden det aldri trengte til
 * na. Uten den viste frakt- og betalingsvalgene et bullet-punkt ingen andre
 * lister pa siden har.
 */
.woocommerce ul.woocommerce-shipping-methods,
.woocommerce ul.wc_payment_methods {
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce ul.woocommerce-shipping-methods li,
.woocommerce ul.wc_payment_methods li {
	margin: 0 0 8px;
}

.woocommerce table.shop_table img {
	border-radius: 5px;
	width: 68px;
}

.woocommerce a.remove {
	color: var(--ink-soft) !important;
	font-weight: 400;
	line-height: 1;
}

.woocommerce a.remove:hover {
	background: none;
	color: #a63244 !important;
}

.woocommerce .cart_totals h2,
.woocommerce-checkout h3 {
	font-family: 'Montserrat', sans-serif;
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 16px;
}

.woocommerce .cart-collaterals .cart_totals {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 28px;
}

.woocommerce .cart-collaterals .cart_totals table.shop_table th,
.woocommerce .cart-collaterals .cart_totals table.shop_table td {
	padding: 14px 0;
}

.woocommerce .cart-collaterals .cart_totals .wc-proceed-to-checkout {
	padding: 18px 0 0;
}

.woocommerce .cart-collaterals .cart_totals .wc-proceed-to-checkout .button {
	display: block;
	width: 100%;
	text-align: center;
}

.woocommerce .cart-collaterals .cart_totals table.shop_table {
	border: none;
	background: none;
}

/* ---------- Handlevognen ----------
 *
 * Bygget nedenfra: én kolonne og en tabell uten låste kolonnebredder er
 * utgangspunktet. To spalter og faste kolonner slår først inn når det er
 * plass til dem. Motsatt vei — å starte bredt og stramme inn med
 * max-width — ga en navnekolonne på under femti piksler på små laptoper,
 * der teksten brakk til én bokstav per linje.
 */

.pf-handlevogn > .woocommerce-cart-form {
	margin: 0;
}

.pf-handlevogn > .cart-collaterals,
.woocommerce-cart .cart-collaterals {
	width: auto;
	max-width: none;
	float: none;
	margin: 32px 0 0;
	padding: 0;
}

.pf-handlevogn::before,
.pf-handlevogn::after,
.pf-handlevogn > .cart-collaterals::before,
.pf-handlevogn > .cart-collaterals::after {
	content: none;
}

.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-cart .woocommerce .cart-collaterals .cart_totals {
	width: auto;
	float: none;
	margin: 0;
}

.woocommerce-cart table.cart td.product-name a {
	font-weight: 600;
}

/*
 * Kupongraden.
 *
 * Cellen må forbli en tabellcelle. `display: flex` på en <td> tar den ut av
 * tabelloppsettet, og da slutter colspan å gjelde: enten krymper cellen til
 * bredden av første kolonne, eller den tvinger den kolonnen til å bli like
 * bred som hele raden. Innholdet plasseres derfor med float, som tabellceller
 * håndterer fint.
 */
.woocommerce table.shop_table td.actions {
	padding: 18px;
}

.woocommerce table.shop_table td.actions::after {
	content: "";
	display: table;
	clear: both;
}

.woocommerce .coupon {
	display: flex;
	align-items: stretch;
	gap: 10px;
}

.woocommerce .coupon input.input-text {
	flex: 1 1 auto;
	min-width: 0;
	height: 46px;
	padding: 0 15px;
	border: 1.5px solid var(--line);
	border-radius: 6px;
	background: var(--card);
	color: var(--ink);
	font-size: 14px;
	margin: 0;
}

.woocommerce table.shop_table td.actions .button {
	height: 46px;
	padding: 0 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	margin: 0;
	flex-shrink: 0;
}

.woocommerce table.shop_table td.actions .button[name="update_cart"] {
	background: none;
	border: 1.5px solid var(--line);
	color: var(--ink);
	margin-top: 12px;
	width: 100%;
}

.woocommerce table.shop_table td.actions .button[name="update_cart"]:hover:not(:disabled) {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--bg);
}

.woocommerce table.shop_table td.actions .button:disabled {
	opacity: 0.45;
	cursor: default;
}

/* Fra 700 px er det plass til kupongen og oppdateringsknappen på samme linje. */
@media (min-width: 700px) {
	.woocommerce .coupon {
		float: left;
		width: min(520px, 60%);
	}

	.woocommerce table.shop_table td.actions .button[name="update_cart"] {
		float: right;
		width: auto;
		margin-top: 0;
	}
}

/*
 * Fra 1280 px: tabellen til venstre, sammendraget til høyre, og låste
 * kolonnebredder. Under den bredden er det ikke plass til begge deler uten at
 * produktnavnet blir uleselig, så da står de under hverandre med en tabell
 * som fordeler bredden selv.
 */
@media (min-width: 1280px) {
	.pf-handlevogn {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(300px, 0.42fr);
		gap: 40px;
		align-items: start;
	}

	.pf-handlevogn > .woocommerce-cart-form {
		grid-column: 1;
	}

	.pf-handlevogn > .cart-collaterals {
		grid-column: 2;
		margin: 0;
	}

	.pf-handlevogn > .cart-empty,
	.pf-handlevogn > .return-to-shop,
	.pf-handlevogn > .woocommerce-notices-wrapper {
		grid-column: 1 / -1;
	}

	/*
	 * `table-layout: fixed` er nødvendig for at breddene skal holde: med
	 * standardverdien `auto` er `width` på en celle bare et forslag, og
	 * nettleseren ga slett-kolonnen 469 av 960 piksler.
	 */
	.woocommerce-cart table.cart {
		table-layout: fixed;
	}

	.woocommerce-cart table.cart th.product-remove,
	.woocommerce-cart table.cart td.product-remove {
		width: 40px;
		padding-left: 14px;
		padding-right: 0;
		text-align: center;
	}

	.woocommerce-cart table.cart th.product-thumbnail,
	.woocommerce-cart table.cart td.product-thumbnail {
		width: 84px;
		padding-right: 0;
	}

	.woocommerce-cart table.cart th.product-name,
	.woocommerce-cart table.cart td.product-name {
		width: auto;
	}

	.woocommerce-cart table.cart th.product-price,
	.woocommerce-cart table.cart td.product-price,
	.woocommerce-cart table.cart th.product-subtotal,
	.woocommerce-cart table.cart td.product-subtotal {
		width: 110px;
		white-space: nowrap;
	}

	.woocommerce-cart table.cart th.product-quantity,
	.woocommerce-cart table.cart td.product-quantity {
		width: 104px;
	}

	.woocommerce-cart table.cart td.product-quantity .qty {
		width: 72px;
	}
}

/*
 * Under 768 px gjør WooCommerce tabellen om til stablede rader med
 * feltnavnet foran verdien. Den formen beholdes — den er riktig på mobil —
 * men gis samme luft og linjer som resten av nettstedet.
 */
@media (max-width: 767px) {
	.woocommerce-cart table.cart {
		table-layout: auto;
	}

	.woocommerce-cart table.cart tbody td {
		display: block;
		width: auto !important;
		text-align: right;
		padding: 12px 16px;
		border-bottom: 1px solid var(--line);
	}

	.woocommerce-cart table.cart tbody td::before {
		float: left;
		font-family: 'Montserrat', sans-serif;
		font-size: 11px;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--ink-soft);
		font-weight: 700;
		padding-top: 3px;
	}

	.woocommerce-cart table.cart tbody td.product-name {
		text-align: left;
		font-size: 15px;
		line-height: 1.35;
	}

	.woocommerce-cart table.cart tbody td.product-name::before {
		display: none;
	}

	.woocommerce-cart table.cart tbody td.product-remove {
		text-align: right;
		border-bottom: none;
		padding-bottom: 0;
	}

	.woocommerce-cart table.cart tbody td.product-thumbnail {
		display: block;
		text-align: left;
		border-bottom: none;
		padding-bottom: 0;
	}

	.woocommerce-cart table.cart tbody td.product-thumbnail img {
		width: 92px;
	}

	.woocommerce-cart table.cart tbody tr:last-child td:last-child {
		border-bottom: none;
	}

	.woocommerce-cart table.cart tbody td.product-quantity .qty {
		width: 84px;
	}
}

/* ---------- Kasse ---------- */

.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
	width: 100%;
	float: none;
}

/*
 * Kassen i to kolonner.
 *
 * Radene må settes eksplisitt. Uten dem havner overskriften «Your order» i rad 1
 * og selve ordreoversikten i rad 2 — og siden rad 1 er like høy som hele
 * kundeskjemaet ved siden av, skyves oversikten langt ned på siden.
 */
.woocommerce-checkout form.checkout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-template-rows: auto 1fr;
	gap: 12px 56px;
	align-items: start;
}



.woocommerce-checkout #customer_details {
	grid-column: 1;
	grid-row: 1 / span 2;
}

.woocommerce-checkout #order_review_heading {
	grid-column: 2;
	grid-row: 1;
	margin-top: 0;
}

.woocommerce-checkout #order_review {
	grid-column: 2;
	grid-row: 2;
}

.woocommerce-checkout #order_review {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 26px;
}

.woocommerce-checkout #order_review table.shop_table {
	border: none;
	background: none;
}

.woocommerce form .form-row label {
	font-size: 12px;
	font-weight: 600;
	color: var(--ink-soft);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 6px;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
	border: 1.5px solid var(--line);
	border-radius: 6px;
	padding: 12px 14px;
	font-size: 14px;
	background: var(--card);
	color: var(--ink);
	height: auto;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	outline: none;
	border-color: var(--sage);
}

.woocommerce-checkout #payment {
	background: none;
	border-radius: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
	border-bottom: 1px solid var(--line);
	padding: 0 0 18px;
}

.woocommerce-checkout #payment div.form-row {
	padding: 18px 0 0;
}

.woocommerce-checkout #payment div.payment_box {
	background: var(--sage-tint);
	color: var(--ink);
	border-radius: 6px;
	font-size: 13.5px;
}

.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: var(--sage-tint);
}

/* ---------- Meldinger ---------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background: var(--card);
	border: 1px solid var(--line);
	border-top: 3px solid var(--sage);
	border-radius: 6px;
	color: var(--ink);
	font-size: 14.5px;
	padding: 16px 18px 16px 48px;
}

.woocommerce-error {
	border-top-color: #a63244;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	color: var(--sage-dark);
	top: 17px;
	left: 18px;
}

.woocommerce-error::before {
	color: #a63244;
}

/* Den gamle «Min konto»-blokken er borte: reglene under erstatter den helt. */

/* ---------- Mindre skjermer ---------- */

@media (max-width: 1024px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(3, 1fr);
	}

	.woocommerce div.product,
	.woocommerce-checkout form.checkout {
		grid-template-columns: 1fr;
		grid-template-rows: none;
		gap: 32px;
	}

	.woocommerce-checkout #customer_details,
	.woocommerce-checkout #order_review_heading,
	.woocommerce-checkout #order_review {
		grid-column: 1;
		grid-row: auto;
	}

	.woocommerce div.product .product_title {
		font-size: 28px;
	}
}

@media (max-width: 780px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(2, 1fr);
		gap: 18px;
	}

}

@media (max-width: 480px) {
	.woocommerce ul.products {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.pf-vare__overlegg {
		opacity: 1;
		transform: none;
	}

	.woocommerce table.shop_table img {
		width: 52px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pf-vare__bilde img,
	.pf-vare__overlegg {
		transition: none;
	}
}


/* ---------- Butikkseksjoner ---------- */

.pf-butikkdel {
	padding-bottom: 72px;
}

.pf-butikkdel + .pf-butikkdel {
	border-top: 1px solid var(--line);
	padding-top: 64px;
}

.pf-butikkdel__hero {
	border-radius: 8px;
	overflow: hidden;
	height: 340px;
	background: var(--sage-tint);
	margin-bottom: 32px;
}

.pf-butikkdel__hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pf-butikkdel__hode {
	display: grid;
	grid-template-columns: minmax(220px, 0.8fr) 1.2fr;
	gap: 40px;
	align-items: end;
	margin-bottom: 32px;
}

.pf-butikkdel__hode h2 {
	font-family: 'Montserrat', sans-serif;
	font-size: 32px;
	font-weight: 700;
	margin: 0;
	letter-spacing: -0.01em;
}

.pf-butikkdel__tekst {
	font-size: 16.5px;
	line-height: 1.65;
	color: var(--ink-soft);
	margin: 0;
	max-width: 620px;
}

@media (max-width: 1024px) {
	.pf-butikkdel__hero {
		height: 260px;
	}

	.pf-butikkdel__hode {
		grid-template-columns: 1fr;
		gap: 14px;
		align-items: start;
	}
}

@media (max-width: 600px) {
	.pf-butikkdel__hero {
		height: 180px;
	}

	.pf-butikkdel__hode h2 {
		font-size: 26px;
	}
}

/* ---------- Min side ----------
 *
 * WooCommerce leverer sin egen markup her. Den styles til nettstedets form i
 * stedet for a skrives om: klassenavnene (.woocommerce-MyAccount-*) er stabile
 * og brukes ogsa av utvidelser, sa a bytte dem ut ville brutt ting som henger
 * seg pa.
 */

.pf-minside {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 24px 72px;
}

.pf-minside__hode {
	padding: 12px 0 30px;
}

.pf-minside__hode h1 {
	margin: 6px 0 0;
	font-size: clamp(30px, 4vw, 44px);
	line-height: 1.1;
}

/* Menyen til venstre, innholdet til hoyre. */
.pf-minside__rutenett {
	display: grid;
	grid-template-columns: 232px minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}

/*
 * WooCommerce legger `float: left` og `width: 30%` pa menyen og `width: 68%`
 * pa innholdet. I et rutenett blir floaten ignorert, men bredden gjelder - og
 * menyen ble 30% av sin egen spalte, altsa 70px, med ikonet over teksten.
 * Sporene her bestemmer bredden; elementene skal fylle dem.
 */
.pf-minside .pf-minside__rutenett > .woocommerce-MyAccount-navigation,
.pf-minside .pf-minside__rutenett > .woocommerce-MyAccount-content {
	width: auto;
	float: none;
	margin: 0;
}

/* ---------- Menyen ---------- */

.pf-minside__meny ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.pf-minside__meny a {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 11px;
	padding: 10px 14px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ink-soft);
	text-decoration: none;
	transition: background 0.18s ease, color 0.18s ease;
}

.pf-minside__meny a:hover {
	background: var(--sage-tint);
	color: var(--ink);
}

.pf-minside__meny svg {
	width: 17px;
	height: 17px;
	flex-shrink: 0;
}

/* Det valgte punktet. WooCommerce setter klassen; her far den form. */
.pf-minside__meny .is-active > a {
	background: var(--ink);
	color: var(--bg);
}

/* Logg ut er ikke et sted man gar, det er noe man gjor. Derfor skilt ut. */
.pf-minside__meny .woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--line);
}

/* ---------- Kortene ---------- */

.pf-minside__kort {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 8px;
	overflow: hidden;
}

.pf-minside__kort + .pf-minside__kort,
.pf-minside__to {
	margin-top: 20px;
}

.pf-minside__to {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
}

.pf-minside__to .pf-minside__kort {
	margin-top: 0;
}

.pf-minside__kort-hode {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 16px 22px;
	border-bottom: 1px solid var(--line);
}

.pf-minside__kort-hode h2 {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
}

.pf-minside__brod {
	padding: 20px 22px;
}

.pf-minside__brod p,
.pf-minside__brod address {
	margin: 0 0 14px;
	font-style: normal;
	line-height: 1.6;
}

.pf-minside__brod p:last-child,
.pf-minside__brod address:last-child {
	margin-bottom: 0;
}

.pf-minside__svak {
	color: var(--ink-soft);
	font-size: 14px;
}

.pf-minside__tom {
	padding: 32px 22px 34px;
	text-align: center;
	color: var(--ink-soft);
}

.pf-minside__tom p {
	margin: 0 0 16px;
}

.pf-minside__tom p:last-child {
	margin: 0;
}

/* ---------- Ordrelisten ---------- */

.pf-ordreliste {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pf-ordreliste li + li {
	border-top: 1px solid var(--line);
}

.pf-ordreliste a {
	display: grid;
	grid-template-columns: 88px 1fr auto auto;
	align-items: baseline;
	gap: 16px;
	padding: 15px 22px;
	text-decoration: none;
	color: var(--ink);
	transition: background 0.18s ease;
}

.pf-ordreliste a:hover {
	background: var(--sage-tint);
}

.pf-ordreliste__nr {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.pf-ordreliste__dato {
	color: var(--ink-soft);
	font-size: 13.5px;
}

.pf-ordreliste__status {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sage-dark);
	white-space: nowrap;
}

.pf-ordreliste__sum {
	font-weight: 700;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* ---------- WooCommerce sine egne tabeller og skjemaer ---------- */

.woocommerce-MyAccount-content > .woocommerce-message,
.woocommerce-MyAccount-content > .woocommerce-error,
.woocommerce-MyAccount-content > .woocommerce-info {
	margin-bottom: 20px;
}

.woocommerce-MyAccount-content table.woocommerce-orders-table,
.woocommerce-MyAccount-content table.shop_table {
	width: 100%;
	border-collapse: collapse;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 8px;
	overflow: hidden;
}

.woocommerce-MyAccount-content table th {
	text-align: left;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ink-soft);
	font-weight: 700;
	padding: 13px 18px;
	border-bottom: 1px solid var(--line);
}

.woocommerce-MyAccount-content table td {
	padding: 15px 18px;
	border-bottom: 1px solid var(--line);
	font-size: 14px;
}

.woocommerce-MyAccount-content table tr:last-child td {
	border-bottom: none;
}

.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
	font-size: 19px;
	margin: 0 0 16px;
}

.woocommerce-MyAccount-content form .form-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 18px;
}

.woocommerce-MyAccount-content form label {
	font-size: 12px;
	font-weight: 600;
	color: var(--ink-soft);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.woocommerce-MyAccount-content fieldset {
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 20px 22px;
	margin: 24px 0;
}

.woocommerce-MyAccount-content fieldset legend {
	font-family: 'Montserrat', sans-serif;
	font-size: 13px;
	font-weight: 700;
	padding: 0 8px;
}

/* Adressene star som to kolonner nar det er plass. */
.woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
}

.woocommerce-Address {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 20px 22px;
}

.woocommerce-Address address {
	font-style: normal;
	line-height: 1.6;
	margin: 10px 0 0;
}

@media (max-width: 900px) {
	.pf-minside__rutenett {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	/* Pa smal skjerm ligger menyen som en rad over innholdet. */
	.pf-minside__meny ul {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.pf-minside__meny .woocommerce-MyAccount-navigation-link--customer-logout {
		margin-top: 0;
		padding-top: 0;
		border-top: none;
	}
}

@media (max-width: 600px) {
	.pf-ordreliste a {
		grid-template-columns: 1fr auto;
		gap: 4px 14px;
	}

	.pf-ordreliste__dato {
		grid-column: 1;
	}
}

/* ---------- Innloggingsvinduet ----------
 *
 * En dor for bade ansatte og kunder. Det er innloggingen som avgjor hvor man
 * havner, sa skjemaet er bevisst smalt og midtstilt - et vindu, ikke en side.
 * Et innloggingsfelt som strekker seg over hele skjermen ser ut som en feil.
 */

.pf-minside--logginn {
	max-width: 460px;
}

.pf-minside--logginn .pf-minside__hode {
	text-align: center;
	padding-bottom: 24px;
}

/*
 * WooCommerce skriver sin egen «Login»-overskrift over skjemaet. Sidehodet
 * over sier allerede det samme, og to overskrifter etter hverandre leser som
 * om den ene mangler noe.
 */
.pf-minside--logginn > h2 {
	display: none;
}

.pf-minside--logginn form.login,
.pf-minside--logginn form.woocommerce-form-login {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 26px 24px 24px;
	margin: 0;
}

.pf-minside--logginn .form-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 18px;
	padding: 0;
}

.pf-minside--logginn label {
	font-size: 12px;
	font-weight: 600;
	color: var(--ink-soft);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.pf-minside--logginn input[type="text"],
.pf-minside--logginn input[type="password"] {
	width: 100%;
}

/* Innsendingsknappen skal se ut som nettstedets knapper, ikke WooCommerce sine. */
.pf-minside--logginn button[type="submit"] {
	background: var(--sage-dark);
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 12px 24px;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	width: 100%;
}

.pf-minside--logginn button[type="submit"]:hover {
	background: var(--sage);
}

/* «Husk meg» er en avkrysningsboks, ikke en overskrift. */
/*
 * Merk spesifisiteten: `.woocommerce form .form-row label` lenger oppe i denne
 * filen setter uppercase pa alle etiketter i et skjema. «Husk meg» er en
 * avkrysningsboks, ikke en overskrift, sa den ma slas med et hakk mer.
 */
.pf-minside--logginn .form-row label.woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 18px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--ink);
	text-transform: none;
	letter-spacing: 0;
}

.pf-minside--logginn .woocommerce-form-login__rememberme input {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--sage-dark);
}

.pf-minside--logginn .woocommerce-LostPassword {
	margin: 16px 0 0;
	text-align: center;
	font-size: 13.5px;
}

.pf-minside--logginn .woocommerce-LostPassword a {
	color: var(--ink-soft);
}

.pf-minside--logginn .woocommerce-LostPassword a:hover {
	color: var(--ink);
}

/* Registrering, der den er slatt pa: to vinduer under hverandre. */
.pf-minside--logginn #customer_login {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.pf-minside--logginn #customer_login > div {
	width: auto;
	float: none;
}