@charset "utf-8";
label {
	font-weight: 600;
	color: var(--black-l-10);
	font-size: 0.9em;
}
label small {
	font-weight: 400;
	opacity: 0.7;
}
.nav-tabs > li > a {
	border-color: var(--gray-d-20);
}
/* studio button */
.qq-upload-button {
	width:100%;
	padding:0px;
	text-align: left;
	background:transparent;
	border-bottom: none;
}
.qq-upload-button-hover {background: transparent;}
.qq-upload-button-focus {outline: none;}
/* logo threads */
#logo_thread {
	padding:5px
}
#logo_thread .logo_thread_subtitle {
	font-size:14px;
	font-weight:bold
}
#logo_thread #fabric_color {
	height:auto;
	max-height: 300px;
	overflow-y:auto;
	overflow-x:hidden;
	border:1px solid #DFDFDF;
}
#logo_thread #fabric_color .fabric_color {
	display:block;
	border-left: 10px solid transparent;
	margin: 1px 0;
	cursor:pointer;
	padding: 3px 5px;
	font-size: 0.8em;
}
#logo_thread #fabric_color .fabric_color_selected {
	font-weight:bold;
	padding:3px;
	cursor:auto;
	border-right:30px solid #090;
	border-top: 2px solid  #090;
	border-bottom: 2px solid  #090;
	position: relative;
}
#logo_thread #fabric_color .fabric_color_selected:after {
	position: absolute;
	top: -2px;
	right: -30px;
	font-family: FontAwesome;
	color: #fff;
	content: '\f00c';
	background: #39f;
	padding: 5px 10px;
}
#logo_thread #fabric_color .fabric_color:hover {
	/*background-color:#FFF !important;*/
	color:#000 !important;
	text-decoration: none;
}
#logo_thread #fabric_color .fabric_color_selected:hover {
	text-decoration: none;
	border-top-color: #090;
	border-bottom-color: #090;
}
#logo_thread #logo_info_box {
	margin-top:15px
}
#logo_thread #logo_info {
	background-color:#F5f5f5;
	padding:10px;
	font-size: 0.8em;
}
#logo_thread #logo_info_box .logo_info_row {
	display:block;
	border:1px solid transparent
}
#logo_thread #logo_info_box .logo_info_label {
	font-weight:bold;
	border:1px solid transparent
}
.logo_info_value {
	border-bottom: 1px solid #ddd;
}
#logo_thread #logo_info_box .lbl_stop_selected {
	border:1px solid #000
}
#logo_thread #elements_box {
	overflow:auto;
}
#logo_thread #elements {
	border:2px solid #DEDEDE;
	padding:5px;
	margin-bottom:15px;
}
#logo_thread #elements .color_stop {
	border:3px solid var(--gray-d-20);
	padding:2px;
	margin:5px;
	display:inline;
	width:120px;
	cursor:pointer;
	-moz-border-radius:0;
	-webkit-border-radius:0;
	border-radius:0
}
.color_stop_select {
	border: 3px dotted #090 !important;
}

#logo_thread #elements .color_stop_changed {
	background-color:#F5F6CE;
	border:1px solid #F77F00;
	padding:2px;
	line-height: 1em;
	font-weight: 600;
	font-size: .8em;
}
/*
#logo_thread #elements 090;
}
*/
#logo_thread #elements .color_stop_multi_select {
	border:4px dotted #FF0000;
	-moz-border-radius:20px;
	-webkit-border-radius:20px;
	border-radius:20px
}
#logo_thread #elements .color_stop:hover {
	border-color:#060;
}

.green-border {
	border:3px solid #060 !important;
}

.info_stop {
	cursor: pointer;
}

#logo_thread #preview {
	border:30px solid #DEDEDE;
	padding:20px;
	overflow:auto;
	display:table;
}

#logo_thread #qsc2_preview {
	padding-top:20px;
}
#logo_thread #sub_preview {
	display:table-cell;
	vertical-align:middle;
	float:left
}
#logo_thread #preview .multiselect {
	border:1px solid #FF0000;
	text-align:center;
	background-color:#FFFFFF;
	display:none;
}
#logo_thread #preview .multiselect:hover {
	background-color:#DFDFDF;
	border-color:#DBE0E7
}
#logo_thread #tools_box {/* clear:right; *//* margin-top:15px */
}
#logo_thread #tools_box #tools {
	padding:2px
}
#logo_thread #tools_box #tools label {
	font-weight:bold
}
#logo_thread #tools_box #tools select {

}
#logo_thread #tools_box #tools #save_threads {
	margin:20px 0;
	text-align:center;
	/*display:none*/
}
#logo_thread #tools_box #tools #save_threads_all {
	margin-top:10px;
	padding-top:10px
}
#logo_thread #tools_box #tools #save_threads_all label {
	font-weight:normal;
	font-size:12px;
	line-height: 20px;
}
.color_error {
	color: red;
	padding: 8px 9px;
	font-size: 15px;
	border: 1px solid red;
	margin: 0 0 12px 0;
	border-radius: 2px;
	display:none;
}
#threads_box {
	margin-bottom: 20px;
}
#threads {
	border:2px solid #DEDEDE;
	padding:2px
}
#threads .thread_color {
	width:28px;
	height:28px;
	margin:5px;
	border:1px solid var(--gray-d-20);
	float:left;
	border-radius: 50%;
	cursor:pointer
}
#threads .thread_name {
	background-color:#EFEFEF;
	border:1px solid #DEDEDE;
	height:42px;
	clear:both;
	overflow:hidden
}
#threads .sub_title {
	display:block;
	background-color:#EFEFEF;
	border:1px solid #DEDEDE;
	padding:8px;
	clear:both
}
#threads #secondary_color_counter {
	float:right;
	opacity:0.6;
	font-size:15px
}
#logo_thread #instructions_box, #logo_thread .instructions_box {
	margin-top:15px
}
#logo_thread #instructions, #logo_thread .instructions {
	background-color:#F5f5f5;
	padding:15px;
	font-size: 0.8em;
}
.logo_upload_field,
.logo_create_field{
	overflow:hidden;
}


.ui-slider .ui-slider-handle {
	background:#A0CBE0 !important;
	background: #A0CBE0 !important;
	background: linear-gradient(to bottom, #cbedfd 0%,#a0cbe0 100%) !important;
	width:28px !important;
	height:28px !important;
	margin-left:-14px !important;
	top:-9px !important;
	border-radius:15px !important;
}

.ui-widget-content {
	background:none !important;
	background-color: #f3f3f3 !important;
}

.ui-slider .ui-slider-handle::before {
	content: '';
	position: absolute;
	width:10px;
	height:10px;
	background-color:white;
	border-radius:5px;
	top:8px;
	left:8px;
}


/*these styles must come after the qq- styles to maintain correct width on the sample upload button*/
.file-uploader-change, .qq-uploader, .change-file-uploader {
	-webkit-border-bottom-left-radius:10px;
	-webkit-border-bottom-right-radius:10px;
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
}
fieldset{
	border:0;
}
.transparent-bg {
	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAIAAABMXPacAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAkdJREFUeF7t21tuwlAMhOHsf3HdUlspqChq8mBk5EPm4/kIEV9mjn+T7evi833xcX6PQFd8NgHtDWg1nhLwiFhXRUvAcEAlQAKOzVytiLTzPGC4YyRgOgFT7p8mNVfPu0nAHoGpgpCARwVKwLAWS4AEuL+fdcG7PZIH8IBj3b274lb7foPYsPdIgARkm78O0AE64HQIXO22cNffQ4JIULgE3bW1p+BaNZ5QBBQRjiKqLeN87waNBJEgEnSqKp9yi/h0SSRB0xKk0v09/aAiaQWBBWFB4SworeVXe14SRIJIkI3YbwSmBjqD2PQgNpX51cxw6vfoAB2AhqKhXlF6dkGaJ/EAHhDuAVPXrzSpuXpeLAgLwoKwoEkWxAPshO2EJ15QdgvaI+AWNH0LUom9f7atxhOKgCLCUUS1ZZzvlSwSRIJIkI2YjVjwRgwLwoKwICxo8K+JJIgEkSASRIL+uiBNEu0D7AOgCCgCighGEfh+L9+vxtM+wD6ACTNhJhxswmmT52rPaxKenoRXq4i036MDdIA3ZLwh4w2ZZxfwgGFNjEtAFR453wvvwDgwDowD48C4YBjHVHtNtRpPJsyEw004bfBZ7XnR0OHJXwIkAI6Go+FoOPpfF1QHCudfG+iY8LQJq9zXKrdrnoAioIhwFEGCSNChBdIKggfwAB5gJzy5E+66z6Zpd9fzmoSnJ2EdsEegq6Kr8dQBOsBCxkKGBFnIWMhcuHDVVKvnoQgoAoqAIiZRxNQAUtXKu57nATyAB/AAHpD7itIP7enqFX4nQcQAAAAASUVORK5CYII=') left top repeat #fff;
}
.white-bg {
	background: #fff;
}
.gray-bg {
	background: #999;
}
.black-bg {
	background: #000;
}
.numbered-h4 {
	padding-left: 30px;
}
.numbered-h4 span {
	float: left;
	margin-left: -30px;
}
.thread-save {
	text-align: left;
}
#sitewide-message {
	display: none;
}
.back-link {
	float: right;
	display: inline-block;
	font-size: 0.8em;
}
.logo_studio {
	width: 96%;
	margin: auto;
}
.page-name {
	font-weight: 700;
	font-size: 42px;
}
@media (max-width: 768px) {
	.thread-save {
		text-align: center;
	}
	.logo_studio {
		width: 100%;
	}

	.back-link {
		display: block;
		float: none;
	}
}
@media (max-width:480px) {
	.file-button .btn-xl {
		padding: 10px 16px;
		font-size: var(--standard-font-size);
		line-height: 1.33;
		border-radius: 6px;
	}
}

/* =========================================================================
   AI Logo Enhancement Section
   ========================================================================= */

.ai-enhancement-section {
	margin-bottom: 20px;
}

.ai-question-section {
	padding: 20px;
	border-radius: 6px;
	text-align: center;
	margin-bottom: 15px;
}

.ai-question-section p {
	font-size: 16px;
	margin-bottom: 15px;
	color: var(--black);
}

.ai-options-section {
	padding: 15px 20px;
	background-color: var(--pure-white);
	border: 1px solid var(--gray-d-10);
	border-radius: 6px;
	margin-bottom: 15px;
	margin-top: 26px;
}

.ai-processing-section {
	padding: 40px 20px;
	text-align: center;
	background-color: var(--off-white);
	border-radius: 6px;
	margin-top: 26px;
}

.ai-processing-section p {
	margin-top: 15px;
	font-size: 14px;
	color: var(--gray-d-50);
}

/* =========================================================================
   AI Option Cards - Card-based selection UI
   ========================================================================= */

.ai-options-header {
	font-size: var(--regular-font-size);
	font-weight: var(--x-heavy-font-weight);
	color: var(--black);
	margin-bottom: 20px;
}

.ai-option-cards {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ai-option-card {
	border: 1px solid var(--gray-d-20);
	border-radius: 8px;
	padding: 0;
	cursor: pointer;
	transition: all 0.2s ease;
	background: var(--pure-white);
	overflow: hidden;
}

.ai-option-card:hover {
	border-color: var(--gray-d-30);
}

.ai-option-card.selected {
	border-color: var(--blue);
	background: var(--pure-white);
}

.ai-option-card-main {
	display: flex;
	align-items: center;
	padding: 14px 16px;
	gap: 14px;
}

.ai-option-icon {
	width: 42px;
	height: 42px;
	border-radius: 8px;
	background: var(--gray);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.ai-option-icon i {
	font-size: var(--regular-font-size);
	color: var(--gray-d-50);
}

.ai-option-card.selected .ai-option-icon {
	background: var(--blue);
}

.ai-option-card.selected .ai-option-icon i {
	color: var(--pure-white);
}

.ai-option-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ai-option-label {
	font-size: var(--small-font-size);
	font-weight: var(--x-heavy-font-weight);
	color: var(--black);
}

.ai-option-description {
	font-size: var(--xs-font-size);
	color: var(--gray-d-50);
	line-height: 1.3;
}

.ai-option-checkbox {
	position: relative;
	width: 22px;
	height: 22px;
	flex-shrink: 0;
}

.ai-option-checkbox input {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
	z-index: 1;
}

.ai-checkbox-custom {
	position: absolute;
	top: 0;
	left: 0;
	width: 22px;
	height: 22px;
	border: 1px solid var(--gray-d-30);
	border-radius: 4px;
	background: var(--pure-white);
	transition: all 0.2s ease;
}

.ai-option-checkbox input:checked + .ai-checkbox-custom {
	background: var(--blue);
	border-color: var(--blue);
}

.ai-option-checkbox input:checked + .ai-checkbox-custom::after {
	content: '';
	position: absolute;
	left: 6px;
	top: 2px;
	width: 6px;
	height: 11px;
	border: solid var(--pure-white);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.ai-option-text-input {
	padding: 0 16px 14px 72px;
}

.ai-option-text-input textarea {
	font-size: var(--xs-font-size);
	border-radius: 4px;
	resize: none;
}

.ai-option-text-input textarea:focus {
	border-color: var(--blue);
	outline: none;
}

.ai-enhance-actions {
	margin-top: 24px;
	display: flex;
	gap: 12px;
}

/* =========================================================================
   AI Prompt Card (Initial Question)
   ========================================================================= */

.ai-prompt-card {
	background: var(--off-white);
	border: 1px solid var(--gray-d-20);
	border-radius: 12px;
	padding: 28px;
	text-align: center;
}

.ai-prompt-header {
	font-size: var(--xl-font-size);
	font-weight: var(--x-heavy-font-weight);
	color: var(--black);
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

.ai-prompt-description {
	font-size: var(--standard-font-size);
	color: var(--gray-d-50);
	margin-bottom: 24px;
	line-height: 1.5;
}

.ai-prompt-buttons {
	display: flex;
	gap: 12px;
	justify-content: center;
}

.ai-prompt-buttons .btn {
	min-width: 120px;
}

.ai-prompt-buttons .btn-primary i {
	margin-right: 6px;
}

/* =========================================================================
   AI Magic Wand Spinner
   ========================================================================= */

.ai-magic-spinner-container {
	position: relative;
	width: 100px;
	height: 100px;
	margin: 0 auto 20px;
}

.ai-magic-spinner {
	font-size: 56px;
	animation: magic-wand-spin 1.5s ease-in-out infinite, magic-wand-colors 3s ease-in-out infinite;
	display: inline-block;
}

@keyframes magic-wand-spin {
	0% { transform: rotate(-15deg); }
	50% { transform: rotate(15deg); }
	100% { transform: rotate(-15deg); }
}

@keyframes magic-wand-colors {
	0%, 100% { color: var(--green); }
	25% { color: var(--red); }
	50% { color: var(--blue); }
	75% { color: var(--yellow); }
}

.ai-magic-sparkles {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.ai-magic-sparkles .sparkle {
	position: absolute;
	width: 8px;
	height: 8px;
	background: currentColor;
	border-radius: 50%;
	animation: sparkle-float 1.5s ease-in-out infinite, magic-wand-colors 3s ease-in-out infinite;
}

.ai-magic-sparkles .sparkle:nth-child(1) {
	top: 5%;
	right: 15%;
	animation-delay: 0s;
}

.ai-magic-sparkles .sparkle:nth-child(2) {
	top: 20%;
	right: 5%;
	animation-delay: 0.3s;
	width: 6px;
	height: 6px;
}

.ai-magic-sparkles .sparkle:nth-child(3) {
	top: 10%;
	right: 30%;
	animation-delay: 0.6s;
	width: 5px;
	height: 5px;
}

.ai-magic-sparkles .sparkle:nth-child(4) {
	top: 30%;
	right: 10%;
	animation-delay: 0.9s;
	width: 4px;
	height: 4px;
}

@keyframes sparkle-float {
	0%, 100% {
		opacity: 0;
		transform: scale(0.5) translateY(0);
	}
	50% {
		opacity: 1;
		transform: scale(1) translateY(-10px);
	}
}

.ai-processing-text {
	margin-top: 20px;
	font-size: 20px;
	color: var(--qb-gray-700);
	line-height: 1.4;
	font-weight: 500;
}

.ai-processing-text small {
	font-size: 14px;
	font-weight: 400;
	color: var(--qb-gray-500);
	display: block;
	margin-top: 6px;
}

/* Processing indicator should not have pointer cursor */
.background-processing-indicator {
	cursor: default !important;
	display: flex;
}

/* =========================================================================
   AI Feedback Section
   ========================================================================= */

.ai-feedback-section {
	padding: 24px;
	background: var(--off-white);
	border-radius: 8px;
	border: 1px solid var(--gray-d-20);
	margin-top:26px;
}

.ai-feedback-content {
	text-align: left;
}

.ai-feedback-title {
	font-size: var(--regular-font-size);
	font-weight: var(--x-heavy-font-weight);
	color: var(--black);
	margin-bottom: 4px;
}

.ai-feedback-title i {
	color: var(--blue);
	margin-right: 8px;
}

.ai-feedback-subtitle {
	font-size: var(--small-font-size);
	color: var(--qb-gray-600);
	margin-bottom: 12px;
}

.ai-feedback-textarea {
	margin-bottom: 16px;
	border-radius: 4px;
	resize: none;
	font-size: var(--xs-font-size);
}

.ai-feedback-textarea:focus {
	border-color: var(--blue);
	outline: none;
}

.ai-feedback-continue-btn i {
	margin-left: 8px;
}

/* =========================================================================
   AI Comparison Overlay Modal
   (Custom overlay to avoid Bootstrap nested modal issues)
   ========================================================================= */

.ai-overlay-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ai-overlay-backdrop {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.7);
}

.ai-overlay-content {
	position: relative;
	background: var(--pure-white);
	border-radius: 8px;
	box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
	width: 95%;
	max-width: 1600px;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.ai-overlay-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px 20px;
	border-bottom: 1px solid var(--gray-d-10);
	background: var(--off-white);
	flex-shrink: 0;
}

.ai-overlay-header h3 {
	margin: 0;
	font-size: var(--large-font-size);
	font-weight: var(--x-heavy-font-weight);
	color: var(--black);
}

.ai-overlay-close {
	background: none;
	border: none;
	font-size: 24px;
	color: var(--gray-d-50);
	cursor: pointer;
	padding: 5px 10px;
	line-height: 1;
	transition: color 0.2s;
}

.ai-overlay-close:hover {
	color: var(--black);
}

.ai-overlay-controls {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 12px 20px;
	background: var(--off-white);
	border-bottom: 1px solid var(--gray-d-10);
	flex-shrink: 0;
}

.ai-bg-label {
	font-weight: var(--x-heavy-font-weight);
	color: var(--gray-d-50);
	font-size: var(--xs-font-size);
}

.ai-bg-buttons {
	display: flex;
	gap: 8px;
}

.ai-bg-btn {
	width: 32px;
	height: 32px;
	border: 1px solid var(--gray-d-30);
	border-radius: 4px;
	cursor: pointer;
	padding: 3px;
	background: var(--pure-white);
	transition: border-color 0.2s, transform 0.1s;
}

.ai-bg-btn:hover {
	border-color: var(--gray-d-40);
	transform: scale(1.05);
}

.ai-bg-btn.active {
	border-color: var(--blue);
}

.ai-bg-swatch {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 3px;
	border: 1px solid rgba(0, 0, 0, 0.1);
}

.ai-bg-checker {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 3px;
	background-color: #fff;
	background-image:
		linear-gradient(45deg, #ccc 25%, transparent 25%),
		linear-gradient(-45deg, #ccc 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, #ccc 75%),
		linear-gradient(-45deg, transparent 75%, #ccc 75%);
	background-size: 8px 8px;
	background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
}

.ai-overlay-body {
	flex: 1;
	overflow: auto;
	padding: 25px;
}

.ai-overlay-comparison {
	display: flex;
	gap: 30px;
	justify-content: center;
	align-items: flex-start;
}

.ai-overlay-column {
	flex: 1;
	max-width: 700px;
	text-align: center;
}

.ai-overlay-column h4 {
	margin: 0 0 15px 0;
	font-size: var(--regular-font-size);
	font-weight: var(--x-heavy-font-weight);
	color: var(--black);
}

.ai-overlay-image-container {
	position: relative;
	height: 420px;
	border: 1px solid var(--gray-d-20);
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.3s;
	background-color: var(--pure-white);
	background-image:
		linear-gradient(45deg, var(--gray-d-10) 25%, transparent 25%),
		linear-gradient(-45deg, var(--gray-d-10) 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, var(--gray-d-10) 75%),
		linear-gradient(-45deg, transparent 75%, var(--gray-d-10) 75%);
	background-size: 20px 20px;
	background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

.ai-overlay-image-container[data-bg="white"] {
	background: var(--pure-white);
	background-image: none;
}

.ai-overlay-image-container[data-bg="gray"] {
	background: var(--gray-d-40);
	background-image: none;
}

.ai-overlay-image-container[data-bg="black"] {
	background: var(--black);
	background-image: none;
}

.ai-image-loader {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	color: var(--gray-d-50);
	z-index: 1;
}

.ai-image-loader i {
	font-size: 32px;
	color: var(--blue);
}

.ai-image-loader span {
	font-size: var(--xs-font-size);
}

.ai-overlay-image-container img {
	max-width: 95%;
	max-height: 95%;
	object-fit: contain;
}

.ai-overlay-footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 20px;
	border-top: 1px solid var(--gray-d-10);
	background: var(--off-white);
	flex-shrink: 0;
}

.ai-overlay-hint {
	margin: 0;
	font-size: var(--standard-font-size);
	color: var(--gray-d-60);
	text-align: center;
}

.ai-overlay-actions {
	display: flex;
	gap: 15px;
	justify-content: center;
}

.ai-overlay-footer .btn {
	min-width: 180px;
}

/* Mobile responsive for AI overlay */
@media screen and (max-width: 900px) {
	.ai-overlay-content {
		width: 98%;
		max-height: 98vh;
	}

	.ai-overlay-comparison {
		flex-direction: column;
		align-items: center;
	}

	.ai-overlay-column {
		max-width: 100%;
		width: 100%;
	}

	.ai-overlay-image-container {
		height: 250px;
	}

	.ai-overlay-body {
		padding: 15px;
	}

	.ai-overlay-footer {
		padding: 15px;
		gap: 8px;
	}

	.ai-overlay-hint {
		font-size: var(--xs-font-size);
	}

	.ai-overlay-actions {
		flex-direction: column;
		width: 100%;
		gap: 10px;
	}

	.ai-overlay-footer .btn {
		width: 100%;
		padding: 12px 20px;
	}
}

/* Very small screens */
@media screen and (max-width: 500px) {
	.ai-overlay-content {
		max-height: 100vh;
		max-height: 100dvh;
		border-radius: 0;
	}

	.ai-overlay-header {
		padding: 12px 15px;
	}

	.ai-overlay-header h3 {
		font-size: var(--regular-font-size);
	}

	.ai-overlay-controls {
		padding: 10px 15px;
		gap: 10px;
	}

	.ai-overlay-image-container {
		height: 180px;
	}

	.ai-overlay-column h4 {
		margin-bottom: 8px;
		font-size: var(--xs-font-size);
	}

	.ai-overlay-body {
		padding: 10px;
	}

	.ai-overlay-comparison {
		gap: 15px;
	}

	.ai-overlay-footer {
		padding: 12px;
	}

	.ai-overlay-footer .btn {
		padding: 10px 16px;
		font-size: var(--xs-font-size);
	}
}

/* =========================================================================
   Upload Modal Styles
   ========================================================================= */

.upload-logo {
	max-width: 646px;
}

.logo_studio {
	width: auto !important;
}

#input_logo_email.error {
	border-color: #c99;
	color: #c99;
}

.logo-upload-header {
	color: white;
}

.logo-upload-modal .modal-dialog {
	max-width: 700px;
}

.logo-upload-modal .modal-header {
	display: flex;
	justify-items: center;
	justify-content: space-between;
}

.logo-upload-modal .modal-body {
	padding: 26px;
}

.logo-upload-modal .modal-header span {
	font-size: 24px;
	font-weight: 500;
}

.logo-upload-modal .modal-header button {
	font-size: 36px;
	cursor: pointer;
	z-index: 400;
	margin-right: 0;
}

.file-box {
	margin: 24px auto;
}

.qq-gallery.qq-uploader {
	border: 2px dashed #CCCCCC;
	text-align: center;
	padding: 54px 0;
	min-height: 270px;
	max-height: none;
}

.qq-gallery.qq-uploader span {
	font-size: 25px;
	line-height: 28px;
	margin-bottom: 5px;
}

.qq-gallery.qq-uploader i {
	font-size: 40px;
}

.qq-gallery .qq-upload-button {
	padding: 12px;
	text-align: center;
	font-size: 20px;
	border-radius: 6px;
	max-width: 150px;
	margin: 7px auto 0;
	display: block;
	float: none;
	direction: unset;
	border: 1px solid #cbcbcb;
	color: #000;
	box-shadow: none;
	background: #ffffff;
	background: linear-gradient(to bottom, #ffffff 52%, #e7e7e7 100%);
}

.qq-upload-button:hover {
	box-shadow: inset 0 0 30px #dfdfdf;
}

.logo-preview-container {
	text-align: center;
	margin: 27px auto 30px;
}

.logo-preview {
	max-width: 150px;
	max-height: 200px;
	padding: 20px;
	border-radius: 5px;
	box-sizing: content-box;
	background-color: #fff;
	background-image:
		linear-gradient(45deg, #e0e0e0 25%, transparent 25%),
		linear-gradient(-45deg, #e0e0e0 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, #e0e0e0 75%),
		linear-gradient(-45deg, transparent 75%, #e0e0e0 75%);
	background-size: 16px 16px;
	background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
}

.qq-gallery .qq-upload-list {
	overflow: visible;
}

qq-upload-list, .qq-gallery .qq-upload-list li {
	margin: 0;
	height: auto;
}

.qq-gallery .qq-upload-list li, .qq-upload-size {
	background-color: #9c9c9c !important;
	color: #fff !important;
}

.qq-gallery .qq-upload-cancel {
	right: 0;
}

.qq-upload-drop-area-text-selector {
	font-size: 30px !important;
}

.qq-gallery .qq-upload-list li {
	border: 2px solid #828282;
	padding: 20px;
	border-radius: 8px;
	max-width: 240px;
	margin: 0 auto;
	overflow: visible;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 200px;
}

.qq-gallery .qq-upload-delete, .qq-gallery .qq-upload-cancel {
	color: white;
	box-shadow: none;
	border: none;
	font-size: 20px;
	position: absolute;
	top: -15px;
	left: -17px;
	background-color: #1d1d1d;
	height: 34px;
	width: 34px;
	border-radius: 25px;
	font-family: FontAwesome;
}

.qq-gallery .qq-upload-delete:hover {
	background-color: #545454;
}

.qq-gallery .qq-delete-icon {
	display: none;
}

.qq-gallery .qq-progress-bar {
	display: none !important;
}

.qq-upload-spinner {
	display: none !important;
}

.qq-file-name, .qq-upload-size, .qq-upload-status-text {
	display: none !important;
}

.qq-gallery .qq-file-info {
	padding: 0;
}

.qq-gallery .qq-thumbnail-wrapper {
	width: auto;
	height: auto;
	overflow: visible;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

img.qq-thumbnail-selector {
	border-radius: 5px;
	object-fit: contain;
	width: auto !important;
	height: auto !important;
	max-width: 180px !important;
	max-height: 180px !important;
	display: block;
	margin: 0 auto;
	position: static !important;
	top: auto !important;
	transform: none !important;
	-moz-transform: none !important;
	-ms-transform: none !important;
	-webkit-transform: none !important;
}

.fa-times:before {
	font-size: 22px;
}

.logo_upload_field small {
	font-size: 16px;
}

.bulleted-content {
	font-size: 17px;
	padding-left: 6px;
	margin-bottom: 10px;
}

.bulleted-content.upload-guarantee {
	padding-left: 0;
}
.bulleted-content.upload-guarantee::before {
	content: none;
}

.bulleted-content::before {
	content: "\2022";
	color: red;
	font-size: 34px;
	font-weight: bold;
	line-height: 0;
	height: 0;
	position: relative;
	top: 4px;
	margin-right: 2px;
}

/* Modal content overflow containment for animations */
.logo-upload-modal .modal-content {
	overflow: hidden;
}

.upload-logo {
	position: relative;
	overflow: hidden;
}

/* =========================================================================
   Stepper Progress Bar
   ========================================================================= */

.stepper-wrapper {
	display: flex;
	justify-content: space-between;
	max-width: 300px;
}

.stepper-item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 1;
}

.stepper-item::before {
	position: absolute;
	content: "";
	border-bottom: 1px solid #C1C1C1;
	width: 100%;
	top: 10px;
	z-index: 2;
}

.stepper-item::after {
	position: absolute;
	content: "";
	border-bottom: 1px solid #C1C1C1;
	width: 100%;
	top: 10px;
	z-index: 2;
}

.stepper-item .step-counter {
	position: relative;
	z-index: 5;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: white;
	border: 1px solid #c1c1c1;
}

.stepper-item.active .step-counter, .stepper-item.completed .step-counter {
	background-color: #DCFAFF;
}

.stepper-item.completed .step-counter {
	cursor: pointer;
}

.stepper-item.completed::after {
	position: absolute;
	content: "";
	border-bottom: 1px solid #C1C1C1;
	width: 100%;
	top: 10px;
	z-index: 3;
}

.stepper-item:first-child::before, .stepper-item:last-child::after, .stepper-item:last-child::before {
	content: none;
}

.stepper-content.active {
	display: block;
}

.stepper-content {
	--animate-duration: 700ms;
	display: none;
}

/* =========================================================================
   Upload Actions & Layout
   ========================================================================= */

.actions {
	margin-top: 15px;
	display: flex;
	justify-content: space-between;
}

.actions button {
	width: 100%;
	max-width: 300px;
	padding: 18px 14px;
	font-size: 24px;
	line-height: normal;
	border-radius: 999px;
	border: 1px solid #7e7e7e;
	-webkit-transition: background-color 200ms linear;
	-ms-transition: background-color 200ms linear;
	transition: background-color 200ms linear;
}

.big-labels {
	margin-top: 20px;
}

.big-labels label {
	font-size: 25px !important;
	font-weight: normal;
	line-height: normal;
	margin-bottom: 10px;
}

.big-labels input, .big-labels textarea {
	height: 40px;
	font-size: 19px;
}

.confetti {
	width: 60px;
	position: absolute;
	top: 0;
	margin-left: 10px;
}

.logo-upload-modal button.close {
	color: white;
	opacity: unset;
	right: 21px;
}

.thank-you-messaging {
	font-size: 30px;
	line-height: normal;
}

/* =========================================================================
   Toggle Switch
   ========================================================================= */

.toggle-switch {
	position: relative;
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	user-select: none;
}

.toggle-switch input[type="checkbox"] {
	opacity: 0;
	width: 0;
	height: 0;
}

.toggle-slider {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 30px;
	background-color: #ccc;
	transition: .4s;
	border-radius: 30px;
}

.toggle-slider:before {
	position: absolute;
	content: "";
	height: 22px;
	width: 22px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	transition: .4s;
	border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
	background-color: #2196F3;
}

.toggle-switch input:checked + .toggle-slider:before {
	transform: translateX(30px);
}

.toggle-switch input:disabled + .toggle-slider {
	background-color: #ccc;
	cursor: not-allowed;
	opacity: 0.6;
}

.toggle-switch input:disabled + .toggle-slider:before {
	background-color: #999;
}

.toggle-switch input:disabled {
	cursor: not-allowed;
}

.toggle-switch:has(input:disabled) {
	cursor: not-allowed;
}

/* =========================================================================
   Upload Modal Responsive
   ========================================================================= */

@media screen and (max-width: 700px) {
	.big-labels {
		margin-top: 0;
	}

	.big-labels label {
		font-size: 20px;
	}

	.actions button {
		font-size: 20px;
		border-radius: unset;
	}

	.confetti {
		width: 50px;
		top: -13px;
	}

	.no-mobile {
		display: none;
	}

	.bulleted-content {
		font-size: 16px;
		line-height: 24px;
	}

	.thank-you-messaging {
		font-size: 25px;
	}
}

/* =========================================================================
   Max Dimensions Overlay
   ========================================================================= */

.dimensions-overlay-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	box-sizing: border-box;
}

.dimensions-overlay-backdrop {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
}

.dimensions-overlay-content {
	position: relative;
	background: var(--pure-white);
	border-radius: 15px;
	max-width: 560px;
	width: 90%;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);
}

.dimensions-overlay-body {
	padding: 0;
}

@media screen and (max-width: 500px) {
	.dimensions-overlay-content {
		width: 95%;
		border-radius: 10px;
	}
}

.logo-guidelines-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--small-font-size);
}

h1.logo-guidelines-title {
	font-family: var(--alt-brand-typeface);
	text-transform: uppercase;
	text-align: center;
	font-weight: var(--xx-heavy-font-weight);
	font-size: 6.3rem;
	letter-spacing: 2px;
	line-height: 1;
	margin: 20px 0 5px;
	color: var(--blue);
}

.logo-guidelines-table,
.logo-guidelines-table thead th,
.logo-guidelines-table tbody td {
	border: 1px solid var(--gray-d-20);
}

.logo-guidelines-table thead th {
	background-color: var(--blue);
	color: var(--pure-white);
	font-weight: var(--x-heavy-font-weight);
	padding: 12px 15px;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 1px;
	border: 1px solid var(--blue);
}

.logo-guidelines-table thead th.section-header {
	font-size: var(--small-font-size);
}

.logo-guidelines-table tbody td {
	padding: 6px 15px;
	text-align: center;
	border: 1px solid var(--gray-d-20);
	font-weight: var(--light-font-weight);
}

.logo-guidelines-table tbody td:first-child {
	text-align: center;
	font-weight: var(--x-heavy-font-weight);
	background-color: var(--off-white);
	text-transform: uppercase;
}

.logo-guidelines-table tbody tr:hover {
	background-color: var(--gray);
}

.logo-guidelines-table tbody tr:hover td:first-child {
	background-color: var(--gray-d-10);
}

.logo-guidelines-footer {
	padding: 15px 20px;
	background-color: var(--off-white);
	font-size: var(--xs-font-size);
	line-height: 24px;
	border-radius: 0 0 15px 15px;
}

.logo-guidelines-footer p:last-child {
	margin-bottom: 0;
}

@media screen and (max-width: 767px) {
	.logo-guidelines-table {
		font-size: var(--x-small-font-size);
	}
	.logo-guidelines-table thead th {
		padding: 8px 6px;
		font-size: var(--x-small-font-size);
	}
	.logo-guidelines-table thead th small {
		display: none;
	}
	.logo-guidelines-table tbody td {
		padding: 5px 6px;
	}
	.logo-guidelines-table thead th,
	.logo-guidelines-table tbody td {
		white-space: normal;
		overflow-wrap: normal;
	}
	h1.logo-guidelines-title {
		font-size: var(--large-font-size);
	}
	.dimensions-overlay-content {
		width: 98%;
	}
	.dimensions-overlay-body {
		padding: 10px !important;
	}
	.logo-guidelines-footer {
		font-size: var(--xx-small-font-size);
	}
}

/* =========================================================================
   My Logos
   ========================================================================= */

/* The page wrapper's row sits outside any container, so its gutters would
   push the page wider than a phone screen. */
.logo_studio > .row {
	margin-right: 0;
	margin-left: 0;
}
.logo_studio > .row > .col-md-12 {
	padding-right: 0;
	padding-left: 0;
}
.my-logos [hidden] {
	display: none !important;
}
.my-logos-sprite {
	position: absolute;
	width: 0;
	height: 0;
}
.my-logos-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 16px;
}
.my-logos-head .page-name {
	margin: 10px 0;
}
.my-logos-count {
	margin-left: 8px;
	font-size: var(--small-font-size);
	font-weight: var(--medium-font-weight);
	color: var(--black-l-40);
	white-space: nowrap;
}
.my-logos-notice {
	margin: 0 0 6px;
	padding: 10px 14px;
	font-size: var(--small-font-size);
	background: var(--yellow-light);
	border-radius: 8px;
}
.my-logos-tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	margin-top: 6px;
}
.my-logos-upload {
	margin-left: auto;
}
.my-logos-search {
	flex: 1 1 220px;
	min-width: 0;
	max-width: 360px;
	height: 40px;
	font-size: var(--small-font-size);
}
.my-logos-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.my-logos-chip {
	padding: 10px 14px;
	font-size: var(--xs-font-size);
	font-weight: var(--heavy-font-weight);
	line-height: 1;
	color: var(--black);
	background: var(--pure-white);
	border: 1px solid var(--gray-d-30);
	border-radius: 999px;
}
.my-logos-chip[aria-pressed="true"] {
	color: var(--pure-white);
	background: var(--blue-dark);
	border-color: var(--blue-dark);
}

/* Groups share the product page picker's look: an off-white panel with an
   edge in the colour of its marker. */
.my-logos-group {
	margin-top: 16px;
	padding: 0 19px 20px 16px;
	background: var(--off-white);
	border: 1px solid var(--gray-d-10);
	border-left: 4px solid var(--primary);
	border-radius: 12px;
}
.my-logos-group[data-group="ready"] {
	border-left-color: var(--green-dark);
}
.my-logos-group[data-group="setup"] {
	border-left-color: var(--yellow-dark);
}
.my-logos-group-head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 12px 0 2px;
	font-size: var(--small-font-size);
	font-weight: var(--xx-heavy-font-weight);
	line-height: 1.3;
}
.my-logos-group-sub {
	margin: 0;
	font-size: var(--xs-font-size);
	color: var(--black-l-40);
}
.my-logos-icon {
	flex: none;
	width: 20px;
	height: 20px;
}
.my-logos-icon.is-ready {
	color: var(--green-dark);
}
.my-logos-icon.is-setup {
	color: var(--yellow-dark);
}
.my-logos-icon.is-other {
	color: var(--primary);
}
.my-logos-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin: 12px 0 0;
}

.my-logo {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--pure-white);
	border: 1px solid var(--gray-d-10);
	border-radius: 10px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.my-logo-tile {
	position: relative;
	aspect-ratio: 5 / 3;
	border-bottom: 1px solid var(--gray-d-10);
	border-radius: 9px 9px 0 0;
}
.my-logo-tile img {
	position: absolute;
	top: 12px;
	left: 16px;
	width: calc(100% - 32px);
	height: calc(100% - 24px);
	object-fit: contain;
}
.my-logo-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 4px;
	padding: 10px 12px 12px;
}
.my-logo-top {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 6px 10px;
}
.my-logo-swatches {
	display: flex;
	flex: none;
	gap: 4px;
}
.my-logo-swatch {
	width: 24px;
	height: 24px;
	padding: 0;
	border: 1px solid var(--gray-d-40);
	border-radius: 50%;
}
.my-logo-swatch.transparent-bg {
	background-size: 32px;
}
.my-logo-swatch[aria-pressed="true"] {
	box-shadow: 0 0 0 2px var(--pure-white), 0 0 0 4px var(--primary);
}
.my-logo-name {
	flex: 1 1 120px;
	min-width: 0;
	font-size: var(--small-font-size);
	font-weight: var(--xx-heavy-font-weight);
	line-height: 1.25;
	overflow-wrap: anywhere;
}
.my-logo-name.is-unnamed {
	font-weight: var(--heavy-font-weight);
	color: var(--black-l-40);
}
.my-logo-name-it {
	align-self: flex-start;
	padding: 0;
	font-size: var(--xs-font-size);
	border: 0;
}
.my-logo-when {
	font-size: var(--xs-font-size);
	line-height: 1.35;
	color: var(--black-l-40);
}
.my-logo-when span:last-child {
	white-space: nowrap;
}
.my-logo-when span + span::before {
	content: "\00b7\00a0";
}
.my-logo-for {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 12px;
	margin: 0 0 6px;
	font-size: var(--xs-font-size);
	font-weight: var(--heavy-font-weight);
}
.my-logo-for li {
	display: inline-flex;
	align-items: flex-start;
	gap: 5px;
	padding: 4px 0;
	line-height: 20px;
	cursor: help;
}
/* the site switches off outlines on list items */
.my-logo-for li:focus-visible {
	outline: 2px solid var(--primary) !important;
	outline-offset: 2px;
}
/* Bootstrap draws its tooltips at 12px, and one that opens beside the screen
   edge is squeezed against it unless its width is its own. */
.my-logos-tip {
	width: max-content;
	max-width: calc(100vw - 16px);
	font-size: var(--xs-font-size);
}
.my-logos-tip .tooltip-inner {
	max-width: 280px;
	padding: 8px 10px;
	line-height: 1.35;
	text-align: left;
	background-color: var(--black);
}
.my-logos-tip.top .tooltip-arrow {
	border-top-color: var(--black);
}
.my-logos-tip.bottom .tooltip-arrow {
	border-bottom-color: var(--black);
}
/* As tall as a line of text, so it stays beside the first line of a label that wraps. */
.my-logo-for .my-logos-icon {
	width: 15px;
	height: 20px;
}
/* The kinds a label counts instead of naming; its tooltip lists them. */
.my-logo-more {
	white-space: nowrap;
	text-decoration: underline dotted;
	text-underline-offset: 3px;
}
/* With a method chosen, the group heading already says what each logo is ready
   for. A line that names that method's kinds of product still has something to say. */
.my-logos[data-method] .my-logo-for {
	display: none;
}
.my-logos[data-method="emb"] .my-logo-for[data-kinds="emb"] {
	display: flex;
}
.my-logos[data-method] .my-logo-for li:not([data-kinds]) {
	display: none;
}
.my-logo-foot {
	margin-top: auto;
}
.my-logo-shop {
	width: 100%;
	padding: 10px 12px;
	font-size: var(--xs-font-size);
	font-weight: var(--x-heavy-font-weight);
	white-space: normal;
}
/* The logo the next product page will start with: the same ring and check the product page's logo picker uses. */
.my-logo.is-selected {
	border-color: var(--primary);
	box-shadow: 0 0 0 1px var(--primary);
}
.my-logo.is-selected::after {
	content: "\f00c";
	position: absolute;
	top: 6px;
	right: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	font-family: FontAwesome, sans-serif;
	font-size: 14px;
	color: var(--pure-white);
	background: var(--primary);
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.my-logo-shop-on,
.my-logo-shop[aria-pressed="true"] .my-logo-shop-off {
	display: none;
}
.my-logo-shop[aria-pressed="true"] .my-logo-shop-on {
	display: inline;
}
/* The site recolors a hovered or focused button, so the selected look is stated for those states too. */
.my-logo .my-logo-shop[aria-pressed="true"],
.my-logo .my-logo-shop[aria-pressed="true"]:hover,
.my-logo .my-logo-shop[aria-pressed="true"]:focus,
.my-logo .my-logo-shop[aria-pressed="true"]:active {
	color: var(--blue-hover);
	background-color: var(--pure-white);
	border-color: var(--primary);
}
/* The other actions share one bar: the gaps between its cells are the dividers. */
.my-logo-actions {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 1px;
	margin-top: 8px;
	overflow: hidden;
	background: var(--gray-d-10);
	border: 1px solid var(--gray-d-20);
	border-radius: 10px;
}
.my-logo-action {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	/* room for a two-line label, so the bar is the same height on every card */
	min-height: 74px;
	padding: 8px 4px;
	font-size: var(--xs-font-size);
	font-weight: var(--heavy-font-weight);
	line-height: 1.2;
	color: var(--black-l-20);
	overflow-wrap: anywhere;
	background: var(--pure-white);
	border: 0;
	border-radius: 0;
}
.my-logo-action .fa {
	font-size: 18px;
	line-height: 1;
	color: var(--primary);
}
.my-logo-action:hover {
	background: var(--off-white);
}
.my-logo-action:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: -2px;
}
.my-logo-delete .fa {
	color: var(--black-l-40);
}
.my-logo-delete:hover,
.my-logo-delete:hover .fa {
	color: var(--red-dark);
}

.my-logos-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin-top: 6px;
	padding: 40px 16px 36px;
	text-align: center;
	background: var(--off-white);
	border: 1px dashed var(--gray-d-30);
	border-radius: 12px;
}
.my-logos-empty svg {
	width: 46px;
	height: 46px;
	color: var(--primary);
}
.my-logos-empty h2 {
	margin: 0;
	font-size: var(--xl-font-size);
}
.my-logos-empty p {
	max-width: 46ch;
	margin: 0 0 6px;
	font-size: var(--small-font-size);
	color: var(--black-l-40);
}
.my-logos-none {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 24px 0 0;
	font-size: var(--small-font-size);
}

/* Rename and delete dialogs */
.my-logos-dialog {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: var(--small-font-size);
}
.my-logos-dialog img {
	flex: none;
	width: 110px;
	height: 70px;
	padding: 4px;
	object-fit: contain;
	border: 1px solid var(--gray-d-10);
	border-radius: 6px;
}
.my-logos-dialog-field {
	flex: 1;
	min-width: 0;
}
.my-logos-dialog-field small {
	display: block;
	margin-top: 6px;
	font-size: var(--xs-font-size);
	color: var(--black-l-40);
}

@media (max-width: 1199px) {
	.my-logos-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 20px;
	}
}
@media (max-width: 767px) {
	.my-logos-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
	.my-logos-group {
		padding: 0 11px 12px 8px;
	}
	.my-logos-upload {
		width: 100%;
	}
	.my-logo-body {
		padding: 8px 9px 10px;
	}
	.my-logo-actions {
		grid-auto-flow: row;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	/* an odd one out fills its row, so no empty cell shows through */
	.my-logo-action:last-child:nth-child(odd) {
		grid-column: span 2;
	}
	.my-logos-dialog {
		flex-direction: column;
		align-items: stretch;
	}
	.my-logos-dialog img {
		align-self: center;
	}
}