/* Startsidans sektioner. Värdena speglar designkällan
   (Elagentenbutik Startsida.dc.html): Hero, Bästsäljare, Footer. */

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

/* WP:s grid-layout ("columns":2,"minimumColumnWidth":"420px") genererar
   `repeat(auto-fit, minmax(420px,1fr))`. Vid fönsterbredd ≥ ~1260px (tre
   gånger 420px) räknar auto-fit ut plats för en tredje kolumn, som blir
   tom eftersom hero bara har två barn — halva sektionen blev vit yta på
   bredare skärmar. Tvinga exakt två kolumner i stället; samma brytpunkt
   (900px) som kategorinavets megameny använder för sitt mobilläge. */
.eb-hero {
	grid-template-columns: minmax(420px, 1fr) minmax(420px, 1fr) !important;
}

@media (max-width: 899px) {
	.eb-hero {
		grid-template-columns: 1fr !important;
	}

	/* hero-presetet är vh-baserat (designkällans clamp(30px, 7vh, 76px)) — på en
	   smal, hög mobil blev rubriken 52 px, fem rader och ~250 px hög (och
	   "HEMMET," bredare än skärmen). Bredden styr i stället: ~38 px på en telefon. */
	.eb-hero h1 {
		font-size: clamp(30px, 10vw, 64px) !important;
	}

	/* bildkollaget döljs på mobil (Klara 2026-09-28) — bara panelen med rubrik,
	   text och knappar. !important: desktopens regler står längre ner i filen */
	.eb-hero__bilder {
		display: none !important;
	}

	.eb-hero__panel {
		border-right: 0 !important;
	}
}

@media (max-width: 599px) {
	.eb-hero__panel {
		padding-top: 28px !important;
		padding-bottom: 32px !important;
		row-gap: 24px;
	}

	/* knapparna sida vid sida i stället för staplade */
	.eb-hero .wp-block-buttons {
		flex-wrap: nowrap;
		gap: 10px;
	}

	.eb-hero .wp-block-button {
		flex: 1 1 0;
	}

	.eb-hero .wp-block-button__link {
		width: 100%;
		box-sizing: border-box;
		padding-top: 12px !important;
		padding-bottom: 12px !important;
		padding-left: 12px;
		padding-right: 12px;
		font-size: 13px !important;
		white-space: nowrap;
	}
}

/* sida vid sida får inte plats vid 320 px (WCAG 1.4.10), sidan blev 369 px
   bred: stapla knapparna igen på de smalaste skärmarna */
@media (max-width: 359px) {
	.eb-hero .wp-block-buttons {
		flex-wrap: wrap;
	}

	.eb-hero .wp-block-button {
		flex-basis: 100%;
	}
}

/* vänsterkanten ska ligga i linje med sidans 1360px-container,
   inte med hero-panelens egen kant */
.eb-hero__panel {
	padding: clamp(28px, 4vh, 72px) clamp(20px, 3vw, 56px) clamp(28px, 4vh, 72px)
		max(20px, calc((100vw - 1360px) / 2 + 20px));
	/* Gutenbergs flex-layout ("orientation":"vertical","justifyContent":"center") tolkar
	   justifyContent som align-items (tvärled) för en vertikal flex, inte som vertikal
	   centrering — renderades som align-items:center. Textgruppen (nästan lika bred som
	   panelen) syntes knappt påverkad, men den smala knappraden drogs in mot mitten.
	   Riktig vertikal centrering + vänsterjusterat innehåll: justify-content styr
	   huvudaxeln (vertikal, eftersom column-riktning), align-items:stretch låter varje
	   barn fylla bredden så deras eget vänsterjusterade innehåll hamnar rätt. */
	justify-content: center;
	align-items: stretch;
}

.eb-hero__bilder {
	/* core lägger padding:1.25em 2.375em på alla wp:group med bakgrundsfärg
	   (.wp-block-group.has-background) — osynligt tills bilderna ska ligga
	   kant i kant med panelen och sidans egen ram */
	padding: 0;
	grid-template-rows: minmax(0, 1.7fr) minmax(0, 1fr);
	/* måste vara "height", inte "min-height": .eb-hero (grid-förälder) har ingen egen
	   definita höjd, så utan en definit höjd här har raderna (1.7fr/1fr) inget att
	   fördela emot — bilderna föll tillbaka på sin egen intrinsiska storlek (grill-
	   bilden blev 1214px hög i stället för ~400px) och drog med sig hela hero-sektionen
	   till nästan 1930px. Samma clamp-värde som designkällans hero-rad (72svh/660px). */
	height: min(72svh, 660px);
}

/* Blir panelen högre än kollaget (brett + högt fönster, långa rubriker) blev
   det ett tomt band under bilderna. Kollaget sträcks nu till heroradens höjd
   (grid-barn med align-self:stretch räknas som definit höjd), med den gamla
   höjden som minimum. Bilderna ligger absolut i sina celler, så deras egen
   pixelstorlek kan inte blåsa upp raderna igen (se kommentaren ovan). */
@media (min-width: 900px) {
	.eb-hero__bilder {
		height: auto;
		min-height: min(72svh, 660px);
		align-self: stretch;
	}

	.eb-hero__bilder .wp-block-image {
		position: relative;
	}

	.eb-hero__bilder .wp-block-image img {
		position: absolute;
		inset: 0;
	}
}

.eb-hero__bilder .wp-block-image {
	margin: 0;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
}

/* första bilden spänner över båda kolumnerna */
.eb-hero__bilder .wp-block-image:first-child {
	grid-column: 1 / -1;
}

.eb-hero__bilder .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---- Bästsäljare: filterchips ---- */

.eb-filterchips p {
	margin: 0;
}

.eb-filterchips a {
	display: inline-block;
	border: 1px solid var(--wp--preset--color--contrast-2);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--base);
	padding: 7px 12px;
	font-family: Karla, sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.eb-filterchips a:hover {
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--contrast);
}

/* ---- Bästsäljare: produktkort ---- */

.wc-block-product-template {
	gap: 12px !important;
}

.wc-block-product-template .wc-block-product {
	background: var(--wp--preset--color--surface);
	border: 1px solid rgba(42, 51, 39, 0.4);
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: 0 !important;
}

.wc-block-product-template .wc-block-product:hover {
	background: #efeadc;
}

.wc-block-product-template .wc-block-components-product-image {
	margin: 0;
	background: #fff;
	border-bottom: 1px solid rgba(42, 51, 39, 0.25);
}

.wc-block-product-template .wc-block-components-product-image img {
	width: 100%;
	display: block;
}

.wc-block-product-template .wp-block-post-title {
	margin: 0;
	padding: 14px 15px 0;
	font-family: Karla, sans-serif;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
	flex: 1 1 auto;
}

.wc-block-product-template .wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.wc-block-product-template .wp-block-woocommerce-product-price {
	padding: 8px 15px 17px;
	font-family: "Josefin Sans", sans-serif;
	font-weight: 700;
	font-size: 20px;
	letter-spacing: 0.02em;
}

/* ordinariepriset vid rea: mindre och överstruket */
.wc-block-product-template .wp-block-woocommerce-product-price del {
	font-family: Karla, sans-serif;
	font-weight: 400;
	font-size: 13px;
	color: #7a7a6a;
}

.wc-block-product-template .wp-block-woocommerce-product-price ins {
	text-decoration: none;
}

/* ---- Kampanj: de två mindre korten ---- */

/* Kortet är en flow-grupp (display:block), inte flex — align-self gjorde
   ingenting och etiketten sträcktes över hela bredden, tätt mot rubriken. */
.eb-kampanjkort__badge {
	width: fit-content;
	margin: 0 0 10px;
	border-radius: var(--wp--custom--radius--sm);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
}

.eb-kampanjkort__titel {
	margin: 0;
	font-family: "Josefin Sans", sans-serif;
	font-weight: 700;
	font-size: 19px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* designen har understruken versal-länk, ingen pil */
.eb-kampanjkort__lank {
	margin: 0;
}

.eb-kampanjkort__lank a {
	display: inline-block;
	border-bottom: 1px solid var(--wp--preset--color--contrast-2);
	font-family: "Josefin Sans", sans-serif;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.eb-kampanjkort__lank a:hover {
	color: var(--wp--preset--color--accent);
	border-bottom-color: var(--wp--preset--color--accent);
}

/* ---- Footer: länklistor utan punkter ---- */

.is-style-elagenten-footerlista {
	list-style: none;
	/* samma avstånd under kolumnrubriken som Öppettider-stycket får av
	   blockavståndet (24 px) — tidigare 0, så listorna låg tätt mot rubriken */
	margin: var(--wp--style--block-gap, 24px) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.is-style-elagenten-footerlista a {
	color: var(--wp--preset--color--base-alt);
	text-decoration: none;
}

.is-style-elagenten-footerlista a:hover {
	color: var(--wp--preset--color--secondary);
}

/* ---- Kampanj: dynamisk (patterns/kampanj.php, 2026-09-28) ----
   Två product-collection-block: .eb-kampanj-stor (1 produkt: vit bildyta +
   rostfärgad textpanel) och .eb-kampanj-sma (2 produkter: vit bildyta +
   krämfärgad textdel). Rea-brickan ligger på bilden, som i kategorikorten.
   Woo:s produktmallsregler (li-bredd, 15 px padding på titel/termer,
   object-fit:cover, länkfärg) skrivs över med !important där det behövs. */

.eb-kampanj .wc-block-product-template {
	margin: 0;
	padding: 0;
	list-style: none;
}

.eb-kampanj .wc-block-product-template.is-flex-container > .wc-block-product {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	text-align: left;
}

.eb-kampanj-stor,
.eb-kampanj-stor .wc-block-product-template,
.eb-kampanj-stor .wc-block-product,
.eb-kampanj-sma,
.eb-kampanj-sma .wc-block-product-template,
.eb-kampanj-sma .wc-block-product {
	height: 100%;
}

/* texten i korten: ingen egen padding, allt i samma vänsterlinje */
.eb-kampanj .wc-block-product .wp-block-post-title,
.eb-kampanj .wc-block-product .eb-kampanj__kategori,
.eb-kampanj .wc-block-product .eb-kampanj__pris {
	margin: 0 !important;
	padding: 0 !important;
	text-align: left !important;
}

.eb-kampanj .wc-block-product .wp-block-post-title a {
	color: inherit !important;
	text-decoration: none;
}

/* bildytor: vita, bilden hel och centrerad */
.eb-kampanj .wc-block-components-product-image {
	position: relative;
	margin: 0 !important;
	overflow: hidden;
	background: #fff !important;
}

.eb-kampanj .wc-block-components-product-image > a {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	inset: 0;
	padding: 24px;
	box-sizing: border-box;
}

.eb-kampanj .wc-block-components-product-image img {
	position: static !important;
	width: 100% !important;
	height: 100% !important;
	padding: 0 !important;
	object-fit: contain !important;
	transition: transform 0.35s ease;
}

.eb-kampanj .wc-block-product:hover .wc-block-components-product-image img {
	transform: scale(1.04);
}

/* rea-brickan på bilden */
.eb-kampanj .eb-kampanj__badge {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	margin: 0 !important;
}

.eb-kampanj .eb-kampanj__badge .wc-block-components-product-sale-badge {
	position: static;
	display: inline-block;
	margin: 0;
	padding: 5px 10px;
	border: 0;
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--surface);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
}

.eb-kampanj-stor .eb-kampanj__badge .wc-block-components-product-sale-badge {
	padding: 7px 13px;
	font-size: 15px;
	background: var(--wp--preset--color--contrast);
}

.eb-kampanj__kategori {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.75;
}

.eb-kampanj__pris {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 20px;
}

/* stora kortet */
.eb-kampanj-stor__kort {
	display: grid;
	grid-template-columns: 1fr 1fr;
	height: 100%;
	min-height: 360px;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--contrast-2);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--surface);
}

.eb-kampanj-stor__bild {
	min-height: 280px;
	border-right: 1px solid var(--wp--preset--color--contrast-2);
}

.eb-kampanj-stor__text {
	justify-content: center !important;
	padding: 32px;
	gap: 16px !important;
}

.eb-kampanj .wc-block-product .eb-kampanj-stor__titel {
	font-size: clamp(1.5rem, 1.1rem + 1vw, 2.125rem) !important;
	line-height: 1.12 !important;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--wp--preset--color--surface);
}

.eb-kampanj-stor .eb-kampanj__pris {
	color: var(--wp--preset--color--surface);
}

.eb-kampanj-stor__knapp {
	display: inline-block;
	margin-top: 8px;
	padding: 14px 24px;
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast) !important;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.15s, color 0.15s;
}

.eb-kampanj-stor__knapp:hover {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--surface) !important;
}

/* små kort */
.eb-kampanj-sma .wc-block-product-template {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.eb-kampanjkort-dyn {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--contrast-2);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--base-alt);
	color: var(--wp--preset--color--contrast);
}

.eb-kampanjkort-dyn__bild {
	aspect-ratio: 1 / 1;
	border-bottom: 1px solid var(--wp--preset--color--contrast-2);
}

.eb-kampanjkort-dyn__text {
	flex: 1;
	padding: 18px;
	gap: 8px !important;
}

.eb-kampanj .wc-block-product .eb-kampanjkort__titel {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 17px !important;
	font-weight: 700;
	line-height: 1.25 !important;
	letter-spacing: 0.01em;
	text-transform: none;
}

/* read-more är själva <a>:n — understruken versal-länk längst ner i kortet */
a.eb-kampanjkort__lank {
	display: inline-block;
	margin-top: auto !important;
	padding-top: 10px;
	border-bottom: 1px solid var(--wp--preset--color--contrast-2);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

a.eb-kampanjkort__lank:hover {
	color: var(--wp--preset--color--accent);
	border-bottom-color: var(--wp--preset--color--accent);
}

.eb-kampanj__tom a {
	color: inherit;
}

@media (max-width: 1100px) and (min-width: 782px) {
	.eb-kampanj-stor__kort {
		grid-template-columns: 1fr;
	}

	.eb-kampanj-stor__bild {
		border-right: 0;
		border-bottom: 1px solid var(--wp--preset--color--contrast-2);
		aspect-ratio: 16 / 10;
		min-height: 0;
	}
}

@media (max-width: 781px) {
	.eb-kampanj-stor__kort {
		grid-template-columns: 1fr;
	}

	.eb-kampanj-stor__bild {
		border-right: 0;
		border-bottom: 1px solid var(--wp--preset--color--contrast-2);
		aspect-ratio: 4 / 3;
		min-height: 0;
	}

	.eb-kampanj-stor__text {
		padding: 24px;
	}
}

@media (max-width: 480px) {
	.eb-kampanj-sma .wc-block-product-template {
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}

	.eb-kampanjkort-dyn__text {
		padding: 12px;
	}

	.eb-kampanj .wc-block-product .eb-kampanjkort__titel {
		font-size: 15px !important;
	}
}

/* Woo ger post-title flex-grow:1 i produktkort — i det stora kortet tryckte
   den ner knappen till botten med ett stort tomrum. Tomt prisblock (6 px) i
   katalogläget döljs. */
.eb-kampanj .wc-block-product .wp-block-post-title {
	flex-grow: 0 !important;
}

body.eb-utan-priser .eb-kampanj .eb-kampanj__pris {
	display: none;
}

/* Bästsäljarnas filterpillar (assets/js/bastsaljare.js): vald pill + laddning */
.eb-filterchips a.is-active {
	background: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--surface);
}

#bastsaljare .wp-block-woocommerce-product-collection {
	transition: opacity 0.2s;
}

#bastsaljare .wp-block-woocommerce-product-collection.is-loading {
	opacity: 0.4;
	pointer-events: none;
}

.eb-bastsaljare-tom {
	margin: 24px 0 0;
	text-align: center;
}