/**
 * Tyre-Shop announcement / trust bar — mobile refinement.
 *
 * Desktop (>768px) is unchanged (single row, space-between). On mobile the theme
 * previously HID the third item ("Flexible payment options"); instead show all
 * three trust items plus the contact as one centered, wrapping group so nothing
 * is clipped, nothing overflows, and the bar stays compact.
 *
 * @package Tyreshop
 */

@media (max-width: 768px){
	/* Re-show the third trust item (app.css hides nth-child(n+3) here). */
	.topbar__list li:nth-child(n+3){ display: inline-flex !important; }

	/* Let the three <li>s and the contact link wrap together as one centered
	 * group, rather than the list wrapping separately from the phone. */
	.topbar__inner{
		flex-wrap: wrap !important;
		justify-content: center !important;
		align-items: center !important;
		gap: 3px 14px !important;
		min-height: 0 !important;
		padding: 5px 12px !important;
	}
	.topbar__list{ display: contents !important; }

	.topbar__list li,
	.topbar__contact a{
		font-size: .72rem !important;
		white-space: nowrap !important;   /* never break an item mid-phrase */
		line-height: 1.35 !important;
	}
	.topbar__list li{ gap: .35rem !important; }
}

/* Small phones: tighten spacing/size a touch so two lines fit comfortably. */
@media (max-width: 400px){
	.topbar__inner{ gap: 2px 10px !important; }
	.topbar__list li,
	.topbar__contact a{ font-size: .69rem !important; }
}