/* Layout fixes (loaded after the theme CSS; selectors are deliberately
   specific because Mystile prints custom.css later in the head). */

/* ---------------------------------------------------------------------
   Product grids (shop, categories, related products).
   The theme sizes tiles for 5 per row (17.4%) but WooCommerce clears
   rows every 4, so floated tiles of different heights snagged. A grid
   keeps 5 per row with equal-height tiles in each row.
   --------------------------------------------------------------------- */
@media only screen and (min-width: 768px) {
	body #wrapper ul.products {
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		column-gap: 3.2%;
		align-items: stretch;
	}
	body #wrapper ul.products::before,
	body #wrapper ul.products::after {
		display: none; /* clearfix pseudo-elements would become grid cells */
	}
	body #wrapper ul.products li.product,
	body #wrapper ul.products li.product.first,
	body #wrapper ul.products li.product.last,
	body #wrapper ul.products li.product:nth-child(5n+1) {
		float: none;
		clear: none;
		width: auto;
		margin: 20px 0;
	}
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
	body #wrapper ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
/* Related products sit in the narrower right-hand column: 3 per row keeps
   tiles about the same size as the shop grid. */
@media only screen and (min-width: 768px) {
	body #wrapper .related.products ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ---------------------------------------------------------------------
   Header: search, basket and flag grouped on the right, away from the
   menu dropdowns. The search field only opens from the magnifier (or
   while typing), not from hovering the whole invisible form box.
   --------------------------------------------------------------------- */
body #wrapper #header #inner-header .zh-tools {
	float: right;
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
	width: 300px; /* room for the search field to open without reflowing */
}
body #wrapper #header #inner-header .zh-tools #searchform {
	float: none;
	width: auto;
	margin-left: 0;
}
body #wrapper #header #inner-header .zh-tools #header-cart {
	float: none;
}
body #wrapper #header #inner-header .zh-tools .union-jack {
	float: none;
	margin: 13px 0 0 12px;
}
body #wrapper #header #inner-header #searchform:hover .input-text {
	width: 0;
	padding-left: 0;
	visibility: hidden;
}
body #wrapper #header #inner-header #searchform .button:hover + .input-text,
body #wrapper #header #inner-header #searchform .input-text:hover,
body #wrapper #header #inner-header #searchform .input-text:focus {
	width: 170px;
	padding-left: 0.5em;
	visibility: visible;
}
@media (max-width: 1060px) {
	body #wrapper #header #inner-header .zh-tools {
		width: auto;
	}
}
@media (max-width: 850px) {
	body #wrapper #header #inner-header .zh-tools {
		display: block;
	}
	body #wrapper #header #inner-header .zh-tools #header-cart,
	body #wrapper #header #inner-header .zh-tools .union-jack {
		float: right;
	}
	body #wrapper #header #inner-header .zh-tools .union-jack {
		margin: 30px 0 0;
	}
}

/* Menu dropdowns open 36px below their parent item. An invisible bridge
   over that gap keeps the hover when moving the mouse down into them. */
@media only screen and (min-width: 768px) {
	body #wrapper #header #inner-header #navigation ul.nav > li.menu-item-has-children::after {
		content: "";
		position: absolute;
		top: 100%;
		left: -25%;
		width: 150%;
		height: 40px;
	}
}