@import url('https://fonts.googleapis.com/css2?family=Assistant&display=swap');

#tc-root {
	font-family: "Assistant", Arial, sans-serif;
}

/* Base branding (always on, every canopy view incl. classic V0) — this file only
 * loads on canopy deployments, so it needs no view gate. NOT prefixed with
 * .tc-root-branding-canopy, which is now the facelift gate class (V1/SH only). */
.tc-layout {
	padding-bottom: 90px;
}

.tc-layout.tc-layout-form {
	padding-bottom: 140px;
}


.tc-branding-logo {
	background: white;
}


.tc-branding {
	direction: ltr;
	position: absolute;
	bottom: 10px;
	left: 0;
	width: 100%;
}

.tc-branding > div {
	display: flex;
	align-items: center;
	justify-content: center;
}

.tc-branding-canopy {
	font-size: 20px;
	font-weight: bold;
}

.tc-branding .tc-image {
	margin-right: 10px;
}

.tc-branding a {
	color: inherit;
	margin-left: 5px;
}

.tc-branding .tc-image.tc-branding-logo-white {
	display: none;
}


.tc-active-area-landing #tc-background-area {
	background-size: cover;
}

.tc-active-area-landing .tc-branding {
	color: white;
}

.tc-active-area-landing .tc-branding .tc-image.tc-branding-logo-pink {
	display: none;
}

.tc-active-area-landing .tc-branding .tc-image.tc-branding-logo-white {
	display: block;
}


.tc-root-iframe .tc-layout.tc-layout-form {
	position: relative;
}

.tc-root-iframe .tc-active-area-landing .tc-branding {
	color: inherit;
}

.tc-root-iframe .tc-active-area-landing .tc-branding .tc-image.tc-branding-logo-pink {
	display: block;
}

.tc-root-iframe .tc-active-area-landing .tc-branding .tc-image.tc-branding-logo-white {
	display: none;
}


.tc-widget[data-item-type="user_login"][data-widget="credentials"],
.tc-widget[data-item-type="quick_login"][data-widget="quick_login"] {
	border-top: none;
}

.tc-widget[data-item-type="user_login"][data-widget="credentials"] .tc-widget-title,
.tc-widget[data-item-type="quick_login"][data-widget="quick_login"] .tc-widget-title {
	display: none;
}


/* Mobile table row — vertical separator between the title-row fields, which
 * otherwise run together with no visual break (see mobile_columns). Each field
 * renders as a .tc-table-mobile-title-column span (the cell view replaces its
 * placeholder element with the template root, so there is no extra wrapper). The
 * separator is drawn before every non-empty field that has a preceding non-empty
 * field — the ~ combinator keeps it correct even when an empty field
 * (.tc-table-mobile-column-null) sits between two populated ones, and the
 * :not() guards keep any separator from dangling next to a blank value. */
.tc-table-mobile-column-row-title .tc-table-mobile-cell > .tc-table-mobile-title-column:not(.tc-table-mobile-column-null) ~ .tc-table-mobile-title-column:not(.tc-table-mobile-column-null)::before {
	content: '';
	display: inline-block;
	width: 1px;
	height: 0.9em;
	margin: 0 8px;
	background: #ccc;
	vertical-align: middle;
}


/* POS Shop — price + stock line under each product thumbnail */

.tc-input.tc-input-thumbnail .tc-input-thumbnail-caption:not(:last-child) {
	padding-bottom: 2px;
}

.tc-input.tc-input-thumbnail .tc-input-thumbnail-description {
	display: block;
	padding: 0 12px 7px;
	font-size: 0.85em;
	line-height: 1;
	color: #888;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}