/** Shopify CDN: Minification failed

Line 519:0 Unexpected "@"

**/
.logo-settings-options{
	margin-bottom: 18px;
}

.logo-settings-options .setting-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.logo-settings-options .input-contain {
	display: flex;
	align-items: center;
	padding: 9px 0;
	margin: 0 0 3px 0;
}

.logo-settings-options .input-contain input[type="radio"] {
	height: 16px;
	width: 16px;
}



.logo-settings-options .logo-upload {
  /*   	display:none; */
	border: 1px solid #e0e0e0;
	padding: 12px;
	margin-top: 18px;
	
}

.logo-settings-options label{
	margin-bottom: 0px;
	font-weight: bold;
	color: var(--primary-button-background);
	display: block;
	clear: both;
}

.logo-settings-options .input-contain label {
	font-size: 12px;
	line-height: 16px;
	display: block;
    font-weight:300;
	margin-bottom: 0;
	margin-left: 6px;
	margin-top: 2px;
	color: #222;
}

.logo-settings-options .logo-upload.active {
	display: block;
}

.logo-settings-options .existing-logo {
	display: none;
	border: 1px solid #e0e0e0;
	padding: 9px 12px;
	align-items: center;
}

.logo-settings-options .existing-logo .logo-filename {
	display: block;
	margin-right: auto;
}

.logo-settings-options .existing-logo.active {
	display: flex;
	margin-top: 12px;
}

.product_gallery {
	position: relative;
}

.logo-mover {
	width: 90px;
	height: 90px;
	display: block;
  /*   	overflow:hidden; */
	position: absolute;
	bottom: 25px;
	right: 0;
}

.logo-mover button {
	width: 25px;
	height: 25px;
	line-height: 25px;
	min-height: 25px;
	max-height: 25px;
	max-width: 25px;
	padding: 0;
	margin: auto;
	outline: 0;
	display: block;
	border-radius: 4px;
	overflow: hidden;
	position: absolute;
	background-image: linear-gradient(to bottom, #fff, #f0f0f0);
	border: 1px solid #e0e0e0;
	color: #999;
}

.logo-mover button.up {
	top: 0;
	left: 0;
	right: 0;
}

.logo-mover button.down {
	bottom: 0px;
	left: 0;
	right: 0;
}

.logo-mover button.left {
	top: 0;
	bottom: 0;
	left: 0;
}

.logo-mover button.right {
	top: 0;
	bottom: 0;
	right: 0;
}

.logo-mover .small-mover-text {
	display: block;
	overflow: hidden;
	font-size: 13px;
	text-align: center;
	position: absolute;
	bottom: -25px;
	left: 0;
	right: 0;
	font-weight: bold;
	margin: auto;
	margin-bottom: 0;
}

#product-zoom {
	position: fixed;
	border: 18px solid #fff;
	border-radius: 4px;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.9);
	top: 0;
	left: 0;
	z-index: -999999999;
	visibility: hidden;
	opacity: 0;
	transition: all .25s ease-in;
	overflow: hidden;
}

#product-zoom .zoom-bg-close {
	width: 100%;
	height: 100%;
	position: relative;
	display: block;
}

#product-zoom .zoom-contents {
	width: 800px;
	margin: auto;
	max-width: 90%;
	position: absolute;
	height: 75vh;
	padding: 0;
	background: #fff;
	box-shadow: 0 3px 18px rgba(0, 0, 0, 0.06);
	top: 0;
	left: 0;
	right: 0;
	overflow: hidden;
	bottom: 0;
}

#product-zoom .zoom-contents img {
	height: 75vh;
	width: auto;
	display: block;
}

#product-zoom.active {
	z-index: 999999999;
	visibility: visible;
	opacity: 1;
	transition: visibility .25s ease-in, opacity .25s ease-in;
}

.logo-upload-message {
	display: block;
	padding: 15px;
	border: 1px solid #e0e0e0;
	/*border-top: 0;*/
	/*border-radius: 4px;*/
	/*box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);*/
	display: none;
	margin-bottom: 12px;
}

.logo-upload-message.active {
	display: none;
}

.logo-upload-message p {
	font-size: 13px;
}

.logo-upload-message p:last-of-type {
	margin-bottom: 0;
	padding-bottom: 0;
}

.logo-upload-message ul {
	padding-left: 24px;
	margin: 0;
	list-style-position: outside;
}

.logo-upload-message ul li {
	margin-bottom: 2px;
}

/*== start of code for tooltips ==*/
.tool-tip {
	cursor: help;
	position: relative;
}

/*== common styles for both parts of tool tip ==*/
.tool-tip::before,
.tool-tip::after {
	left: 50%;
	opacity: 0;
	position: absolute;
	z-index: -100;
}

.tool-tip:hover::before,
.tool-tip:focus::before,
.tool-tip:hover::after,
.tool-tip:focus::after {
	opacity: 1;
	transform: scale(1) translateY(0);
	z-index: 100;
}

/*== pointer tip ==*/
.tool-tip::before {
	border-style: solid;
	border-width: 1em 0.75em 0 0.75em;
	border-color: #3E474F transparent transparent transparent;
	bottom: 105%;
	content: "";
	margin-left: -0.5em;
	transition: all 0.65s cubic-bezier(0.84, -0.18, 0.31, 1.26), opacity 0.65s 0.5s;
	transform: scale(0.6) translateY(-90%);
}

.tool-tip:hover::before,
.tool-tip:focus::before {
	transition: all 0.65s cubic-bezier(0.84, -0.18, 0.31, 1.26) 0.2s;
}

/*== speech bubble ==*/
.tool-tip::after {
	background: #3E474F;
	border-radius: .25em;
	bottom: 178%;
	color: #EDEFF0;
	content: attr(data-tip);
	margin-left: -8.75em;
	padding: 1em;
	font-size: 14px;
	line-height: 18px;
  /* 	white-space: pre; */
	transition: all 0.65s cubic-bezier(0.84, -0.18, 0.31, 1.26) 0.2s;
	transform: scale(0.6) translateY(50%);
	width: 17.5em;
}

.tool-tip:hover::after,
.tool-tip:focus::after {
	transition: all 0.65s cubic-bezier(0.84, -0.18, 0.31, 1.26);
}

@media (max-width: 760px) {
	.tool-tip::after {
		font-size: .75em;
		margin-left: -5em;
		width: 10em;
	}
}

.brand-contain {
	padding-bottom: 18px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	width: 100%;
	overflow: hidden;
}

.brand-contain .brand-contain-left {
	margin-right: auto;
	width: 60%;
	max-width: 60%;
	flex-grow: 1;
}

.brand-contain .brand-contain-left .trustpilot-widget {
	margin-left: 0;
}

.brand-contain .brand-contain-right img {
	height: 72px;
	width: auto;
	vertical-align: bottom;
}
/* =========================================================
   HEADER LOGO CONTROLS
   ========================================================= */

.logo-upload-wrapper {
  border-bottom: 1px solid var(--border-color);
  background: var(--secondary-background);
  display: flex;
  align-items: center;
}


/* Whole logo control row */
.logo-settings-options-new {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;

  width: 100%;
  max-width: 500px;

  margin: 0 0 0 auto;
  padding-bottom: 10px;
}


/* =========================================================
   CURRENT LOGO / NO LOGO IMAGE
   ========================================================= */

.logo-settings-options-new .existing-logo {
  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 58px;
  width: 58px;

  background: none;
  color: inherit;
}


/* We don't need "Your Logo:" taking up header space */
.logo-settings-options-new .logo-filename {
  display: none;
}


#custom_logo_url {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 50px;
  height: 50px;
}


#custom_logo_url img {
  display: block;
  max-width: 50px;
  max-height: 50px;
  width: auto;
  height: auto;
}


/* =========================================================
   ALL THREE LOGO BUTTONS
   ========================================================= */

.logo-upload,
.logo-on-file button,
.logo-upload-later button {
  box-sizing: border-box;

  height: 44px;
  min-height: 44px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0 13px;
  margin: 0;

  border: 1px solid transparent;

  background: var(--product-custom-label-1-background);
  color: #fff;

  font: inherit;
  line-height: 1;

  white-space: nowrap;
  cursor: pointer;
}


/* Upload button needs relative positioning for hidden file input */
.logo-upload {
  position: relative;
  overflow: hidden;
}


/* Invisible file upload input */
.cloudinary-fileupload {
  position: absolute;
  top: 0;
  right: 0;

  margin: 0;
  height: 100%;
  width: 100%;

  opacity: 0;
  filter: alpha(opacity = 0);

  font-size: 200px !important;
  direction: ltr;

  cursor: pointer;
}


/* =========================================================
   SELECTED STATES
   ========================================================= */

.logo-on-file.selected button,
.logo-upload-later.selected button {
  background: transparent;
  color: var(--heading-color);

  border: 1px solid var(--heading-color);

  cursor: pointer;
}


/* =========================================================
   DESKTOP HEADER
   ========================================================= */

@media screen and (min-width: 1000px) {

  .nav-bar-wrapper {
    display: flex;
    align-items: center;
    position: relative;
    border-bottom: 1px solid var(--border-color);
    background: var(--secondary-background);
  }

  .nav-bar-wrapper .nav-bar {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
    border-bottom: 0;
  }

  .logo-upload-wrapper {
    width: auto;
    margin-left: auto;
    flex-shrink: 0;
    border-bottom: 0;
    background: var(--secondary-background);
    display: flex;
    align-items: center;
    align-self: stretch;
  }

  .logo-settings-options-new {
    padding-bottom: 0;
    margin-bottom: 0;
    align-items: center;
  }

}
@@media screen and (max-width: 999px) {

  .nav-bar-wrapper.container {
    width: 100%;
    max-width: none;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0;
  }

  .logo-upload-wrapper {
    width: 100%;
    margin: 0;
    padding: 6px 8px;
    box-sizing: border-box;
  }

  .logo-settings-options-new {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;

    display: grid;
    grid-template-columns: 50px repeat(3, minmax(0, 1fr));
    grid-template-rows: 48px;
    gap: 5px;
    align-items: center;

    box-sizing: border-box;
  }

  /* LOGO PREVIEW */
  .logo-settings-options-new .existing-logo {
    display: flex !important;
    grid-column: 1;
    grid-row: 1;

    width: 50px;
    height: 48px;
    min-width: 0;

    align-items: center;
    justify-content: center;

    padding: 0;
    margin: 0;
  }

  #custom_logo_url {
    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;
  }

  #custom_logo_url img {
    display: block;
    max-width: 46px;
    max-height: 46px;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  /* CHANGE / UPLOAD LOGO */
  .logo-settings-options-new .logo-upload {
    grid-column: 2;
    grid-row: 1;

    width: 100%;
    min-width: 0;
    margin: 0;
  }

  /* UPLOAD LATER */
  .logo-settings-options-new .logo-upload-later {
    grid-column: 3;
    grid-row: 1;

    width: 100%;
    min-width: 0;
    margin: 0;
  }

  /* LOGO ON FILE */
  .logo-settings-options-new .logo-on-file {
    grid-column: 4;
    grid-row: 1;

    width: 100%;
    min-width: 0;
    margin: 0;
  }

  /* ALL THREE BUTTONS */
  .logo-settings-options-new .logo-upload,
  .logo-settings-options-new .logo-upload-later button,
  .logo-settings-options-new .logo-on-file button {
    width: 100%;
    height: 48px;
    min-height: 48px;
    min-width: 0;

    padding: 3px 3px;
    margin: 0;

    font-size: 12px;
    line-height: 1.1;
    text-align: center;
    white-space: normal;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
  }

}
@media screen and (max-width: 999px) {

  .logo-settings-options-new {
    display: grid !important;
    grid-template-columns: 45px 1fr 1fr 1fr !important;
    gap: 5px !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  /* Logo preview */
  .logo-settings-options-new .existing-logo {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: flex !important;
    width: 45px !important;
    height: 44px !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    justify-content: center;
    align-items: center;
  }

  #custom_logo_url {
    width: 42px !important;
    height: 42px !important;
  }

  #custom_logo_url img {
    max-width: 42px !important;
    max-height: 42px !important;
    width: auto !important;
    height: auto !important;
  }

  /* Explicit placement */
  .logo-settings-options-new .logo-upload {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  .logo-settings-options-new .logo-upload-later {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }

  .logo-settings-options-new .logo-on-file {
    grid-column: 4 !important;
    grid-row: 1 !important;
  }

  /* Kill old sizing on all controls */
  .logo-settings-options-new .logo-upload,
  .logo-settings-options-new .logo-upload-later,
  .logo-settings-options-new .logo-on-file {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Buttons */
  .logo-settings-options-new .logo-upload,
  .logo-settings-options-new .logo-upload-later button,
  .logo-settings-options-new .logo-on-file button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 44px !important;
    min-height: 44px !important;

    padding: 2px 4px !important;
    margin: 0 !important;

    font-size: 12px !important;
    line-height: 14px !important;
    white-space: normal !important;
    text-align: center !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;
  }

  .logo-settings-options-new .logo-upload span {
    display: block !important;
    width: 100% !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 14px !important;
  }

}
/* =========================================================
   INTERACTIVE PRODUCT LOGO PREVIEW
   ========================================================= */

.tl-logo-preview-tools {
  display: none;
  width: 100%;
  margin-top: 8px;
  box-sizing: border-box;
  text-align: center;
}


/* Subtle preview link */

.tl-logo-preview-toggle {
  width: auto;
  min-height: 0;
  padding: 0;
  margin: 0;

  border: 0;
  background: transparent;
  color: var(--heading-color);

  font: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;

  text-decoration: underline;
  text-underline-offset: 3px;

  cursor: pointer;
}

.tl-logo-preview-toggle:hover {
  opacity: 0.7;
}


/* Editor controls */

.tl-logo-preview-editor {
  padding: 14px 0 0;
  background: transparent;
}

.tl-logo-preview-editor[hidden] {
  display: none !important;
}

.tl-logo-preview-control-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.tl-logo-preview-control-row label {
  flex: 0 0 auto;
  margin: 0;

  font-size: 13px;
  font-weight: 600;
}

#tl-logo-preview-size {
  flex: 0 1 300px;
  min-width: 100px;
  margin: 0;
}

.tl-logo-preview-reset {
  flex: 0 0 auto;

  min-height: 0;
  padding: 0;

  border: 0;
  background: transparent;
  color: var(--heading-color);

  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 2px;

  cursor: pointer;
}

.tl-logo-preview-help {
  margin-top: 10px;

  font-size: 13px;
  line-height: 1.4;
}

.tl-logo-preview-disclaimer {
  margin-top: 5px;

  font-size: 11px;
  line-height: 1.4;
  color: #666;
}

/* =========================================================
   LOGO PREVIEW PLACEMENT ARROWS
   ========================================================= */

.tl-logo-preview-position-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  margin-top: 12px;
}

.tl-logo-preview-position-label {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}


/* Direction pad */

.tl-logo-preview-nudge-grid {
  display: grid;

  grid-template-columns: repeat(3, 36px);
  grid-template-rows: repeat(2, 36px);

  gap: 3px;

  align-items: center;
  justify-items: center;
}


/* All arrow buttons */

.tl-logo-preview-nudge {
  width: 36px;
  height: 36px;

  min-width: 36px;
  min-height: 36px;

  padding: 0;
  margin: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid var(--border-color);
  border-radius: 4px;

  background: var(--secondary-background);
  color: var(--heading-color);

  font: inherit;
  font-size: 18px;
  line-height: 1;

  cursor: pointer;

  box-sizing: border-box;
}

.tl-logo-preview-nudge:hover {
  opacity: 0.75;
}

.tl-logo-preview-nudge:active {
  transform: translateY(1px);
}

.tl-logo-preview-nudge:focus-visible {
  outline: 2px solid var(--heading-color);
  outline-offset: 2px;
}


/* Direction positions */

.tl-logo-preview-nudge-up {
  grid-column: 2;
  grid-row: 1;
}

.tl-logo-preview-nudge-left {
  grid-column: 1;
  grid-row: 2;
}

.tl-logo-preview-nudge-down {
  grid-column: 2;
  grid-row: 2;
}

.tl-logo-preview-nudge-right {
  grid-column: 3;
  grid-row: 2;
}


/* Mobile */

@media screen and (max-width: 749px) {

  .tl-logo-preview-position-row {
    gap: 10px;
    margin-top: 10px;
  }

  .tl-logo-preview-position-label {
    font-size: 12px;
  }

  .tl-logo-preview-nudge-grid {
    grid-template-columns: repeat(3, 40px);
    grid-template-rows: repeat(2, 40px);
  }

  .tl-logo-preview-nudge {
    width: 40px;
    height: 40px;

    min-width: 40px;
    min-height: 40px;

    font-size: 19px;
  }

}
/* =========================================================
   PRODUCT IMAGE PREVIEW OVERLAY
   ========================================================= */

/*
  This is important:
  the logo preview is positioned relative to the same
  container that holds the actual product image.
*/
.image__container {
  position: relative;
}


/* Overlay fills the product image container */

.tl-logo-preview-stage {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  z-index: 50 !important;

  overflow: hidden;
  pointer-events: none;
}


/* Customer's draggable logo */

.tl-logo-preview-object {
  position: absolute;

  left: 64%;
  top: 36%;

  width: 18%;

  transform: translate(-50%, -50%);

  padding: 2px;

  border: 1px dashed rgba(0, 0, 0, 0.55);

  box-sizing: border-box;

  z-index: 51 !important;

  cursor: grab;

  touch-action: none;

  user-select: none;
  -webkit-user-select: none;

  pointer-events: auto;
}

.tl-logo-preview-object.dragging {
  cursor: grabbing;
}


/* Actual uploaded logo */

/* Actual uploaded logo */

.tl-logo-preview-image {
  display: block !important;

  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  width: 100% !important;
  height: auto !important;

  max-width: none !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  transform: none !important;

  visibility: visible !important;
  opacity: 1 !important;

  object-fit: contain !important;

  pointer-events: none;

  user-select: none;
  -webkit-user-select: none;

  filter: drop-shadow(
    0 1px 1px rgba(0, 0, 0, 0.15)
  );
}

/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 749px) {

  .tl-logo-preview-tools {
    margin-top: 6px;
  }

  .tl-logo-preview-toggle {
    font-size: 12px;
  }

  .tl-logo-preview-editor {
    padding-top: 10px;
  }

  .tl-logo-preview-control-row {
    gap: 8px;
  }

  .tl-logo-preview-control-row label {
    font-size: 12px;
  }

  #tl-logo-preview-size {
    min-width: 80px;
  }

  .tl-logo-preview-reset {
    font-size: 12px;
  }

  .tl-logo-preview-help {
    font-size: 12px;
  }

  .tl-logo-preview-disclaimer {
    font-size: 10px;
  }

}