/*
 * Kebco mobile improvements
 *
 * Phone layout fixes for the kebcoV3 theme (kebco.no and b2c.kebco.no).
 * Every layout rule sits inside a max-width media query, so desktop is unchanged.
 * Breakpoints follow WordPress core:
 *   599px  the navigation block switches to the hamburger overlay below 600px
 *   600px  core collapses post-template grids to one column at 600px and below
 *   781px  core stacks Columns blocks below 782px
 *
 * !important is only used where the theme or WordPress uses !important, inline
 * styles or very specific selectors for the same property.
 */

/*
 * The submenu toggle (mobile-menu.js) is only shown in the open overlay, and the
 * "Les mer" button (read-more.js) only on phones.
 */
.kmi-sub-toggle,
.kmi-more-toggle {
	display: none;
}

/* ------------------------------------------------------------------------- */
/* 1. Global spacing                                                          */
/* ------------------------------------------------------------------------- */

@media (max-width: 781px) {
	/* The theme sets the root padding to 0, so content touched the screen edges. */
	:root body {
		--wp--style--root--padding-left: 16px;
		--wp--style--root--padding-right: 16px;
	}

	/* Safety net: nothing should make the page scroll sideways. */
	body {
		overflow-x: clip;
	}

	/* Long words and URLs wrap instead of running off the screen (the returns page). */
	.wp-site-blocks {
		overflow-wrap: break-word;
	}

	/* Form fields below 16px make iPhones zoom in when they are tapped. The theme uses 13px. */
	.wp-site-blocks input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
	.wp-site-blocks select,
	.wp-site-blocks textarea,
	.woocommerce-page form .form-row input.input-text,
	.woocommerce-page form .form-row select,
	.woocommerce-page form .form-row textarea.input-text {
		font-size: 16px;
	}

	/* <main> has an inline 36px top margin: keep a small gap, none above a full-width cover. */
	.wp-site-blocks > main {
		margin-top: 16px !important;
	}

	.wp-site-blocks > main:has(> .wp-block-post-content > .wp-block-cover.alignfull:first-child) {
		margin-top: 0 !important;
	}

	/*
	 * Spacer blocks have fixed desktop heights; cap them on phones. Category pages have
	 * no <main>, so match any content outside the header and footer.
	 */
	.wp-site-blocks > .wp-block-spacer,
	.wp-site-blocks > :not(header, footer) .wp-block-spacer {
		max-height: 24px;
	}

	/* Headings placed straight in a template (cart and checkout) had no side padding. */
	.wp-site-blocks > .wp-block-heading {
		padding-right: var(--wp--style--root--padding-right);
		padding-left: var(--wp--style--root--padding-left);
		line-height: 1.35 !important; /* inline line-height: 2.6 */
	}
}

/* ------------------------------------------------------------------------- */
/* 2. Header: one compact grid instead of two tall rows                       */
/*    Row 1: menu, logo, account, cart. Row 2: search. Row 3: phone, switch.  */
/* ------------------------------------------------------------------------- */

@supports selector(:has(*)) {
	@media (max-width: 599px) {
		header.wp-block-template-part > .wp-block-group {
			display: grid;
			grid-template-columns: 44px minmax(0, 1fr) 44px 44px;
			grid-template-areas:
				"menu logo account cart"
				"search search search search";
			align-items: center;
			column-gap: 4px;
			row-gap: 10px;
			padding: 8px 12px 10px !important; /* the group has inline padding: 0 */
		}

		/* Flatten the wrapper groups and columns so their contents join the grid. */
		header.wp-block-template-part > .wp-block-group > .wp-block-group,
		header.wp-block-template-part > .wp-block-group > .wp-block-group > .wp-block-columns,
		header.wp-block-template-part > .wp-block-group > .wp-block-group > .wp-block-columns > .wp-block-column,
		header.wp-block-template-part .wp-block-column > .wp-block-group:has(> .wc-block-mini-cart) {
			display: contents;
		}

		header.wp-block-template-part > .wp-block-group > .wp-block-spacer,
		header.wp-block-template-part > .wp-block-group > .wp-block-separator {
			display: none;
		}

		header.wp-block-template-part .wp-block-column > figure.wp-block-image,
		header.wp-block-template-part .wp-block-column > .wp-block-navigation,
		header.wp-block-template-part .wp-block-column > .wp-block-group,
		header.wp-block-template-part a.wp-block-svg-icons-ff-svgicons[href*="min-konto"],
		header.wp-block-template-part .wc-block-mini-cart {
			margin: 0 !important;
		}

		/* Logo */
		header.wp-block-template-part .wp-block-column > figure.wp-block-image {
			grid-area: logo;
		}

		header.wp-block-template-part .wp-block-column > figure.wp-block-image img {
			display: block;
			width: 118px !important;
			max-width: 100%;
			height: auto;
		}

		/* Account and cart: 44px tap targets */
		header.wp-block-template-part a.wp-block-svg-icons-ff-svgicons[href*="min-konto"] {
			grid-area: account;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 44px;
			height: 44px;
		}

		header.wp-block-template-part .wc-block-mini-cart {
			grid-area: cart;
		}

		header.wp-block-template-part .wc-block-mini-cart__button {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 44px;
			height: 44px;
			padding: 8px;
		}

		/* Menu button */
		header.wp-block-template-part .wp-block-column > .wp-block-navigation.is-responsive {
			grid-area: menu;
		}

		header.wp-block-template-part .wp-block-navigation__responsive-container-open {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 44px;
			height: 44px;
			margin-left: -8px;
		}

		header.wp-block-template-part .wp-block-navigation__responsive-container-open svg {
			width: 28px;
			height: 28px;
		}

		/* Search: full width on its own row */
		header.wp-block-template-part .wp-block-column > .wp-block-navigation:has(.wp-block-search) {
			grid-area: search;
			display: block;
			width: 100%;
		}

		header.wp-block-template-part .kebco-search {
			width: 100%;
			max-width: none;
			margin: 0;
		}

		header.wp-block-template-part .kebco-search .wp-block-search__inside-wrapper {
			width: 100%;
		}

		header.wp-block-template-part .kebco-search input[type="search"] {
			width: 100%;
			height: 44px;
			padding: 0 52px 0 18px;
			font-size: 16px; /* 16px stops iOS from zooming in on focus */
		}

		header.wp-block-template-part .kebco-search button {
			top: 0;
			right: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 48px;
			height: 44px;
			margin: 0;
			padding: 0;
		}

		/*
		 * Row 3 is placed by grid lines rather than template areas, so the wide
		 * Bedrift / Privatkunde switch doesn't widen the account and cart columns.
		 */
		header.wp-block-template-part .wp-block-column > .wp-block-group:has(> a[href^="tel:"]) {
			grid-row: 3;
			grid-column: 1 / 3;
			justify-self: start;
			flex-wrap: nowrap;
			align-items: center;
			gap: 8px;
		}

		header.wp-block-template-part .wp-block-column > .wp-block-group:has(> a[href^="tel:"]) > a {
			display: flex;
			flex: 0 0 auto;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
			width: 34px;
			height: 34px;
			padding: 7px;
		}

		header.wp-block-template-part .wp-block-column > .wp-block-group:has(> a[href^="tel:"]) > a svg {
			width: 20px;
			height: 20px;
		}

		header.wp-block-template-part .headding-phone {
			margin: 0;
			font-size: 15px;
			white-space: nowrap;
		}

		header.wp-block-template-part .headding-phone a {
			display: inline-flex;
			align-items: center;
			min-height: 36px;
		}

		/* Bedrift / Privatkunde switch */
		header.wp-block-template-part .wp-block-column > .wp-block-group:has(> .wp-block-navigation) {
			grid-row: 3;
			grid-column: 2 / 5;
			justify-self: end;
		}

		header.wp-block-template-part .wp-block-column > .wp-block-group:has(> .wp-block-navigation) .wp-block-navigation__container {
			gap: 14px;
		}

		header.wp-block-template-part .wp-block-column > .wp-block-group:has(> .wp-block-navigation) .wp-block-navigation-item__content {
			display: inline-flex;
			align-items: center;
			min-height: 36px;
			font-size: 13px;
			white-space: nowrap;
		}
	}
}

/* ------------------------------------------------------------------------- */
/* 2b. Search field                                                           */
/*     The theme's grey field (#979797) with white bold text had low contrast */
/*     (2.8:1), showed typed text in capitals, the browser's default focus    */
/*     ring and a blue native clear button. kebco.no's "button inside"        */
/*     variant also showed a white wrapper as square corners.                 */
/* ------------------------------------------------------------------------- */

@media (max-width: 781px) {
	header.wp-block-template-part .kebco-search .wp-block-search__inside-wrapper {
		border: 0;
		background: transparent;
		box-shadow: none;
	}

	header.wp-block-template-part .kebco-search input[type="search"] {
		background-color: #fff;
		color: var(--wp--preset--color--primary, #171616);
		font-weight: 500;
		letter-spacing: normal;
		text-transform: none; /* the search sits in a navigation block, which is uppercase */
		-webkit-appearance: none;
		appearance: none;
	}

	header.wp-block-template-part .kebco-search input[type="search"]::placeholder {
		color: #6b6b6b;
		font-weight: 400;
		text-transform: none;
		opacity: 1;
	}

	header.wp-block-template-part .kebco-search input[type="search"]:focus,
	header.wp-block-template-part .kebco-search input[type="search"]:focus-visible {
		outline: 2px solid var(--wp--preset--color--cta, #de6014);
		outline-offset: 2px;
	}

	header.wp-block-template-part .kebco-search input[type="search"]::-webkit-search-cancel-button,
	header.wp-block-template-part .kebco-search input[type="search"]::-webkit-search-decoration {
		display: none;
		-webkit-appearance: none;
	}

	header.wp-block-template-part .kebco-search button svg path {
		fill: var(--wp--preset--color--primary, #171616);
	}

	header.wp-block-template-part .kebco-search button:focus-visible {
		border-radius: 25px;
		outline: 2px solid var(--wp--preset--color--cta, #de6014);
		outline-offset: -4px;
	}
}

/* ------------------------------------------------------------------------- */
/* 2c. Header tap areas                                                       */
/*     The email/phone circles (34px), the profile icon on tablets (25px) and */
/*     the Bedrift / Privatkunde links (27-36px) get a larger invisible tap    */
/*     area of at least 44px, without changing how they look.                */
/* ------------------------------------------------------------------------- */

@media (max-width: 781px) {
	header.wp-block-template-part a.wp-block-svg-icons-ff-svgicons,
	header.wp-block-template-part .wp-block-navigation:not(.is-responsive) .wp-block-navigation-item__content {
		position: relative;
	}

	header.wp-block-template-part a.wp-block-svg-icons-ff-svgicons::after {
		content: "";
		position: absolute;
		inset: -6px;
	}

	header.wp-block-template-part .wp-block-navigation:not(.is-responsive) .wp-block-navigation-item__content::after {
		content: "";
		position: absolute;
		inset: -8px -6px;
	}
}

/* Narrow phones: the phone number ran into "Bedrift". Drop the phone icon;
   the number next to it is already a tap-to-call link. */
@supports selector(:has(*)) {
	@media (max-width: 359px) {
		header.wp-block-template-part .wp-block-column > .wp-block-group:has(> a[href^="tel:"]) > a[href^="tel:"] {
			display: none;
		}
	}
}

/* ------------------------------------------------------------------------- */
/* 3. Mobile menu overlay                                                     */
/* ------------------------------------------------------------------------- */

@media (max-width: 599px) {
	.wp-block-navigation__responsive-container.is-menu-open {
		padding: 0 !important;
		background-color: var(--wp--preset--color--primary, #171616) !important;
		color: #fff !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
		padding: 0;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		top: 10px;
		right: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		color: #fff;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
		width: 28px;
		height: 28px;
		fill: currentColor;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		align-items: stretch !important;
		padding: 64px 0 32px !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		width: 100%;
		gap: 0 !important;
		align-items: stretch !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
		position: relative;
		flex-wrap: wrap;
		width: 100%;
		border-bottom: 1px solid rgba(255, 255, 255, 0.14);
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		display: flex;
		flex: 1 1 auto;
		align-items: center;
		min-height: 52px;
		padding: 0 64px 0 20px !important;
		color: #fff !important;
		font-size: 18px;
		font-weight: 500;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		width: 100%;
		gap: 0 !important;
		padding: 0 0 8px !important;
		background: transparent !important;
		color: #fff !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
		padding-bottom: 0 !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
		width: 100%;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		min-height: 44px;
		padding: 0 20px 0 36px !important;
		color: rgba(255, 255, 255, 0.88) !important;
		font-size: 15px;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding-left: 52px !important;
		font-size: 14px;
	}

	/* Highlight the current page; as specific as the white top-level link colour above. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
		color: var(--wp--preset--color--cta, #de6014) !important;
	}

	/* Collapsible submenus (button added by mobile-menu.js) */
	.wp-block-navigation__responsive-container.is-menu-open .kmi-sub-toggle {
		position: absolute;
		top: 0;
		right: 6px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 52px;
		height: 52px;
		padding: 0;
		border: 0;
		background: none;
		color: #fff;
		cursor: pointer;
	}

	.wp-block-navigation__responsive-container.is-menu-open .kmi-sub-toggle svg {
		transition: transform 0.2s ease;
	}

	.wp-block-navigation__responsive-container.is-menu-open .kmi-open > .kmi-sub-toggle svg {
		transform: rotate(180deg);
	}

	.wp-block-navigation__responsive-container.is-menu-open .kmi-collapsible:not(.kmi-open) > .wp-block-navigation__submenu-container {
		display: none !important;
	}
}

/* ------------------------------------------------------------------------- */
/* 4. Homepage                                                                */
/* ------------------------------------------------------------------------- */

@media (max-width: 781px) {
	/* Hero heading: scale with the screen instead of a fixed 36px that overflowed. */
	.wp-block-cover .wp-block-heading.has-large-font-size,
	.wp-block-cover h1,
	.wp-block-cover h2 {
		font-size: clamp(1.5rem, 7vw, 2.25rem) !important;
		line-height: 1.15;
		overflow-wrap: break-word;
		hyphens: auto;
	}
}

@media (max-width: 600px) {
	/* Category tiles: two per row instead of one tall tile per row. */
	.wp-block-ff-kategoriliste {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px 12px !important;
		padding-top: 24px !important;
		padding-bottom: 32px !important; /* the last label sat right on the next section */
	}

	.wp-block-ff-kategoriliste > a {
		display: flex;
		flex-direction: column;
		width: auto !important;
		min-width: 0;
	}

	.wp-block-ff-kategoriliste > a img {
		display: block;
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 4 / 5;
		object-fit: cover;
	}

	/* Labels fill the tile, so two labels in a row are the same height. */
	.wp-block-ff-kategoriliste > a h2 {
		display: flex;
		flex: 1 0 auto;
		align-items: center;
		justify-content: center;
		margin-top: 8px;
		margin-bottom: 0;
		font-size: 15px !important;
		line-height: 1.25;
		overflow-wrap: break-word;
		hyphens: auto;
	}
}

/* ------------------------------------------------------------------------- */
/* 4b. Image and text boxes (homepage, category pages, Om oss)                */
/*     The theme's image was 90% wide, which left a gap on the right, and     */
/*     category descriptions sat in a 381px box with its own scrollbar.       */
/* ------------------------------------------------------------------------- */

@media (max-width: 781px) {
	.image-box-right {
		--image-width: 100%;
		--image-height: auto;
		--border-radius: 32px;
		--content-padding: 20px;
	}

	.image-box-right article {
		flex-direction: column;
		gap: 24px;
	}

	.image-box-right article img {
		max-height: 480px;
	}

	/* Long text: a preview with a "Les mer" button (read-more.js) instead of a scroll box. */
	.image-box-right article section.kmi-more {
		position: relative;
		max-height: 360px;
		overflow: hidden;
	}

	.image-box-right article section.kmi-more::after {
		content: "";
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		height: 120px;
		background: linear-gradient(rgba(255, 255, 255, 0), #fff 90%);
		pointer-events: none;
	}

	.image-box-right article section.kmi-more.kmi-more-open {
		max-height: none;
		padding-bottom: 20px;
	}

	.image-box-right article section.kmi-more.kmi-more-open::after {
		display: none;
	}

	.image-box-right .kmi-more-toggle {
		display: inline-flex;
		align-items: center;
		align-self: center;
		min-height: 44px;
		padding: 10px 28px;
		border: 0;
		border-radius: 999px;
		background: var(--wp--preset--color--primary, #171616);
		color: #fff;
		font-family: inherit;
		font-size: 15px;
		font-weight: 600;
		line-height: 1.2;
		cursor: pointer;
	}

	.image-box-right .kmi-more-toggle:focus-visible {
		outline: 2px solid var(--wp--preset--color--cta, #de6014);
		outline-offset: 2px;
	}
}

/* ------------------------------------------------------------------------- */
/* 5. Product grids: category pages and related products                      */
/* ------------------------------------------------------------------------- */

@media (max-width: 600px) {
	ul.products-block-post-template.wp-block-post-template-is-layout-grid,
	.wp-block-post-template.products-block-post-template.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 20px 12px !important;
	}
}

/* Tablets keep the template's columns, but 4 or 5 are too narrow below 782px. */
@media (min-width: 601px) and (max-width: 781px) {
	ul.products-block-post-template.columns-4.wp-block-post-template-is-layout-grid,
	ul.products-block-post-template.columns-5.wp-block-post-template-is-layout-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

/* The card layout applies to tablets too: at 700px the theme's button overflowed the page. */
@media (max-width: 781px) {
	.products-block-post-template > li {
		display: flex;
		flex-direction: column;
		min-width: 0;
	}

	/* kebco.no's template adds an inline 36px top margin and a 206px image height. */
	.products-block-post-template > li .wc-block-components-product-image {
		margin-top: 0 !important;
	}

	.products-block-post-template > li .wc-block-components-product-image img {
		width: 100%;
		height: auto !important;
		aspect-ratio: 1 / 1;
		object-fit: contain;
	}

	/*
	 * Card text box: the theme's grid has fixed 20px/55px rows with price and button
	 * side by side, so longer titles overlapped the price. Stack them instead, with the
	 * button pinned to the bottom so buttons line up across a row.
	 */
	.products-block-post-template li .group-price {
		flex: 1 1 auto;
		grid-template:
			"tittel" auto
			"pris" auto
			"ikon" 1fr / minmax(0, 1fr) !important;
		align-content: start;
		gap: 8px !important;
		width: 100% !important;
		margin: 8px 0 0 !important;
		padding: 12px !important;
		border-radius: 16px !important;
	}

	/* The group's left justification sets auto margins that defeat centring. */
	.products-block-post-template li .group-price > .wp-block-post-title,
	.products-block-post-template li .group-price > .wp-block-woocommerce-product-price {
		margin-left: auto !important;
		margin-right: auto !important;
	}

	.products-block-post-template li .wp-block-post-title {
		font-size: 14px !important;
		line-height: 1.3;
		text-align: center;
		overflow-wrap: break-word;
		hyphens: auto; /* "KAMPANJE-TILBUD!" instead of "KAMPANJETILBU-D!" on narrow phones */
	}

	.products-block-post-template li .wc-block-components-product-price {
		font-size: 16px !important;
	}

	.products-block-post-template li .group-price .wp-block-button {
		grid-area: ikon;
		align-self: end;
		align-items: stretch !important;
		justify-self: stretch;
		width: 100%;
		margin: 0;
	}

	.products-block-post-template li .wc-block-components-product-button__button {
		align-self: stretch !important;
		width: 100% !important;
		min-height: 44px;
		padding: 10px 8px !important;
		font-size: 13px !important;
		font-weight: 600;
		line-height: 1.2;
	}
}

/* ------------------------------------------------------------------------- */
/* 5b. Other listings: pagination, sorting and WooCommerce product blocks     */
/* ------------------------------------------------------------------------- */

@media (max-width: 781px) {
	/* Pagination links and the sort menu were 19px tall. */
	.wp-block-query-pagination a,
	.wp-block-query-pagination .page-numbers,
	.woocommerce-pagination .page-numbers {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
	}

	/* The block version sets font-size: inherit (13px) with a more specific selector. */
	.woocommerce-ordering select.orderby,
	.woocommerce.wc-block-catalog-sorting select.orderby {
		min-height: 44px;
		padding: 0 8px;
		font-size: 16px;
	}
}

@media (max-width: 600px) {
	/* The empty cart's "Ny i butikken" grid showed one full-width product per row. */
	.wp-block-woocommerce-empty-cart-block {
		padding-right: 16px;
		padding-left: 16px;
	}

	.wc-block-grid .wc-block-grid__products {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px 12px;
		margin: 0;
	}

	.wc-block-grid .wc-block-grid__products .wc-block-grid__product {
		width: auto;
		max-width: none;
		margin: 0;
		padding: 0;
		border: 0;
		flex: none;
	}

	.wc-block-grid .wc-block-grid__product-title {
		font-size: 14px;
		line-height: 1.3;
		overflow-wrap: break-word;
		hyphens: auto;
	}

	.wc-block-grid .wp-block-button__link {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
	}
}

/* ------------------------------------------------------------------------- */
/* 6. Product page                                                            */
/* ------------------------------------------------------------------------- */

@media (max-width: 781px) {
	/* The theme fixes the gallery at 540px, which made the page scroll sideways. */
	.woocommerce-product-gallery .flex-viewport,
	.woocommerce-product-gallery .kebco-produktbilde-wrapper,
	.woocommerce-product-gallery .woocommerce-product-gallery__image {
		width: 100%;
	}

	.woocommerce-product-gallery .woocommerce-product-gallery__image img:not(.zoomImg) {
		width: 100% !important;
		max-width: 100% !important;
		height: auto;
		max-height: none !important;
	}

	/* Thumbnails: an even row instead of clipped, wrapping thumbs. */
	.woocommerce-product-gallery .flex-control-thumbs {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 8px;
		margin: 8px 0 0;
		padding: 0;
	}

	.woocommerce-product-gallery .flex-control-thumbs li {
		float: none !important;
		width: auto !important;
		margin: 0 !important;
		padding: 4px !important;
	}

	.woocommerce-product-gallery .flex-control-thumbs li img {
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
		object-fit: contain;
	}

	/*
	 * Add to cart: full width. The form is a three-column grid with the button in
	 * column 2 (column 1 is for the quantity field), so span to the last column.
	 */
	form.cart .single_add_to_cart_button {
		grid-column: 2 / -1 !important;
		width: 100%;
		min-height: 52px;
	}

	/* Related products sit in a full-width band without side padding. */
	.wp-block-woocommerce-related-products {
		padding-right: 16px;
		padding-left: 16px;
	}
}

/* ------------------------------------------------------------------------- */
/* 7. Cart and checkout                                                       */
/* ------------------------------------------------------------------------- */

@media (max-width: 781px) {
	/* The place-order button was 40px tall. */
	.wc-block-components-checkout-place-order-button {
		min-height: 48px;
	}

	/* Quantity buttons were 30x26px (cart and mini cart). */
	.wc-block-components-quantity-selector {
		height: 42px;
		min-width: 120px;
	}

	.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
		min-width: 40px;
	}

	.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
		height: auto;
		font-size: 16px;
	}

	/*
	 * Cart and mini cart rows: WooCommerce's fixed 80px + 132px grid plus the line total
	 * did not fit a 320px phone, so the total was cut off. Image, details and total now
	 * share the width. ":root body" outranks the mini cart's styles, which load later.
	 */
	:root body table.wc-block-cart-items .wc-block-cart-items__row {
		grid-template-columns: 64px minmax(0, 1fr) auto;
	}

	:root body table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
		padding-right: 0;
	}

	:root body table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product {
		grid-column: 2 / 3;
	}

	:root body table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
		grid-column: 3 / 4;
	}

	/* On the narrowest phones the remove icon moves under the quantity buttons. */
	.wc-block-cart-item__quantity {
		flex-wrap: wrap;
		row-gap: 8px;
	}

	/* The remove icon is 24px: give it a 44px tap area. */
	.wc-block-cart-item__remove-link {
		position: relative;
	}

	.wc-block-cart-item__remove-link::after {
		content: "";
		position: absolute;
		inset: -10px;
	}

	/* Product notes and the VAT line were 11px. */
	.wc-block-components-product-metadata,
	:root .wc-block-components-product-metadata .wc-block-components-product-metadata__description > *,
	.wc-block-components-totals-footer-item-tax {
		font-size: 13px;
	}
}

/* ------------------------------------------------------------------------- */
/* 8. Footer                                                                  */
/*    Stacked columns were aligned left, centre and right. Line them up on    */
/*    the left, with space between the blocks.                                */
/* ------------------------------------------------------------------------- */

@media (max-width: 781px) {
	footer.wp-block-template-part .wp-block-columns {
		row-gap: 32px;
	}

	footer.wp-block-template-part .wp-block-navigation .wp-block-navigation__container {
		row-gap: 4px;
	}

	footer.wp-block-template-part .wp-block-navigation-item__content {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	/* The address group is centred by the column's layout, with !important. */
	footer.wp-block-template-part .wp-block-column > .wp-block-group.is-content-justification-center {
		justify-content: flex-start;
		margin-right: 0 !important;
		margin-left: 0 !important;
	}

	footer.wp-block-template-part .wp-block-group.is-vertical.is-content-justification-right {
		align-items: flex-start;
		gap: 24px;
	}

	/* The social icons sit in 44px tap areas; pull them left so the icons line up with the text. */
	footer.wp-block-template-part .wp-block-group.is-vertical.is-content-justification-right > .wp-block-group:has(> a.wp-block-svg-icons-ff-svgicons) {
		margin-left: -12px;
	}

	footer.wp-block-template-part a.wp-block-svg-icons-ff-svgicons {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
	}
}

/* ------------------------------------------------------------------------- */
/* 9. Content pages                                                           */
/* ------------------------------------------------------------------------- */

@media (max-width: 781px) {
	/* Forhandlere: the partner logos stacked at very different sizes and gaps. */
	.wp-block-post-content .wp-block-image img[alt^="Logo til" i] {
		display: block;
		width: auto !important;
		max-width: min(100%, 240px) !important;
		height: auto !important;
		max-height: 72px;
		margin: 0 auto;
		object-fit: contain;
	}
}

@supports selector(:has(*)) {
	@media (max-width: 781px) {
		.wp-block-post-content .wp-block-column:has(> .wp-block-image img[alt^="Logo til" i]) {
			padding: 16px 0 !important;
		}
	}
}