/* ===================================================================
 * Header
 *
 * One row: brand, navigation, utilities. An earlier attempt labelled the
 * search and account controls, which overflowed the row and forced a
 * two-tier bar that read as accidental. Icons keep it on one line.
 *
 * The utilities are three groups, not five loose items: the phone number
 * (information), the language switch (a control), and the action icons
 * ending on the cart. Hairline rules separate the groups so the cluster
 * stops reading as a crowd.
 * ================================================================= */

.sm-head__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 38px;
	block-size: 38px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--wp--preset--color--navy);
	text-decoration: none;
	cursor: pointer;
	flex: 0 0 auto;
}
.sm-head__ico:hover,
.sm-head__ico:focus-visible { background: var(--wp--preset--color--mist); }

/* Between groups; the icons inside a group sit closer together. */
.sm-head__aside { gap: .85rem; }
.sm-head__actions { display: inline-flex; align-items: center; gap: .15rem; }

.sm-head__rule {
	inline-size: 1px;
	block-size: 26px;
	background: var(--wp--preset--color--cloud);
	flex: 0 0 auto;
}

/* The cart is the last thing in the row and earns a little air of its own. */
.sm-head .wc-block-mini-cart { margin-inline-start: -.2rem; }

/* Keep the three groups from splitting until the burger takes over, or the
   logo ends up stranded on its own line. */
.sm-head__brand,
.sm-head__aside { flex: 0 0 auto; }
.sm-head__nav { flex: 1 1 auto; justify-content: center; }

@media (max-width: 1240px) {
	/* The label above the number is the first thing to go: the number is
	   the useful half and it still reads on its own. */
	.sm-head__tel-k { display: none; }
	.sm-head__aside { gap: .7rem; }
}

@media (max-width: 1080px) {
	.sm-head__nav { flex: 1 1 100%; justify-content: flex-start; }
}

@media (max-width: 820px) {
	.sm-head__tel,
	.sm-head__rule:first-of-type { display: none; }
}

@media (max-width: 560px) {
	.sm-head__rule { display: none; }
	.sm-head__aside { gap: .4rem; }
}