/*
 * 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 is added by mobile-menu.js and only shown in the open overlay. */
.kmi-sub-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;
	}

	/* <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. */
	main .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;
	}

	.wp-block-ff-kategoriliste > a {
		display: block;
		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;
	}

	.wp-block-ff-kategoriliste > a h2 {
		margin-top: 8px;
		font-size: 15px !important;
		line-height: 1.25;
		overflow-wrap: break-word;
		hyphens: auto;
	}
}

/* ------------------------------------------------------------------------- */
/* 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;
		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;
	}

	.woocommerce-ordering 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. Checkout                                                                */
/* ------------------------------------------------------------------------- */

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

/* ------------------------------------------------------------------------- */
/* 8. Footer tap targets                                                      */
/* ------------------------------------------------------------------------- */

@media (max-width: 781px) {
	footer.wp-block-template-part .wp-block-navigation-item__content {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	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;
	}
}