/*
 * Forsiden ([butikken_forside], includes/class-butikken-forside.php). Lastes bare på sider med kortkoden.
 * Bygget av de samme delene som resten av butikken (assets/utseende.css): skrift, farger, avstander og
 * produktkort. Ingen egen pynt; verdiene etter komma gjelder bare når utseendet er slått av.
 */

/* Siden styrer bredden selv, uten temaets tittel og brødsmulesti. */
.butikken-forside-page .site-content > .woostify-container,
.butikken-forside-page .site-content .content-area,
.butikken-forside-page .site-content .site-main,
.butikken-forside-page .site-content article.page {
	max-width: none;
	padding: 0;
	width: 100%;
}

.butikken-forside-page .entry-header,
.butikken-forside-page .woostify-breadcrumb,
.butikken-forside-page .page-header {
	display: none;
}

.butikken-forside-page .site-content {
	padding-top: 0;
}

.bf {
	color: var(--bk-text, #1d2420);
	font-family: var(--bk-font, system-ui, sans-serif);
	padding-bottom: var(--bk-16, 64px);
}

.bf a {
	text-decoration: none;
}

.bf img {
	display: block;
	max-width: 100%;
}

/* Samme bredde som butikken (Woostify sin container). */
.bf-wrap {
	box-sizing: border-box;
	margin: 0 auto;
	max-width: 1200px;
	padding: 0 15px;
}

.bf-section {
	padding-top: var(--bk-16, 64px);
}

.bf-head {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: var(--bk-2, 8px) var(--bk-6, 24px);
	justify-content: space-between;
	margin-bottom: var(--bk-6, 24px);
}

.bf .bf-h2 {
	font-size: var(--bk-text-2xl, 24px);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.3;
	margin: 0;
}

/* Merkelogoen erstatter overskriftsteksten i merkerekken. */
.bf .bf-brand-logo {
	display: block;
	width: 180px;
	max-width: 100%;
	height: auto;
	filter: brightness(0);
}

.bf .bf-head-link {
	color: var(--bk-accent, #0a5f43);
	font-weight: 600;
}

.bf .bf-head-link:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bf-lead {
	color: var(--bk-text-subtle, #575e5a);
	margin: var(--bk-2, 8px) 0 0;
	max-width: 60ch;
}

/*
 * Merkerekken: lys beige bakgrunn med svart logo og hvit knapp med en svak bakgrunnsendring ved hover. Produktene under står på sidens
 * lyse bakgrunn som ellers i butikken; en svart produktflate ble for tung på en lys side.
 */
.bf-brand[style*="--bf-brand-color"] {
	--bf-brand-ink: #EDE4D8;
}

.bf-brand[style*="--bf-brand-color"] .bf-head {
	align-items: center;
	background: var(--bf-brand-ink);
	border-radius: var(--bk-radius-md, 8px);
	gap: var(--bk-6, 24px);
	margin-bottom: var(--bk-6, 24px);
	padding: var(--bk-8, 32px);
}

.bf-brand[style*="--bf-brand-color"] .bf-h2 {
	color: var(--bk-text, #1b1d1a);
}

.bf-brand[style*="--bf-brand-color"] .bf-brand-logo {
	filter: brightness(0);
	width: 200px;
}

.bf-brand[style*="--bf-brand-color"] .bf-lead {
	color: var(--bk-text, #1b1d1a);
	margin-top: var(--bk-4, 16px);
}

.bf-brand[style*="--bf-brand-color"] .bf-head-link {
	align-items: center;
	background: #fff;
	border-radius: var(--bk-radius-sm, 4px);
	color: #111;
	display: inline-flex;
	justify-content: center;
	min-height: var(--bk-control, 48px);
	padding: var(--bk-3, 12px) var(--bk-6, 24px);
	text-align: center;
}

.bf-brand[style*="--bf-brand-color"] .bf-head-link:hover,
.bf-brand[style*="--bf-brand-color"] .bf-head-link:focus-visible {
	background: #f7f3ed;
	color: #111;
}

.bf-brand[style*="--bf-brand-color"] .bf-head a:focus-visible {
	outline: 2px solid var(--bk-focus, #00662a);
	outline-offset: 4px;
}

/* Med ingress: «Se alle» står nederst, på linje med ingressen. */
.bf-head--lead {
	align-items: flex-end;
}

/*
 * Kampanjer: bildet er hele kortet, med tittel (eller merkelogo), tekst og knapp samlet nederst på bildet, som
 * kampanjeflatene i Elementor. En mørk toning nederst gir hvit tekst kontrast. Hele kortet er lenken; ved hover
 * zoomer bildet litt inn og knappen får en dypere nyanse av sin egen farge.
 */
.bf-campaigns {
	display: grid;
	gap: var(--bk-6, 24px);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	padding-top: var(--bk-6, 24px);
}

/* Bildene er i 4:3 og beskjæres fra litt over midten, så hoder og produkter står i bildet også når kildebildet er stående. */
.bf .bf-campaign {
	aspect-ratio: 4 / 3;
	background-color: var(--butikken-image-bg, #f4eee6);
	border-radius: var(--bk-radius-md, 8px);
	color: #fff;
	display: block;
	isolation: isolate;
	overflow: hidden;
	position: relative;
}

.bf .bf-campaign:hover {
	color: #fff;
}

.bf-campaign-image {
	height: 100%;
	object-fit: cover;
	object-position: 50% 25%;
	/* Mykere og varmere bilder som glir inn i den kremhvite siden. */
	filter: saturate(0.85) contrast(0.9) brightness(1.04) sepia(0.08);
	transition: opacity 0.5s ease, transform 0.6s ease;
	width: 100%;
}

.bf .bf-campaign:hover .bf-campaign-image {
	transform: scale(1.03);
}

.bf .bf-campaign::after {
	background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.15) 45%, rgba(0, 0, 0, 0) 70%);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 1;
}

.bf-campaign-overlay {
	align-items: center;
	bottom: var(--bk-8, 32px);
	display: flex;
	flex-direction: column;
	left: var(--bk-6, 24px);
	position: absolute;
	right: var(--bk-6, 24px);
	text-align: center;
	z-index: 2;
}

.bf .bf-campaign-logo {
	filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.35));
	height: auto;
	margin-bottom: var(--bk-3, 12px);
	width: min(60%, 400px);
}

/* Tittel og knapp i Figtree, som er lastet på forhånd: temaets Fira Sans kom etter at siden var tegnet, og knappen skiftet bredde. */
.bf-campaign-title {
	font-family: var(--bk-font, sans-serif);
	font-size: clamp(26px, 2.6vw, 36px);
	font-weight: 600;
	line-height: 1.15;
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}

.bf-campaign-text {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.4;
	margin-top: var(--bk-1, 4px);
	opacity: 0.92;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
}

/*
 * Kampanjeknappen: versaler i temaets skrift, 22 px. Unntak fra setningsbruken ellers; den står alene på et bilde
 * og skal leses på avstand. Hvit på oransje holder kontrastkravet for stor tekst (3:1).
 */
.bf-campaign-button {
	background: var(--bf-knapp, var(--bk-accent, #0a5f43));
	border-radius: var(--bk-radius-sm, 4px);
	color: var(--bf-knapp-tekst, #fff);
	font-family: var(--bk-font, sans-serif);
	font-size: 22px;
	font-weight: 500;
	letter-spacing: 1px;
	line-height: 1;
	margin-top: var(--bk-5, 20px);
	padding: 16px 32px;
	text-transform: uppercase;
	transition: background-color 0.15s ease, color 0.15s ease;
}

/* Behold kampanjens farge og kontrastfargen på teksten også ved hover og tastaturfokus. */
.bf .bf-campaign:is(:hover, :focus-visible) .bf-campaign-button {
	background: color-mix(in srgb, var(--bf-knapp, var(--bk-accent, #0a5f43)) 88%, #000);
	color: var(--bf-knapp-tekst, #fff);
}

@media (prefers-reduced-motion: reduce) {
	.bf-campaign-image,
	.bf-campaign-button {
		transition: none;
	}

	.bf .bf-campaign:hover .bf-campaign-image {
		transform: none;
	}
}

/* Fordelene: én rad med hake foran, på en lys flate. */
.bf .bf-usps {
	background: var(--butikken-image-bg, #f4eee6);
	border-radius: var(--bk-radius-md, 8px);
	display: grid;
	gap: var(--bk-4, 16px) var(--bk-6, 24px);
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	list-style: none;
	margin: var(--bk-8, 32px) auto 0;
	max-width: calc(1200px - 30px);
	padding: var(--bk-5, 20px) var(--bk-6, 24px);
}

.bf-usp {
	align-items: flex-start;
	display: flex;
	font-size: var(--bk-text-sm, 14px);
	gap: var(--bk-3, 12px);
	line-height: 1.5;
	margin: 0;
}

.bf-usp strong {
	align-items: center;
	display: flex;
	font-weight: 600;
	gap: var(--bk-2, 8px);
	/* Like høy som en tekstlinje, også når tittelen bare er logoer (Vipps og Klarna), så teksten under står likt. */
	min-height: 1.5em;
}

.bf-usp-text {
	color: var(--bk-text-subtle, #575e5a);
	display: block;
}

.bf-usp-icon {
	fill: none;
	flex: none;
	height: 20px;
	margin-top: 1px;
	stroke: var(--bk-success, #1a7f37);
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2.2;
	width: 20px;
}

/* Vipps og Klarna i fordelslinjen. */
.bf-pay {
	height: 14px;
	width: auto;
}

/* Vipps har underlengder («pps»); Klarna løftes så grunnlinjene står likt. */
.bf-pay[alt="Klarna"] {
	transform: translateY(-20%);
}

.bf-pay-sep {
	background: var(--bk-border-subtle, #e2e5e3);
	height: 14px;
	width: 1px;
}

/*
 * Kategorier: et kort per dyr. Strektegningen (hund og katt, oransje øre) står til høyre og halsen går ut nederst;
 * navn, antall og lenke står til venstre.
 */
.bf-cats {
	display: grid;
	gap: var(--bk-6, 24px);
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.bf .bf-cat {
	background: #ece4d8;
	border-radius: var(--bk-radius-md, 8px);
	color: inherit;
	display: block;
	isolation: isolate;
	min-height: 220px;
	overflow: hidden;
	position: relative;
	transition: background-color 0.2s ease;
}

.bf .bf-cat:hover {
	background: #e6dccd;
	color: inherit;
}

.bf-cat-icon {
	/* Strektegningen har luft over og til høyre; bare halsen går ut nederst. */
	bottom: 0;
	color: var(--bk-accent, #0a5f43);
	height: calc(100% - var(--bk-6, 24px));
	position: absolute;
	right: var(--bk-6, 24px);
	transition: transform 0.4s ease;
	width: 62%;
	z-index: -1;
}

.bf .bf-cat:hover .bf-cat-icon {
	transform: translateX(-6px);
}

.bf-cat-icon svg {
	display: block;
	height: 100%;
	width: 100%;
}

.bf-cat-icon img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* Illustrasjonene (byster) står på kortets nederste kant, med plass til navn og antall til venstre. */
.bf .bf-cat:has(.bf-cat-art) {
	min-height: 260px;
}

.bf-cat-icon:has(.bf-cat-art) {
	bottom: 0;
	height: calc(100% - var(--bk-6, 24px));
	right: var(--bk-6, 24px);
	width: 62%;
}

.bf-cat-icon .bf-cat-art {
	height: 100%;
	object-fit: contain;
	object-position: right bottom;
	width: 100%;
}

/*
 * Annethvert kort er speilvendt, så dyrene ser mot teksten: første kort (hunden) har illustrasjonen til venstre og
 * teksten høyrestilt, andre (katten) motsatt. Ved hover glir illustrasjonen litt mot teksten.
 */
.bf .bf-cat:nth-child(odd) .bf-cat-icon {
	left: var(--bk-6, 24px);
	right: auto;
}

.bf .bf-cat:nth-child(odd) .bf-cat-icon .bf-cat-art {
	object-position: left bottom;
}

.bf .bf-cat:nth-child(odd) .bf-cat-body {
	align-items: flex-end;
	text-align: right;
}

.bf .bf-cat:nth-child(odd):hover .bf-cat-icon {
	transform: translateX(6px);
}

.bf-cat-body {
	display: flex;
	flex-direction: column;
	gap: var(--bk-1, 4px);
	padding: var(--bk-8, 32px);
}

.bf-cat-name {
	font-size: var(--bk-text-3xl, 30px);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.bf-cat-count {
	color: var(--bk-text-subtle, #5e625c);
	font-size: var(--bk-text-sm, 14px);
}

.bf-cat-more {
	color: var(--bk-accent, #0a5f43);
	font-weight: 600;
	margin-top: var(--bk-4, 16px);
}

.bf .bf-cat:hover .bf-cat-more {
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.bf-cat-icon {
		transition: none;
	}
}

/* Produktlistene er WooCommerce sine; bare luften under fjernes. */
.bf .woocommerce ul.products {
	margin-bottom: 0;
}

/* Små merkelogoer og venstrejustert produktinformasjon i alle forsidens produktrader. */
.bf .products .product .product-loop-content,
.bf .products .product .butikken-brand--loop,
.bf .products .product .woocommerce-loop-product__title,
.bf .products .product .woostify-loop-product__title,
.bf .products .product .product-loop-meta {
	text-align: left;
}

.bf .products .product .butikken-brand--loop {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	min-height: 24px;
	font-size: var(--bk-text-sm, 14px);
}

.bf .products .product img.butikken-loop-brand-logo {
	display: block;
	width: 80px;
	height: 24px;
	margin: 0;
	object-fit: contain;
	object-position: left center;
}

.bf .bf-button {
	align-items: center;
	background: var(--bk-accent, #0a5f43);
	border-radius: var(--bk-radius-sm, 4px);
	color: #fff;
	display: inline-flex;
	font-weight: 600;
	min-height: var(--bk-control, 48px);
	padding: 0 var(--bk-5, 20px);
}

.bf .bf-button:hover {
	background: var(--bk-accent-hover, #084d36);
	color: #fff;
}

/* Lys knapp på grønn flate. */
.bf .bf-button--light {
	background: #fcf6f0;
	color: var(--bk-accent, #0a5f43);
}

.bf .bf-button--light:hover {
	background: #fff;
	color: var(--bk-accent, #0a5f43);
}

@media (max-width: 767px) {
	.bf-brand[style*="--bf-brand-color"] .bf-head {
		align-items: flex-start;
		flex-direction: column;
		padding: var(--bk-6, 24px);
	}

	.bf-brand[style*="--bf-brand-color"] > .woocommerce {
		padding: var(--bk-4, 16px);
	}

	/* Mindre på mobil, fortsatt stor tekst (kontrastkravet på oransje). */
	.bf-campaign-button {
		font-size: 20px;
		padding: 14px 28px;
	}

	.bf-campaigns {
		gap: var(--bk-8, 32px);
		grid-template-columns: 1fr;
		padding-top: var(--bk-4, 16px);
	}

	.bf-section {
		padding-top: var(--bk-12, 48px);
	}

	.bf .bf-usps {
		margin-left: 15px;
		margin-right: 15px;
		padding: var(--bk-4, 16px);
	}

	.bf-cats {
		gap: var(--bk-3, 12px);
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* To smale kort: teksten øverst, illustrasjonen nederst til høyre. */
	.bf .bf-cat {
		min-height: 200px;
	}

	.bf-cat-body {
		padding: var(--bk-4, 16px);
	}

	.bf-cat-name {
		font-size: var(--bk-text-xl, 21px);
	}

	.bf-cat-more {
		display: none;
	}

	.bf-cat-icon {
		height: 55%;
		width: 90%;
	}

	.bf-cat-icon:has(.bf-cat-art) {
		height: 160px;
		width: calc(100% - var(--bk-4, 16px));
	}

	.bf .bf-cat:nth-child(odd) .bf-cat-icon {
		left: var(--bk-2, 8px);
	}

}

/* Åpne overskrifter som i referansen; fargen ligger bare bak produktbildene. */
.bf .bf-bestsellers > .bf-head .bf-h2,
.bf .bf-sale-highlight > .bf-head .bf-h2 {
  color: var(--bk-text, #1d2420);
  font-size: clamp(24px, 3vw, 30px);
}

/* Sesongdekor i hjørnet: løv om høsten og snøkrystaller om vinteren. */
.bf-season-decor {
  position: absolute;
  top: var(--bk-4, 16px);
  right: var(--bk-4, 16px);
  width: 116px;
  height: 104px;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .2));
}
.bf-season-decor > span { display: none; }
.bf-seasonal[data-season="autumn"] .bf-season-leaves,
.bf-seasonal[data-season="winter"] .bf-season-snow { display: block; }
.bf-season-decor svg { position: absolute; width: 44px; height: 56px; }
.bf-season-leaves { color: #ed8b32; }
.bf-season-leaves svg:first-child { right: 3px; top: 0; transform: rotate(28deg); }
.bf-season-leaves svg:nth-child(2) { right: 53px; top: 12px; transform: rotate(-35deg); color: #fbb357; width: 36px; }
.bf-season-leaves svg:nth-child(3) { right: 28px; top: 52px; transform: rotate(65deg); color: #d86623; width: 32px; height: 40px; }
.bf-season-snow { color: #fff; }
.bf-season-snow svg:first-child { right: 3px; top: 0; }
.bf-season-snow svg:nth-child(2) { right: 58px; top: 16px; width: 28px; }
.bf-season-snow svg:nth-child(3) { right: 24px; top: 58px; width: 22px; height: 22px; }
@media (max-width: 600px) {
  .bf-season-decor { transform: scale(.8); transform-origin: top right; top: 12px; right: 12px; }
}

/* Lys kremfarge bak tilbudsproduktene, som i brukerens referanse. */
.bf-sale-highlight { --butikken-image-bg: #f3f3e5; }
.bf-sale-highlight .product-loop-image-wrapper { background: var(--butikken-image-bg); }

/* Faste varme flater for merker. */
.bf-sale-highlight { --butikken-image-bg: #f4eee6; }
@media(max-width:700px) { 
/* Bannerknapper reagerer direkte, uten innfading eller bevegelse fra temaet. */
.bf .bf-brand .bf-head-link,
.bf .bf-button {
	transition: none;
	animation: none;
}

/* Juleinngangen bruker et ekte miljøfoto og vises i november og desember. */
.bf .bf-christmas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--bk-8, 32px);
  align-items: center;
  background: var(--bk-surface-hover, #f1ece4);
  border-radius: var(--bk-radius-md, 8px);
  padding: var(--bk-6, 24px);
}
.bf [data-christmas-period][hidden] { display: none; }
.bf-christmas .bf-head { display: block; margin-bottom: 0; }
.bf-christmas .bf-head-link { display: inline-block; margin-top: var(--bk-4, 16px); }
.bf-christmas img { display: block; width: 100%; height: 200px; object-fit: cover; border-radius: var(--bk-radius-md, 8px); }
@media (max-width: 700px) {
  .bf .bf-christmas { grid-template-columns: minmax(0, 1fr); gap: var(--bk-4, 16px); }
}