/* Sajtövergripande strukturell CSS (alla mallar), skiljt från komponentspecifika
   filer som header.css/startsida.css.

   Core lägger `:where(.wp-site-blocks) > * { margin-block: 24px 0px; }` och
   nollar sedan bara :first-child/:last-child. header → main → footer gör
   main till mellanbarnet, som ingen av undantagen träffar — en 24px lucka
   mellan headerns navrad och sidans innehåll (hero, kategoriarkiv,
   produktsida, allt) på varje mall. Footern är sista barnet men :last-child
   nollar bara margin-block-end, så samma 24 px låg också mellan sidans sista
   sektion och footern. `:where()` har noll specificitet, så en vanlig
   selektor räcker för att slå den. */
main,
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* Kategori- och produktsidans <main> (klassen eb-sida i mallarna) saknade egen
   sidomarginal — under ~1400 px låg banner, produktkort och rubrik kant i kant
   med skärmen. 20 px, samma som headern. */
.eb-sida {
	padding-left: 20px;
	padding-right: 20px;
	/* sidfoten ligger nu kant i kant med main (se ovan) — egen luft under innehållet */
	padding-bottom: 48px;
}

/* Produktgrid (product-collection / relaterade): cores flexlayout ger en
   produkt per rad under 600 px och fyra över. 2 kolumner på mobil, 3 upp till
   1199 px (sidopanelen tar 258 px), fyra därefter som förut. */
@media (max-width: 1199px) {
	.wc-block-product-template.is-flex-container {
		gap: 12px !important;
	}

	/* border-box: kortets 1 px-ram läggs annars utanpå bredden och sista
	   kortet i raden bryts ner till nästa */
	.wc-block-product-template.is-flex-container > li {
		box-sizing: border-box;
		width: calc((100% - 24px) / 3) !important;
		margin: 0 !important;
	}
}

@media (max-width: 599px) {
	.wc-block-product-template.is-flex-container > li {
		width: calc((100% - 12px) / 2) !important;
	}

	/* smalare kort — 12 px i stället för 15 px, lika för etikett, namn och pris */
	.wc-block-product-template .wp-block-post-terms,
	.wc-block-product-template .wp-block-post-title,
	.wc-block-product-template .wp-block-woocommerce-product-price,
	.wc-block-product-template .wp-block-woocommerce-product-stock-indicator {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}

	.wc-block-product-template .wp-block-post-title {
		font-size: 14px !important;
	}

	.wc-block-product-template .wp-block-woocommerce-product-price {
		font-size: 17px !important;
	}
}

/* Kontaktsidan (patterns/kontakt.php) */
.eb-kontakt-intro {
	max-width: 640px;
}

/* ---- Om oss-sidan (patterns/om-oss.php) ---- */

/* Hero: panel + bild kant i kant, bilden fyller hela kolumnens höjd */
.eb-omoss-hero {
	gap: 0 !important;
}

/* vänsterkanten linjerar med övriga sektioners 1360 px-innehåll
   (20 px sidomarginal + det som blir över på breda skärmar) */
.eb-omoss-hero__panel {
	padding: clamp(40px, 6vw, 88px) clamp(20px, 5vw, 72px) clamp(40px, 6vw, 88px) calc(20px + max(0px, (100vw - 1400px) / 2));
}

.eb-omoss-hero__bild {
	position: relative;
	min-height: 420px;
	border-left: 1px solid var(--wp--preset--color--contrast-2);
}

.eb-omoss-hero__bild .wp-block-image {
	position: absolute;
	inset: 0;
	margin: 0;
}

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

/* Avdelningarna som pillar */
.eb-omoss-avd {
	margin-top: 16px !important;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 0;
	padding: 0;
	list-style: none;
}

.eb-omoss-avd li {
	margin: 0;
}

.eb-omoss-avd a {
	display: inline-block;
	padding: 10px 18px;
	border: 1px solid var(--wp--preset--color--contrast-2);
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.04em;
	text-decoration: none;
	transition: background-color 0.15s, color 0.15s;
}

.eb-omoss-avd a:hover,
.eb-omoss-avd a:focus-visible {
	background: var(--wp--preset--color--contrast-2);
	color: var(--wp--preset--color--surface);
}

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

@media (max-width: 781px) {
	.eb-omoss-hero__bild {
		min-height: 0;
		border-left: 0;
		border-top: 1px solid var(--wp--preset--color--contrast-2);
		aspect-ratio: 16 / 10;
	}
}

/* Outline-knappar får cores egen padding (calc(.667em + 2px) ≈ 8,7 px) i
   stället för temats 14/24 px ur theme.json — plus 1 px ram blev de 39,5 px
   höga mot de fyllda knapparnas 48. Samma mått minus ramen. */
.wp-block-buttons > .wp-block-button.is-style-outline > .wp-block-button__link {
	padding: 13px 23px;
}

/* Knappar i samma rad blir lika höga som den högsta, även när bara en av dem
   har ram (startsidans hero: fylld knapp med 1 px ram bredvid outline). */
.wp-block-buttons:not(.is-vertical) {
	align-items: stretch;
}

.wp-block-buttons:not(.is-vertical) > .wp-block-button {
	display: flex;
}

.wp-block-buttons:not(.is-vertical) > .wp-block-button > .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Korta sidor (Villkor m.fl.): sidfoten ska ligga längst ner i fönstret, inte
   sluta mitt på skärmen med en krämfärgad yta under. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
}

.wp-site-blocks > main {
	flex: 1 0 auto;
}

/* Textsidor (Integritetspolicy m.fl.): luft före varje avsnittsrubrik */
.eb-textsida h2:not(:first-child) {
	margin-top: 40px;
}