/* Shopzone brand overrides.
 *
 * Frappe pins the navbar logo to a fixed 24px *width* (desk/global.scss), which
 * suits a square glyph but squashes a wordmark into an illegible block. Constrain
 * the height instead and let the width follow the artwork's aspect ratio.
 */

.app-logo {
	width: auto;
	height: 26px;
	max-width: 160px;
	object-fit: contain;
}

/* The WEBSITE navbar (login + portal pages) uses `.navbar-brand img`, not
 * `.app-logo`, so it never got the fix above — Bootstrap/Frappe leave the img
 * unsized and the wordmark renders as a tiny squashed block in the top corner.
 * Give it the same height-constrained, aspect-preserving treatment. */
.navbar .navbar-brand img,
.navbar-brand > img {
	width: auto !important;
	height: 30px;
	max-width: 170px;
	object-fit: contain;
}

/* The login and splash screens size their logo separately. */
.for-login .app-logo,
.splash img {
	width: auto;
	height: auto;
	max-height: 72px;
	max-width: 220px;
	object-fit: contain;
}

/* RTL: the navbar brand sits on the right, so shed the left-hand gutter. */
[dir="rtl"] .navbar .navbar-brand {
	margin-right: 0;
	margin-left: var(--margin-sm, 8px);
}