/** Shopify CDN: Minification failed

Line 3879:15 Unexpected ")"

**/
upload-controls {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
}

master-upload {
	background-color: #e6f6ff;
	border: 2px dashed #46aae3;
	border-radius: 12px;
	margin-left: auto;
	margin-right: auto;
	font-size: 18px;
	cursor: pointer;
	position: relative;
	min-height: 250px;
	display: flex;
	flex-direction: column;
	text-align: center;
	justify-content: center;
	align-items: center;
	margin-bottom: 20px;
  padding: 20px 4px 0;
	width: 100%;
}
master-upload[newdesign] {
	border-color: transparent;
}
master-upload[newdesign]::after {
	content: '';
	position: absolute;
	top: 10px;
	left: 10px;
	width: calc(100% - 20px);
	height: calc(100% - 20px);
	border: 2px dotted #07A7F24D;
  border-radius: 8px;
	z-index: 0;
}
master-upload[newdesign].drop-disabled-type::after{
  content: attr(err-type-msg);
  height: auto;
}
master-upload[newdesign].drop-disabled-size::after{
  content: attr(err-size-msg);
   height: auto;
}

master-upload:hover, .drop-zoon--over {
  box-shadow: 0 0 10px #46aae3;
}
master-upload[newdesign] .upload__icon {
	width: 72px;
	height: 72px;
	margin: 10px auto;
}
master-upload[newdesign] .upload__icon img {
	max-width: 100%;
}
master-upload[newdesign] .drop-zoon__paragraph {
	font-size: 19px;
}
master-upload[newdesign] ._or {
	font-size: 14px;
	margin-bottom: 14px;
}
master-upload[newdesign] #dropZoon > button {
	border: 1px solid #07A7F2;
	background-color: #07A7F2;
	padding: 13px 34px;
	border-radius: 10px;
	margin-bottom: 6px;
	font-size: 14px;
}
master-upload[newdesign] .access_old_data {
	margin-bottom: 20px;
}
master-upload[newdesign] .access_old_data a{
	position: relative;
	z-index: 5;
	font-weight:500;
}
another-upload[newdesign] .access_old_data a{
	font-weight:500;
}

master-upload.errType::before {
	content: attr(err-type-msg);
	position: absolute;
	width: 96%;
	height: auto;
	background-color: #c44e47;
	color: #fff;
	text-align: center;
	pointer-events: none;
	font-size: 12px;
	padding: 10px;
	border-radius: 8px;
	top: 12px;
	z-index: 3;
}
master-upload.errSize::after {
  content: attr(err-size-msg);
  position: absolute;
	width: 96%;
	height: auto;
	background-color: #c44e47;
	color: #fff;
	text-align: center;
	pointer-events: none;
	font-size: 12px;
	padding: 10px;
	border-radius: 8px;
	top: 12px;
	z-index: 3;
}
master-upload .upload__info {
  display: flex;
  border-radius: 15px;
  align-self: center;
  margin-bottom: 20px;
  background: #f8fcff;
  width: 95%;
}
master-upload .upload__info span {
  display: inline-block;
  margin-right: 5px;
  color: #479e30;
  font-weight: 800;
}
master-upload .upload__info {
  padding: 20px 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
master-upload .upload__info h3 {
  color: #000000;
  margin: 0 0 8px 0;
  font-weight: 700;
  font-size: 15px;
}
master-upload .upload__info p {
  font-size: 14px;
  font-weight: 300;
  margin: 0;
}
master-upload #dropZoon > button {
	border: 1px solid #46aae3;
	background-color: #46aae3;
	color: #fff;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 14px 30px;
	border-radius: 16px;
	margin-bottom: 10px;
	position: relative;
	cursor: pointer;
	font-weight: 600;
	z-index: 2;
	font-size: 15px;
}
master-upload:hover #dropZoon > button, .drop-zoon--over #dropZoon > button {
	background-color: #005192;
	color: #fff;
	box-shadow: 0 0 10px #46aae3;
}

file-progress {
	display: grid;
	grid-template-columns: 75px auto 50px;
	align-items: start;
	gap: 10px;
	position: relative;
}
.fileProgress .fileProgress__ninjaImg {
	max-width: 100%;
}
.fileProgress .fileProgress__msg {
	background-color: #cfefff;
	padding: 6px 10px;
	border-radius: 8px;
	display: flex;
	gap: 10px;
	max-width: 84%;
	margin: 0 auto;
	font-size: 10.5px;
	line-height: 1;
	align-items: center;
	color: #1480b7;
	font-weight: 500;
}
.fileProgress .fileProgress__msg svg {
	width: 30px;
	height: 30px;
	fill: #1480b7;
}
.fileProgress .fileProgress__msg p {
	margin-bottom: 0;
}
.fileProgress .fileProgress__loadingPercent {
	text-align: right;
}
.fileProgress .loadingPercent__counter {
	color: #c4c3c4;
}
.fileProgress .fileProgress__barWrap {
	position: absolute;
	left: 75px;
	top: 50px;
	width: calc(100% - 85px);
}
.fileProgress .fileProgress__barWrap::before {
	content: "";
	position: absolute;
	bottom: 5px;
	width: 100%;
	height: .7rem;
	background-color: #ebf2ff;
	border-radius: .625rem;
}
.fileProgress .fileProgress__bar {
	width: 0%;
	background-color: var(--clr-blue);
	animation-delay: .1s;
	background: url(/cdn/shop/files/New_beam.png) center no-repeat;
	background-size: auto;
	background-size: 100% 24px;
	bottom: 0;
	width: 0;
	height: .7rem;
	background-color: #ebf2ff;
	border-radius: .625rem;
  display: inline-block;
  position: relative;
}
.fileProgress .fileProgress__bar img {
	position: absolute;
	right: -14px;
	top: -8px;
	height: 28px;
}

.previewBlock_and_pricesTable {
	display: grid;
	grid-template-columns: auto 40%;
	gap: 10px;
}
preview-box {
	position: relative;
	padding-bottom: 20px;
}
/* Desktop: tighten the gap between the upload preview / toggle bar and
   the Custom Size / Popular Size tabs (was 35px combined with
   tab-controls margin-top; halved on desktop only). */
@media (min-width: 769px) {
	preview-box {
		padding-bottom: 10px;
	}
}
preview-box .stickyBox {
	position: sticky;
	top: 48px;
}
/* preview-box square/aspect handling now lives in transferBySize.css
   (search "preview-box (multiupload-rebuild)"). Kept there as the single
   source so single-upload `file-preview.square` rules stay isolated. */
preview-box .zoom-text +  .previewText {
	font-size: 0.8rem;
	text-align: center;
	margin: 4px auto 30px;
}
file-remove-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #0000009c;
	z-index: 999999999;
	display: grid;
	align-items: center;
}
file-remove-wrapper .fileRemoveBlock {
	background-color: #fff;
	max-width: 600px;
	width: 100%;
	height: auto;
	padding: 50px 20px 20px;
	position: relative;
	z-index: 1;
	display: grid;
	gap: 14px;
	margin: auto;
	border-radius: 8px;
	text-align: center;
}
file-remove-wrapper .fileRemoveBlock__close {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 30px;
	height: 30px;
	cursor: pointer;
	z-index: 1;
}
file-remove-wrapper .fileRemoveBlock__action {
	display: grid;
	gap: 12px;
}
file-remove-wrapper .fileRemoveBlock__action > button {
	width: 100%;
}
:has(upload-controls preview-box preview-block.image-loading)	upload-controls preview-box .zoom-text,
:has(upload-controls preview-box preview-block.image-loading)	upload-controls toggle-options,
:has(upload-controls preview-box preview-block.image-loading)	upload-controls tab-controls,
:has(upload-controls preview-box preview-block.image-loading)	upload-controls sizes-blocks,
:has(upload-controls preview-box preview-block.image-loading)	upload-controls prices-table,
:has(upload-controls preview-box preview-block.image-loading)	upload-controls another-upload,
:has(upload-controls preview-box preview-block.image-loading)	upload-controls proceed-to-checkout,
:has(upload-controls preview-box preview-block.image-loading)	upload-controls designer-notes,
:has(upload-controls preview-box preview-block.image-loading)	upload-controls precut {
	opacity: 0.5;
	pointer-events: none;
	position: relative;
}

:has(upload-controls preview-box preview-block.image-loading)	upload-controls .widthHeight__custom .widthHeight__item_inputWrapper,
:has(upload-controls preview-box preview-block.image-loading)	upload-controls .widthHeight__custom .precut-unit-logic__qty > div,
:has(upload-controls preview-box preview-block.image-loading)	upload-controls .widthHeight__item__popular > div {
	position: relative;
  color: transparent !important;
  background-color: #e0e0e0;
  border-color: #e0e0e0 !important;
	background-image: unset !important;
  pointer-events: none;
  user-select: none;
  overflow: hidden;
}

:has(upload-controls preview-box preview-block.image-loading)	upload-controls .widthHeight__custom .widthHeight__item_inputWrapper .widthHeight__value,
:has(upload-controls preview-box preview-block.image-loading)	upload-controls .widthHeight__custom .precut-unit-logic__qty > div > *,
:has(upload-controls preview-box preview-block.image-loading)	upload-controls .widthHeight__item__popular > div > * {
  color: transparent !important;
	background-color: transparent !important;
	border-color: transparent !important;
	opacity: 0;
}

:has(upload-controls preview-box preview-block.image-loading)	upload-controls .widthHeight__custom .widthHeight__item_inputWrapper::after,
:has(upload-controls preview-box preview-block.image-loading)	upload-controls .widthHeight__custom .precut-unit-logic__qty > div::after,
:has(upload-controls preview-box preview-block.image-loading)	upload-controls .widthHeight__item__popular > div::after {
	content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  ) !important;
  animation: shimmer 1.2s infinite ease-in-out !important;
  transition: opacity 0.4s ease !important;
  opacity: 1 !important;
	height: unset !important;
}
:has(upload-controls preview-box .fileupload_hero[src*="files/transparent.png"]) upload-controls preview-box .viewer-box {
	display: none !important;
}
:has(upload-controls preview-box preview-block.image-loading)	upload-controls preview-block .edit-with-ai {
	display: none;
}
@media (max-width: 1024px) {
	.previewBlock_and_pricesTable {
		grid-template-columns: auto;
	}
	preview-box {
		margin: auto;
	}
}
prices-table .pricesTable__title {
	font-weight: 700;
	color: #000;
	font-size: 14px;
	line-height: 100%;
}
@media (min-width: 1350px) {
	prices-table .pricesTable__title {
		white-space: nowrap;
	}
}
prices-table .pricesTable__subText {
	font-size: 14px;
	margin-top: 8px;
  margin-bottom: 20px;
  color: #000;
}
prices-table .pricesTable__table {
	border: 1px solid #e3e3e3;
  border-radius: 4px;
  font-size: 12px;
	margin-bottom: 5px;
	margin-top: 0px;
	font-family: inter;
}
prices-table .pricesTable__tableHeading {
	font-weight: 600;
	background-color: #ffffff;
	color: #000000;
	display: flex;
  align-items: center;
}
prices-table .pricesTable__tableHeading_1 {
	width: 100%;
	max-width: 40%;
	padding: 10px;
	position: relative;
}
prices-table .pricesTable__tableHeading_2 {
	width: 100%;
  max-width: 30%;
  padding: 10px;
  position: relative;
}
prices-table .pricesTable__tableHeading_3 {
	width: 100%;
  max-width: 30%;
  padding: 10px;
  position: relative;
	text-align: right;
}
@media (max-width: 1250px) {
	upload-controls prices-table .pricesTable__tableHeading_1 {
		padding: 10px 5px;
	}
	upload-controls prices-table .pricesTable__tableHeading_2 {
		padding: 10px 5px;
	}
	upload-controls prices-table .pricesTable__tableHeading_3 {
		padding: 10px 5px;
	}
}
prices-table .pricesTable__item {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
  transition: .2s all ease-in-out;
  border: 2px solid transparent;
  border-bottom: 1px solid #d8d8d8;
	font-size: 12px;
	position: relative;
}
prices-table .pricesTable__item::before {
  content: '';
  position: absolute;
  top: -2px; left: -2px;
  width: calc(100% + 4px);
  height: 0%;
  border: 2px solid #26af19;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: 0.2s all ease-in-out;
}
prices-table .pricesTable__item::after {
  content: '';
  position: absolute;
  top: -2px; left: -2px;
  width: calc(100% + 4px);
  height: 0%;
  z-index: -1;
  opacity: 0;
  transition: 0.2s all ease-in-out;
	background-color: #f3faf2;
}
prices-table .pricesTable__item.selected::before,
prices-table .pricesTable__item.selected::after {
  opacity: 1;
  animation: drawBorder 1s ease forwards;
}
@keyframes drawBorder {
  0%   {height: 0; }
  25%  {height: 0; }
  50%  {height: calc(100% + 4px); }
  100% {height: calc(100% + 4px); }
}
prices-table .pricesTable__item .pricesTable__item__msg {
	opacity: 0;
	visibility: hidden;
	height: 0;
	transition: 0.2s all ease-in-out;
}
prices-table .pricesTable__item.selected {
	border-bottom-color: transparent;
}
prices-table .pricesTable__item.selected .pricesTable__item__msg {
	opacity: 1;
	visibility: visible;
	height: auto;
}
upload-controls:has(prices-table .pricesTable__items .pricesTable__item[index="1"].selected) next-element prices-table .pricesTable__table_viewAll,
body:has(upload-controls next-element:not(.hidden)) a.pricingTable,
body:has(upload-controls next-element:not(.hidden)) .customTabs  {
	display: none;
}
upload-controls:has(prices-table .pricesTable__items:not(.showAll) .pricesTable__item[index="2"].selected) next-element prices-table .pricesTable__item[index="1"] {
	display: none;
}
upload-controls:has(prices-table .pricesTable__items:not(.showAll) .pricesTable__item[index="3"].selected) next-element prices-table .pricesTable__item[index="1"],
upload-controls:has(prices-table .pricesTable__items:not(.showAll) .pricesTable__item[index="3"].selected) next-element prices-table .pricesTable__item[index="2"] {
	display: none;
}
upload-controls:has(prices-table .pricesTable__items:not(.showAll) .pricesTable__item[index="4"].selected) next-element prices-table .pricesTable__item[index="1"],
upload-controls:has(prices-table .pricesTable__items:not(.showAll) .pricesTable__item[index="4"].selected) next-element prices-table .pricesTable__item[index="2"],
upload-controls:has(prices-table .pricesTable__items:not(.showAll) .pricesTable__item[index="4"].selected) next-element prices-table .pricesTable__item[index="3"] {
	display: none;
}
upload-controls:has(prices-table .pricesTable__items:not(.showAll) .pricesTable__item[index="5"].selected) next-element prices-table .pricesTable__item[index="1"],
upload-controls:has(prices-table .pricesTable__items:not(.showAll) .pricesTable__item[index="5"].selected) next-element prices-table .pricesTable__item[index="2"],
upload-controls:has(prices-table .pricesTable__items:not(.showAll) .pricesTable__item[index="5"].selected) next-element prices-table .pricesTable__item[index="3"],
upload-controls:has(prices-table .pricesTable__items:not(.showAll) .pricesTable__item[index="5"].selected) next-element prices-table .pricesTable__item[index="4"] {
	display: none;
}

upload-controls sizes-blocks {
	/* border-top: 1px solid #D9D9D9;
	padding-top: 10px; */
}
upload-controls sizes-blocks .add-more-block {
	padding-bottom: 10px !important;
}
upload-controls sizes-blocks .add-more-block .addmore_size {
	padding: 4px 0;
}
upload-controls sizes-blocks .widthHeight__custom[option-selected="custom"],
upload-controls sizes-blocks .widthHeight__custom[option-selected="popular"] {
	border-bottom: 1px solid #D9D9D9;
	margin-top: 14px;
}
upload-controls sizes-blocks .widthHeight__custom[option-selected="custom"]:first-child,
upload-controls sizes-blocks .widthHeight__custom[option-selected="popular"]:first-child {
	margin-top: 0px;
}
upload-controls sizes-blocks .widthHeight__custom[option-selected="popular"]:last-child {
	margin-bottom: 0px;
}
upload-controls sizes-blocks line-items-custom:empty,
upload-controls sizes-blocks line-items-popular:empty {
	display: none;
}
upload-controls sizes-blocks:has(line-items-custom .widthHeight__custom) .widthHeight__custom[option-selected="popular"]:first-child {
	margin-top: 14px !important;
}
upload-controls sizes-blocks:not(:has(line-items-custom .widthHeight__custom)) line-items-custom {
	display: none;
}

multi-upload:has(prices-table .pricesTable__items .pricesTable__item[index="1"].selected) prices-table .pricesTable__table_viewAll {
	display: none;
}
multi-upload:has(prices-table .pricesTable__items:not(.showAll) .pricesTable__item[index="2"].selected) prices-table .pricesTable__item[index="1"] {
	display: none;
}
multi-upload:has(prices-table .pricesTable__items:not(.showAll) .pricesTable__item[index="3"].selected) prices-table .pricesTable__item[index="1"],
multi-upload:has(prices-table .pricesTable__items:not(.showAll) .pricesTable__item[index="3"].selected) prices-table .pricesTable__item[index="2"] {
	display: none;
}
multi-upload:has(prices-table .pricesTable__items:not(.showAll) .pricesTable__item[index="4"].selected) prices-table .pricesTable__item[index="1"],
multi-upload:has(prices-table .pricesTable__items:not(.showAll) .pricesTable__item[index="4"].selected) prices-table .pricesTable__item[index="2"],
multi-upload:has(prices-table .pricesTable__items:not(.showAll) .pricesTable__item[index="4"].selected) prices-table .pricesTable__item[index="3"] {
	display: none;
}
multi-upload:has(prices-table .pricesTable__items:not(.showAll) .pricesTable__item[index="5"].selected) prices-table .pricesTable__item[index="1"],
multi-upload:has(prices-table .pricesTable__items:not(.showAll) .pricesTable__item[index="5"].selected) prices-table .pricesTable__item[index="2"],
multi-upload:has(prices-table .pricesTable__items:not(.showAll) .pricesTable__item[index="5"].selected) prices-table .pricesTable__item[index="3"],
multi-upload:has(prices-table .pricesTable__items:not(.showAll) .pricesTable__item[index="5"].selected) prices-table .pricesTable__item[index="4"] {
	display: none;
}
prices-table .pricesTable__item:last-child {
	border-bottom-color: transparent;
}
prices-table .pricesTable__item_1 {
	max-width: 40%;
	padding: 10px;
	text-align: left;
  width: 100%;
	font-weight: 500;
}
prices-table .pricesTable__item_2 {
	max-width: 30%;
	padding: 10px;
	text-align: left;
  width: 100%;
}
/* (removed 2026-07-01) The popup used to hide the Price column
   (opacity:0/visibility:hidden on _2 cells) — the on-page pricing table shows
   Total Qty | Price | Discount, and the popup now mirrors it (Owen: "replace
   table and guarantee in the right with what's on page"). */
prices-table .pricesTable__item_2 discount {
	font-weight: 500;
	font-size: 14px;
}
prices-table .pricesTable__item_3 {
	max-width: 30%;
	padding: 10px;
	text-align: right;
  width: 100%;
	font-weight: 600;
}
prices-table .pricesTable__item__msg {
	display: block;
	width: 100%;
	padding: 4px 10px 10px;
	color: #000;
	margin-top: -8px;
	font-size: small;
}
@media (max-width: 1250px) {
	upload-controls prices-table .pricesTable__item_1 {
		padding: 10px 5px;
	}
	upload-controls prices-table .pricesTable__item_2 {
		padding: 10px 5px;
	}
	upload-controls prices-table .pricesTable__item_3 {
		padding: 10px 5px;
	}
	upload-controls prices-table .pricesTable__item__msg {
		padding: 4px 5px 10px;
	}
}
prices-table .pricesTable__table_viewAll {
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 5px;
	background-color: #e2e2e2;
	cursor: pointer;
}
prices-table .pricesTable__table_viewAll:not(.view) {
	background-color: transparent;
}
prices-table .pricesTable__table_viewAll svg {
	transition: 0.2s all ease-in-out;
}
prices-table .pricesTable__table_viewAll.view::after {
	position: relative;
	content: attr( view-all );
}
prices-table .pricesTable__table_viewAll:not(.view) svg {
	transform: rotate(90deg);
}
prices-table .pricesTable__table_viewAll:not(.view)::after {
	position: relative;
	content: attr( view-hide );
}
tab-controls {
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
	gap: 36px;
	margin-top: 15px;
	margin-bottom: 12px;
	transition: 0.2s all ease-in-out;
	border-bottom: 1px solid #ddd;
}
/* Desktop pairs with the halved preview-box padding-bottom above to cut
   the upload→tabs gap in half on desktop only (mobile stays 15px). */
@media (min-width: 769px) {
	tab-controls {
		margin-top: 7px;
	}
}
tab-controls .tabLink {
	position: relative;
	padding: 10px 0px 10px 30px;
	color: #000;
	cursor: pointer;
	display: inline-block;
	font-weight: bold;
	background-repeat: no-repeat;
	background-position: center left;
	background-size: 22px;
	opacity: 0.5;
	transition: 0.2s all ease-in-out;
}
tab-controls .tabOptionName:checked + .tabLink {
	opacity: 1;
}
tab-controls .tabOptionName:checked + .tabLink::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 4px;
	background-color: #000;
	transition: all .3s ease-in-out;
	width: 100%;
}
tab-controls .tabOptionName[value="custom"] + .tabLink {
	background-image: url("data:image/svg+xml,%3Csvg width='19' height='19' viewBox='0 0 19 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.11111 19C1.53056 19 1.03356 18.7933 0.620139 18.3799C0.206713 17.9664 0 17.4694 0 16.8889V4.22222H14.7778V19H2.11111ZM2.11111 15.8333H12.6667L9.07778 11.0833L6.33333 14.7778L4.64444 12.5083L2.11111 15.8333ZM2.11111 2.11111H0C0 1.53056 0.206713 1.03356 0.620139 0.620139C1.03356 0.206713 1.53056 0 2.11111 0V2.11111ZM4.22222 2.11111V0H6.33333V2.11111H4.22222ZM8.44444 2.11111V0H10.5556V2.11111H8.44444ZM12.6667 2.11111V0H14.7778V2.11111H12.6667ZM16.8889 2.11111V0C17.4694 0 17.9664 0.206713 18.3799 0.620139C18.7933 1.03356 19 1.53056 19 2.11111H16.8889ZM16.8889 16.8889H19C19 17.4694 18.7933 17.9664 18.3799 18.3799C17.9664 18.7933 17.4694 19 16.8889 19V16.8889ZM16.8889 14.7778V12.6667H19V14.7778H16.8889ZM16.8889 10.5556V8.44444H19V10.5556H16.8889ZM16.8889 6.33333V4.22222H19V6.33333H16.8889Z' fill='black'/%3E%3C/svg%3E");
}
tab-controls .tabOptionName[value="popular"] + .tabLink {
	background-image: url("data:image/svg+xml,%3Csvg width='19' height='19' viewBox='0 0 19 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.5 12.3025L12.1363 14.2975C12.3263 14.4242 12.5162 14.4281 12.7062 14.3094C12.8962 14.1906 12.9517 14.0204 12.8725 13.7987L11.875 10.4975L14.4637 8.645C14.6537 8.5025 14.7092 8.32438 14.63 8.11063C14.5508 7.89687 14.4004 7.79 14.1788 7.79H11.02L9.95125 4.3225C9.87208 4.10083 9.72167 3.99 9.5 3.99C9.27833 3.99 9.12792 4.10083 9.04875 4.3225L7.98 7.79H4.82125C4.59958 7.79 4.44917 7.89687 4.37 8.11063C4.29083 8.32438 4.34625 8.5025 4.53625 8.645L7.125 10.4975L6.1275 13.7987C6.04833 14.0204 6.10375 14.1906 6.29375 14.3094C6.48375 14.4281 6.67375 14.4242 6.86375 14.2975L9.5 12.3025ZM9.5 19C8.18583 19 6.95083 18.7506 5.795 18.2519C4.63917 17.7531 3.63375 17.0763 2.77875 16.2213C1.92375 15.3663 1.24687 14.3608 0.748125 13.205C0.249375 12.0492 0 10.8142 0 9.5C0 8.18583 0.249375 6.95083 0.748125 5.795C1.24687 4.63917 1.92375 3.63375 2.77875 2.77875C3.63375 1.92375 4.63917 1.24687 5.795 0.748125C6.95083 0.249375 8.18583 0 9.5 0C10.8142 0 12.0492 0.249375 13.205 0.748125C14.3608 1.24687 15.3663 1.92375 16.2213 2.77875C17.0763 3.63375 17.7531 4.63917 18.2519 5.795C18.7506 6.95083 19 8.18583 19 9.5C19 10.8142 18.7506 12.0492 18.2519 13.205C17.7531 14.3608 17.0763 15.3663 16.2213 16.2213C15.3663 17.0763 14.3608 17.7531 13.205 18.2519C12.0492 18.7506 10.8142 19 9.5 19ZM9.5 17.1C11.6058 17.1 13.399 16.3598 14.8794 14.8794C16.3598 13.399 17.1 11.6058 17.1 9.5C17.1 7.39417 16.3598 5.60104 14.8794 4.12063C13.399 2.64021 11.6058 1.9 9.5 1.9C7.39417 1.9 5.60104 2.64021 4.12063 4.12063C2.64021 5.60104 1.9 7.39417 1.9 9.5C1.9 11.6058 2.64021 13.399 4.12063 14.8794C5.60104 16.3598 7.39417 17.1 9.5 17.1Z' fill='black'/%3E%3C/svg%3E%0A");
}
tab-controls .tabOptionName[value="custom"] + .tabLink:hover,
tab-controls .tabOptionName[value="popular"] + .tabLink:hover {
	opacity: 1;
}


toggle-options {
	/* display: flex;
	align-items: center;
	gap: 10px;
  margin: 0px auto 12px;
  max-width: max-content;
	flex-wrap: wrap; */
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 35px 0 12px auto;
	max-width: calc(100% - 7px);  
	margin-right: 0;
	    width: 100%;
}

@media (max-width: 768px) {
	upload-controls toggle-options {
		max-width: calc(100% - 0px);
	}
	toggle-options{
		flex-direction: column;
  align-items: flex-start;
	}
	toggle-options .switch{
		flex:unset !important;
		width: 100%;
	}
}

toggle-options input[type="checkbox"] {
	display: none;
}
toggle-options[show-bg-option="false"][show-superres-option="false"] {
  display: none;
}
toggle-options[show-bg-option="false"] .bgRemover,
toggle-options[show-superres-option="false"] .superRes {
  display: none;
}
toggle-options .switch {
	display: flex;
	height: 20px;
	position: relative;
	padding-left: 45px;
	align-items: center;
	font-weight: 500;
	font-size: 11px;
	white-space: nowrap; 
	flex:1;
	padding: 23px 12px;
	background-color: #F5F9FB;
	border-radius: 10px;
	gap: 10px;
	color: #000;
}

toggle-options .switch img{
	height: 22px !important;
}


toggle-options .slider {
	background-color: #00000080;
	/* bottom: 0; */
	cursor: pointer;
	/* left: 0; */
	position: relative;
	/* right: unset; */
	/* top: 0; */
	width: 27px;
	height: 15px;
	border-radius: 999px;
	transition: 0.5s all ease-in-out;
	margin-left: auto;
}
toggle-options .slider::before {
	background-color: #fff;
	bottom: 3px;
	content: "";
	height: 9px;
	left: 3px;
	position: absolute;
	transition: 0.4s;
	width: 9px;
	border-radius: 99px;
	transition: 0.5s all ease-in-out;
}
toggle-options .switch .toggleOption:checked + .slider {
	background-color: #019AFF;
}
toggle-options .switch .toggleOption:checked + .slider::before {
	left: calc(100% - 12px);
}

/* Hover states for the post-upload tools row (Remove Background, Upscale).
   "Slider knob wake up" treatment — no bg pill (would fight the adjacent
   .edit-with-ai white pill), just contrast nudges: text darkens, slider
   track darkens. Specificity matches the inline rules in bySizeNew.liquid
   that pin .switch's color/bg/etc., so we win the cascade for :hover. */
.multiupload-rebuild-tools-inner toggle-options .switch,
toggle-options .switch {
	cursor: pointer;
	transition: color 0.15s ease;
}
.multiupload-rebuild-tools-inner toggle-options .switch:hover {
	color: #000;
}
.multiupload-rebuild-tools-inner toggle-options .switch:hover .slider {
	background-color: #000;
}
.multiupload-rebuild-tools-inner toggle-options .switch:hover .toggleOption:checked + .slider {
	background-color: #5BC02E;
}
.edit-with-ai {
	transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.edit-with-ai:hover {
	background-color: #FAFBFC;
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
	transform: translateY(-1px);
}

line-items-custom,
line-items-popular {
	display: grid;
	gap: 10px;
}
upload-controls .sizeGuideTrigger {
	margin-bottom: 10px;
}
upload-controls .sizeGuideTrigger a {
	font-weight: 600;
	color: #1480b7;
}
upload-controls .popularOptionContent {
	margin-bottom: 10px;
	display: none;
}
:has(upload-controls tab-controls #popularSizeTabOption:checked) upload-controls .popularOptionContent {
	display: block;
}


:has(upload-controls tab-controls #popularSizeTabOption:checked) upload-controls sizes-blocks:not(.has-custom-edit) line-items-custom {
	display: none;
}
:has(upload-controls tab-controls #customSizeTabOption:checked) upload-controls sizes-blocks:not(.has-popular-edit) line-items-popular {
	display: none;
}
/* Hide custom rows in a multi-upload block until that same block has a custom edit while Popular is active. */
multi-upload uploaded-files-block:has(tab-controls .tabOptionName[value="popular"]:checked) sizes-blocks:not(.has-custom-edit) line-items-custom {
	display: none;
}
/* Hide popular rows in a multi-upload block until that same block has a popular edit while Custom is active. */
multi-upload uploaded-files-block:has(tab-controls .tabOptionName[value="custom"]:checked) sizes-blocks:not(.has-popular-edit) line-items-popular {
	display: none;
}

upload-controls sizes-blocks .del_item {
	transition: 0.2s all ease-in-out;
}
upload-controls sizes-blocks[total-items="1"] .del_item {
	opacity: 0;
	visibility: hidden;
}
upload-controls sizes-blocks .widthHeight__custom[discount="0"] precut-unit-logic .__originalPrice,
upload-controls sizes-blocks .widthHeight__custom[discount=""] precut-unit-logic .__originalPrice,
upload-controls sizes-blocks .widthHeight__custom[discount="0"] precut-unit-logic .precut-unit-logic__discount > span,
upload-controls sizes-blocks .widthHeight__custom[discount=""] precut-unit-logic .precut-unit-logic__discount > span {
	display: none;
	opacity: 0;
	visibility: hidden;
}
upload-controls sizes-blocks .widthHeight__custom[option-selected] dpi-warning {
	position: relative;
	top: -12px;
	font-size: 12px;
	font-weight: 500;
	color: #f80;
	height: 0;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
}
upload-controls sizes-blocks .widthHeight__custom[option-selected="custom"] dpi-warning {
	grid-column: 1/3;
}
upload-controls sizes-blocks .widthHeight__custom[option-selected="popular"] dpi-warning {
	grid-column: 1/2;
}
upload-controls sizes-blocks:not(:has(line-items-popular .widthHeight__custom)) line-items-popular {
	display: none;
}
@media (max-width: 768px) {
  upload-controls sizes-blocks precut-unit-logic .precut-unit-logic__grid {
    grid-template-columns: 25% 22% 25% 25%;
    gap: 4px;
  }
  upload-controls sizes-blocks .widthHeight__custom[option-selected="custom"] precut-unit-logic {
    grid-column: 1/3;
  }
  upload-controls sizes-blocks precut-unit-logic .precut-unit-logic__grid .precut-unit-logic__price {
    margin-left: 6px;
  }
	upload-controls sizes-blocks precut-unit-logic .precut-unit-logic__qty::before {
		color: #000000b2;
		font-size: 12px;
    font-weight: 600;
	}
	sizes-blocks .widthHeight__custom .widthHeight__item__popular::before {
		color: #000000b2;
		font-size: 12px;
		font-weight: 600;
	}
	upload-controls sizes-blocks precut-unit-logic .precut-unit-logic__price::before,
	upload-controls sizes-blocks precut-unit-logic .precut-unit-logic__total::before {
		opacity: 1;
	}
	upload-controls sizes-blocks precut-unit-logic .precut-unit-logic__grid .precut-unit-logic__discount {
		margin-top: 20px;
	}
	upload-controls sizes-blocks .widthHeight__custom[option-selected="custom"],
	upload-controls sizes-blocks .widthHeight__custom[option-selected="popular"] {
		margin-top: -6px;
	}
	upload-controls sizes-blocks .widthHeight__custom[option-selected][dpi-warning="Yes"] precut-unit-logic {
		margin-top: -10px;
	}
	upload-controls sizes-blocks:not(:has(line-items-popular .widthHeight__custom)) line-items-popular {
		display: none;
	}
}
upload-controls sizes-blocks .widthHeight__custom .widthHeight__item .widthHeight__item_inputWrapper {
	border: 1px solid #b2b2b2;
	display: flex;
	border-radius: 6px;
	position: relative;
	align-items: center;
	outline: 1px solid transparent;
}
upload-controls sizes-blocks .widthHeight__customHeader {
	gap: 10px;
}
upload-controls sizes-blocks .widthHeight__custom {
	gap: 10px !important;
}
upload-controls sizes-blocks .widthHeight__custom .widthHeight__item .widthHeight__value-minus,
upload-controls sizes-blocks .widthHeight__custom .widthHeight__item .widthHeight__value-plus {
	background-color: transparent;
	height: 100%;
	font-size: 20px;
}
upload-controls sizes-blocks .widthHeight__custom .widthHeight__item .widthHeight__value-minus {
	padding: 0 0 0 14px;
	font-size: 24px;
}
upload-controls sizes-blocks .widthHeight__custom .widthHeight__item .widthHeight__value-plus {
	padding: 0 14px 0 0;
	font-size: 24px;
}
upload-controls sizes-blocks .widthHeight__custom .widthHeight__item .widthHeight__value {
	width: 100%;
	max-width: 100%;
	text-align: center;
	border: none;
	outline: none;
	padding: 14.5px 4px;
	background-color: transparent;
}
upload-controls sizes-blocks .widthHeight__value.error,
upload-controls sizes-blocks .widthHeight__value.error {
	border: 1px solid transparent !important;
}
upload-controls sizes-blocks .widthHeight__custom .widthHeight__item:has(.widthHeight__value.error) .widthHeight__item_inputWrapper,
upload-controls sizes-blocks .widthHeight__custom .widthHeight__item:has(.widthHeight__value.minError) .widthHeight__item_inputWrapper {
	border: 1px solid #f00;
	outline: 1px solid #f00;
}
upload-controls sizes-blocks .widthHeight__custom .widthHeight__item .widthHeight__value:focus-visible {
	box-shadow: unset;
}
upload-controls sizes-blocks .widthHeight__item:has(.widthHeight__value.minError) .widthHeight__item_minErr.hidden,
upload-controls sizes-blocks .widthHeight__item:has(.widthHeight__value.error) .widthHeight__item_err.hidden {
	color: #f00;
	font-size: 12px;
}
upload-controls sizes-blocks precut-unit-logic .precut-unit-logic__grid {
	grid-template-columns: 74px 25% 25% auto;
	max-width: calc(100% - 13px);
	gap: 10px;
}
@media (min-width: 769px) {
	upload-controls sizes-blocks .widthHeight__custom[option-selected="popular"] {
		grid-template-columns: calc(40% + 10px) 60% !important;
	}
}
@media (max-width: 768px) {
	upload-controls sizes-blocks precut-unit-logic .precut-unit-logic__grid {
		grid-template-columns: 74px 25% 25% auto !important;
		max-width: calc(100% - 0px);
		column-gap: 8px;
	}
	upload-controls sizes-blocks precut-unit-logic .precut-unit-logic__discount span {
		white-space: nowrap;
	}
	upload-controls sizes-blocks .widthHeight__custom[option-selected="custom"] {
		grid-template-columns: calc(50% - 4px) calc(50% - 4px) !important;
	}
	upload-controls sizes-blocks .widthHeight__custom[option-selected] {
		margin-bottom: 6px;
		padding-bottom: 10px;
	}
	upload-controls sizes-blocks .widthHeight__custom {
		gap: 6px 10px !important;
	}
	upload-controls sizes-blocks:has(line-items-custom .widthHeight__custom) .widthHeight__custom[option-selected="popular"]:first-child {
		margin-top: -8px !important;
	}
	upload-controls sizes-blocks:not(:has(line-items-popular .widthHeight__custom)) .add-more-block {
		margin-top: -6px;
	}
	upload-controls sizes-blocks .widthHeight__custom .widthHeight__item .widthHeight__value-minus,
	upload-controls sizes-blocks .widthHeight__custom .widthHeight__item .widthHeight__value-plus {
		font-size: 18px;
	}
}
@media (max-width: 450px) {
	upload-controls sizes-blocks precut-unit-logic .precut-unit-logic__grid {
		column-gap: 8px;
	}
}
@media (max-width: 375px) {
	upload-controls sizes-blocks precut-unit-logic .precut-unit-logic__grid {
		max-width: calc(100% - 13px);
	}
}
upload-controls precut-unit-logic .precut-unit-logic__grid .__originalPrice {
	color: #A0A0A0;
  font-size: 10px;
}
upload-controls sizes-blocks precut-unit-logic .precut-unit-logic__grid .__discountedPrice {
	font-size: 14px;
}
upload-controls sizes-blocks precut-unit-logic .precut-unit-logic__grid .precut-unit-logic__discount {
	color: #22A614 !important;
	font-size: 14px;
	justify-content: end;
}
upload-controls sizes-blocks precut-unit-logic .precut-unit-logic__grid .precut-unit-logic__price {
	align-self: center;
}
upload-controls sizes-blocks precut-unit-logic .precut-unit-logic__total {
	align-self: center;
}
upload-controls sizes-blocks .del_item svg {
	fill: #E7E7E7;
}
upload-controls sizes-blocks .widthHeight__custom[dpi-warning="Yes"] dpi-warning {
	height: auto;
  overflow: unset;
  opacity: 1;
  visibility: visible;
	margin-top: 4px;
}
upload-controls sizes-blocks .widthHeight__custom[dpi-warning="Yes"] .widthHeight__item_inputWrapper {
	border: 1px solid #FF8800 !important;
	outline: 1px solid #FF8800 !important;
}
upload-controls sizes-blocks .widthHeight__custom[dpi-warning="Yes"] .widthHeight__item__popular .popularSizes {
	border: 1px solid #FF8800 !important;
	outline: 1px solid #FF8800 !important;
	box-shadow: none;
}

upload-controls sizes-blocks .widthHeight__custom.active:has(.widthHeight__item .widthHeight__item_inputWrapper .widthHeight__value:focus) .widthHeight__item_inputWrapper,
upload-controls sizes-blocks .widthHeight__custom.active:has(.widthHeight__item .widthHeight__item_inputWrapper .widthHeight__value:active) .widthHeight__item_inputWrapper,
upload-controls sizes-blocks .widthHeight__custom.active:has(.widthHeight__item .widthHeight__item_inputWrapper .widthHeight__value:focus-visible) .widthHeight__item_inputWrapper,
upload-controls sizes-blocks .widthHeight__custom.active precut-unit-logic .customQtyFile__qty:focus,
upload-controls sizes-blocks .widthHeight__custom.active precut-unit-logic .customQtyFile__qty:active,
upload-controls sizes-blocks .widthHeight__custom.active precut-unit-logic .customQtyFile__qty:focus-visible {
	border: 1px solid #000;
}
upload-controls sizes-blocks .widthHeight__custom.active precut-unit-logic .customQtyFile__qty.error {
	border: 1px solid #FF0000;
	outline: 1px solid #FF0000 !important;
}
upload-controls sizes-blocks precut-unit-logic:has(.customQtyFile__qty.error) qty-error {
	font-size: 12px;
	font-weight: 500;
}
@media (max-width: 1024px) {
	upload-controls sizes-blocks .widthHeight__custom .widthHeight__item .widthHeight__value {
		width: calc(100% - 6px);
	}
}
upload-controls sizes-blocks .widthHeight__custom .popularSizes {
	padding: 14.5px 12px;
}
upload-controls sizes-blocks .widthHeight__custom precut-unit-logic .customQtyFile__qty {
	padding: 14.5px 9px;
	border: 1px solid #b2b2b2;
	border-radius: 6px;
	color: #000;
}
upload-controls sizes-blocks .widthHeight__custom precut-unit-logic .customQtyFile__qty:focus-visible {
	box-shadow: none;
}
upload-controls sizes-blocks .widthHeight__custom precut-unit-logic precut-unit-logic__qty:has(.customQtyFile__qty:focus-visible),
upload-controls sizes-blocks .widthHeight__custom precut-unit-logic precut-unit-logic__qty:has(.customQtyFile__qty:active) {
	border-color: #000;
}
upload-controls select {
	background-position: calc(100% - 10px) center;
}
.designerNote_and_preCut {
	display: grid;
	/* Two-column layout: design-note (.nt-design-note) on the left,
	   precut (<precut>) on the right, 50/50. Stretch so both children
	   fill the row height equally; their internal flex/grid centers
	   content vertically. Stacks on mobile.
	   border-bottom creates a separator between this row and the
	   following content ("Add another size" link / upload dropzone)
	   so the design-notes section visually closes off — matching the
	   puff layout per design spec. */
	grid-template-columns: repeat(2, 1fr);
	align-items: stretch;
	gap: 20px;
	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: 1px solid #ddd;
}
/* When the .add-more-block ("Add another size of this design") sits
   directly after the design-notes row, drop its border-top so we
   don't get a double line right against the design-notes' new
   border-bottom. */
.designerNote_and_preCut + .add-more-block {
	border-top: 0 !important;
	padding-top: 0 !important;
	margin-top: 0;
}
@media (max-width: 768px) {
	.designerNote_and_preCut {
		grid-template-columns: 1fr;
	}
}
/* Multi-upload tiles render .designerNote_and_preCut inside a much
   narrower column than the main PDP layout, so the default 2-column
   grid squeezes the precut row below its label width. Force the same
   single-column layout used on mobile so the precut row spans the
   wrapper width.

   Keep `white-space: nowrap` so the row stays on a single line, but
   knock the font down ~10% (13px → 11.7px) so the "Want to save time?
   Yes, Pre-cut transfers" text plus info icon fit horizontally inside
   the wrapper. With single-column + smaller font + nowrap, there's no
   ellipsis truncation and no second-line wrap of the info icon. */
multi-upload-wrapper .designerNote_and_preCut {
	grid-template-columns: 1fr;
}
/* Multi-upload precut — desktop base size per design ask. Font-size
   progression: 8.7 → 9.1 → 9.55 → 10.5 → 11.55 (~10% bumps each).
   The label inherits the base `.precut__label` rule (white-space:
   nowrap; overflow: hidden; text-overflow: ellipsis) so it truncates
   cleanly when the "$0.19 each" cost takes space on the right; that
   natural truncation hides the info icon at the end of the label too,
   matching the design's "selected" state. The explicit :checked rule
   further down belts-and-suspenders this on viewports wide enough
   that the label could still fit the icon. */
multi-upload-wrapper precut {
	font-size: 11.55px;
}
/* Mobile multi-upload — bumped another 15% on top of the desktop size
   (11.55 × 1.15 ≈ 13.28px) because the tile is the full viewport
   width on phones and the row reads small at the desktop value. */
@media (max-width: 767px) {
	multi-upload-wrapper precut {
		font-size: 13.28px;
	}
}
multi-upload-wrapper precut .precut__row {
	gap: 6px;
	padding-left: 8px;
	padding-right: 8px;
}
multi-upload-wrapper precut .precut__info {
	width: 12px;
	height: 12px;
	margin-left: 4px;
}
multi-upload-wrapper precut .precut__info .infoIcon {
	width: 12px;
	height: 12px;
}
/* Hide the info tooltip icon once the customer has CHECKED the precut
   box — at that point they've made their decision, and the icon was
   only redundantly squeezing the row alongside "$0.19 each". Applies
   to BOTH single-upload and multi-upload contexts (the multi-upload
   scope was dropped after the single-upload row on mobile was reported
   still showing the icon), and on every viewport. */
precut input[type="checkbox"]:checked ~ .precut__label .precut__info {
	display: none !important;
}

/* ===== Puff / Glitter Puff / Spangle mobile after-upload =====
   Once the customer has uploaded a design (body.image-uploaded), hide
   the variant product video on mobile so the uploaded preview sits as
   close to the top of the viewport as possible. The gallery / carousel
   stays visible per prior design decision; only the video block is
   suppressed. Scoped per-template + mobile only. */
@media (max-width: 767px) {
	body.template-product-puff-transfers.image-uploaded .video-box,
	body.template-product-puff-transfers.image-uploaded .video-box.video-wrapper,
	body.template-product-puff-glitter.image-uploaded .video-box,
	body.template-product-puff-glitter.image-uploaded .video-box.video-wrapper,
	body.template-product-spangle-by-size.image-uploaded .video-box,
	body.template-product-spangle-by-size.image-uploaded .video-box.video-wrapper {
		display: none !important;
	}
}

/* ===== DTF Transfers By Size (template by-size-bg-options) after-upload =====
   Once a design is uploaded (body.image-uploaded), hide the standalone
   "SEE..." explainer video on /products/dtf-transfers. Unlike the puff /
   glitter / spangle block above (mobile-only), this PDP shows the video on
   DESKTOP both before AND after upload; on mobile it is already hidden
   unconditionally by product-gallery.liquid. So this rule (all viewports)
   closes the desktop gap and is a harmless no-op on mobile. Template-scoped
   to dtf-transfers only — product-gallery's .video-box markup is shared
   across many PDP surfaces, so the body template class prevents spillover.
   Reversible: keyed on .image-uploaded, which is removed when the design is
   cleared, so the video reappears. */
body.template-product-by-size-bg-options.image-uploaded .video-box,
body.template-product-by-size-bg-options.image-uploaded .video-box.video-wrapper {
	display: none !important;
}
designer-notes {
	font-size: 13px;
}
designer-notes [type=checkbox] + label {
	cursor: pointer;
	z-index: 3;
	margin-bottom: 0;
	position: relative;
	padding-left: 26px;
	margin-bottom: 8px;
	display: inline-block;
}
designer-notes [type=checkbox] + label i {
	-webkit-transition: border-color .28s ease;
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	color: #ccc;
	left: 0;
	top: 2px;
	transition: border-color .28s ease;
	height: 20px;
	width: 20px;
	z-index: 0;
	border: 1px solid;
	position: absolute;
}
designer-notes textarea {
	width: 100%;
	height: 80px;
	display: none;
}
designer-notes [type=checkbox] + label i::before {
	height: 0;
	width: 2px;
	background: #fff;
	transform-origin: left top;
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	content: "";
	opacity: 0;
	position: absolute;
	transform: rotate(-138deg);
}
designer-notes [type=checkbox] + label i::after {
	height: 0;
	width: 2px;
	background: #fff;
	transform-origin: left top;
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	content: "";
	opacity: 0;
	position: absolute;
	transform: rotate(-45deg);
}
designer-notes [type=checkbox]:checked + label + textarea {
	display: block;
}
designer-notes [type=checkbox]:checked + label i {
	background-color: #03a3f7;
	border-color: #03a3f7;
}
designer-notes [type=checkbox]:checked + label i::before {
	opacity: 1;
	transition-delay: .28s;
	transition: height .28s ease;
	height: 14px;
	top: 15px;
	left: 8px;
}
designer-notes [type=checkbox]:checked + label i::after {
	content: "";
	-webkit-transition: height .28s ease;
	opacity: 1;
	transition: height .28s ease;
	height: 7px;
	top: 10px;
	left: 3px;
	transform: rotate(-45deg);
}
precut {
	/* Light-blue background matches the .master-upload "Add another design"
	   box (background #e6f6ff, dashed blue border #46aae3) so the precut
	   row reads as part of the same upload-flow card stack rather than a
	   neutral grey input. Only dtf-transfers + dtf-transfers-by-size-v2
	   load bySize.css, so this change is scoped to those product pages. */
	background-color: #e6f6ff;
	/* FIXED 48px height to match .nt-design-note sibling exactly
	   (reduced from 56px by ~15% per design spec). !important defeats
	   any global theme rule that bleeds padding/sizing into the box. */
	padding: 0 14px !important;
	border-radius: 12px;
	display: flex !important;
	align-items: center;
	height: 48px !important;
	min-height: 48px !important;
	font-size: 13px;
	width: 100% !important;
	box-sizing: border-box !important;
}
precut .precut__row { width: 100%; }
/* Prevent the precut label from wrapping to a second line, which
   would push the precut box taller than the design-note sibling. */
precut .precut__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
precut .precut__row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	cursor: pointer;
	font-weight: 400;
}
/* Cache bust: 2026-05-20-1 — force CDN refresh after checkbox padding fix */
/* Custom checkbox: white box w/ subtle border when unchecked,
   brand blue (#3eaeff) box w/ white check when checked. Uses
   appearance:none because accent-color alone can't force a white
   checkmark. `padding: 0` overrides theme.css's global
   `input, textarea, select { padding: var(--input-padding) }` which
   was inflating the checkbox to 27px (12px padding + 18px content) and
   making the whole precut row taller than the design-note sibling. */
precut .precut__row input[type="checkbox"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	flex-shrink: 0;
	margin: 0;
	padding: 0;
	width: 18px;
	height: 18px;
	border: 1.5px solid #c9c9c9;
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
	display: inline-grid;
	place-content: center;
	transition: background-color 0.12s ease, border-color 0.12s ease;
}
precut .precut__row input[type="checkbox"]:checked {
	background: #3eaeff;
	border-color: #3eaeff;
}
precut .precut__row input[type="checkbox"]:checked::before {
	content: '';
	width: 10px;
	height: 6px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: translateY(-1px) rotate(-45deg);
	transform-origin: center;
}
precut .precut__row input[type="checkbox"]:focus-visible {
	outline: 2px solid #3eaeff;
	outline-offset: 2px;
}
/* Label takes the available space so the cost gets pushed to the
   right edge of the row. The info icon lives INLINE inside the label
   (immediately after "individually cut") so it sits right next to
   the text rather than floating at the row's right edge. */
precut .precut__label {
	flex: 1;
	line-height: 1.35;
}
precut .precut__label strong {
	font-weight: 600;
}
precut .precut__info {
	display: inline-block;
	margin-left: 6px;
	width: 16px;
	height: 16px;
	vertical-align: 0;
	line-height: 0;
}
precut .precut__info .infoIcon {
	width: 16px;
	height: 16px;
	display: block;
}
/* "$0.19 each" — sibling AFTER the label span. Right-aligned by the
   flex layout: label absorbs the slack so this lands at the row end. */
precut .precut-cost {
	display: none;
	flex-shrink: 0;
	font-weight: 600;
	text-align: right;
}
precut input[type="checkbox"]:checked ~ .precut-cost {
	display: inline-block;
}

another-upload {
	margin-bottom: 20px;
}
another-upload .anotherUpload__title {
	font-size: large;
	margin-bottom: 12px;
	text-align: center;
}
.anotherUpload[newdesign] .secondDropZone {
	border-color: transparent;
	border-radius: 10px;
	position: relative;
	padding: 30px 20px 20px;
}
another-upload[newdesign] .anotherUpload__title {
	margin-bottom: 20px;
	margin-top: 0px;
}
.anotherUpload[newdesign] .secondDropZone::before {
	content: '';
	position: absolute;
	top: 10px;
	left: 10px;
	width: calc(100% - 20px);
	height: calc(100% - 20px);
	border: 2px dotted #07A7F24D;
  border-radius: 8px;
	z-index: 0;
}
.anotherUpload[newdesign] .secondDropZone__inner {
	max-width: 300px;
	margin: auto;
}
.anotherUpload[newdesign] .secondDropZone__text {
	font-size: 19px;
	font-weight: 700;
	margin-top: 20px;
	margin-bottom: 16px;
}
.anotherUpload[newdesign] .secondDropZone__textSmall {
	font-size: 14px;
	font-weight: 400;
	margin-bottom: 5px;
}
.anotherUpload[newdesign] .secondDropZone__inner b {
	width: max-content;
	margin: 0 auto 10px auto;
	border-radius: 10px;
	font-size: 14px;
	border: 1px solid #07A7F2;
  background-color: #07a7f2;
  padding: 13px 34px;
  border-radius: 10px; 
}
.anotherUpload[newdesign] .secondDropZone__inner:hover b{
 color: #fff;
}
.anotherUpload[newdesign] .access_old_data {
	/* font-size: 12px; */
	position: relative;
	z-index: 5;
	margin-bottom:0;
}
proceed-to-checkout {
	width: 100%;
	display: block;
	margin-top: 20px;
}
proceed-to-checkout,
proceed-to-checkout .addToCartGroupItems {
	width: 100%;
}
@media (max-width: 600px) {
	upload-controls proceed-to-checkout .button--product {
		height: unset;
		padding: 16px;
	}
}
/* ACTIVE INACTIVE TABS MANAGE FOR SINGLE UPLOAD START */
:has(upload-controls tab-controls #customSizeTabOption:checked) upload-controls sizes-blocks line-items-popular .widthHeight__item__popular,
:has(upload-controls tab-controls #customSizeTabOption:checked) upload-controls sizes-blocks line-items-popular .precut-unit-logic__price,
:has(upload-controls tab-controls #customSizeTabOption:checked) upload-controls sizes-blocks line-items-popular .precut-unit-logic__qty,
:has(upload-controls tab-controls #customSizeTabOption:checked) upload-controls sizes-blocks line-items-popular .precut-unit-logic__total {
	opacity: 0.5;
	color: #b6b6b6 !important;
  cursor: default;
}
:has(upload-controls tab-controls #customSizeTabOption:checked) upload-controls sizes-blocks line-items-popular .__originalPrice,
:has(upload-controls tab-controls #customSizeTabOption:checked) upload-controls sizes-blocks line-items-popular .__discountedPrice {
	color: #b6b6b6;
}

:has(upload-controls tab-controls #popularSizeTabOption:checked) upload-controls sizes-blocks line-items-custom .widthHeight__item,
:has(upload-controls tab-controls #popularSizeTabOption:checked) upload-controls sizes-blocks line-items-custom .precut-unit-logic__price,
:has(upload-controls tab-controls #popularSizeTabOption:checked) upload-controls sizes-blocks line-items-custom .precut-unit-logic__qty,
:has(upload-controls tab-controls #popularSizeTabOption:checked) upload-controls sizes-blocks line-items-custom .precut-unit-logic__total {
	opacity: 0.5;
	color: #b6b6b6 !important;
  cursor: default;

	/* color: transparent !important;
  background-color: #e0e0e0;
  border-color: #e0e0e0;
  pointer-events: none;
  user-select: none;
  overflow: hidden; */
}

body.activeImgPreviewer:has(upload-controls next-element:not(.hidden) tab-controls #customSizeTabOption:checked,upload-controls next-element:not(.hidden) tab-controls #popularSizeTabOption:checked) product-page .gallery_position.product-gallery {
	display: none;
}

body.activeImgPreviewer:has(upload-controls next-element:not(.hidden) tab-controls #customSizeTabOption:checked,upload-controls next-element:not(.hidden) tab-controls #popularSizeTabOption:checked) product-page .dtf_imgix_images {
	display: block;
}

body.activeImgPreviewer product-page .dtf_imgix_images .watermark_image {
	opacity: 1;
}
/* ACTIVE INACTIVE TABS MANAGE FOR SINGLE UPLOAD END */
@media (max-width: 768px) {
	upload-controls sizes-blocks precut-unit-logic .precut-unit-logic__grid .precut-unit-logic__price::before,
	upload-controls sizes-blocks precut-unit-logic .precut-unit-logic__total::before {
		color: #000000b2;
		font-size: 12px;
		font-weight: 600;
		margin-top: 3px;
	}
	upload-controls sizes-blocks precut-unit-logic .precut-unit-logic__grid .precut-unit-logic__price,
	upload-controls sizes-blocks precut-unit-logic .precut-unit-logic__total {
		align-self: flex-start;
	}
	upload-controls sizes-blocks .widthHeight__custom[discount="0"] precut-unit-logic .__originalPrice,
	upload-controls sizes-blocks .widthHeight__custom[discount=""] precut-unit-logic .__originalPrice,
	upload-controls sizes-blocks .widthHeight__custom[discount="0"] precut-unit-logic .precut-unit-logic__discount > span,
	upload-controls sizes-blocks .widthHeight__custom[discount=""] precut-unit-logic .precut-unit-logic__discount > span {
		display: block;
		margin-top: 10px;
	}
	upload-controls sizes-blocks .widthHeight__custom:not([discount="0"]) precut-unit-logic .__originalPrice {
		margin-top: 16px;
	}
}
multi-upload-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background-color: #00000071;
	align-items: center;
	overflow: auto;
	display: none;
	box-sizing: border-box;
	padding: 18px; /* 18px outer breathing room between the modal and the viewport edge on all sides (DESKTOP — zeroed on mobile below) */
}
/* Mobile: ONE seamless modal with a 10px overlay frame all around (Owen
   2026-07-01: "needs space around so they know they can close it to return
   to page, 10px all around, keep radius"). Modal + fused bottom bar read as
   one rounded surface floating on the dark overlay: inner top-rounded,
   footer bottom-rounded (white, hairline top border, 10px content gutter
   for the CTA + cashback chip). */
@media (max-width: 700px) {
	multi-upload-wrapper {
		padding: 10px !important;
		box-sizing: border-box !important;
	}
	multi-upload {
		width: 100% !important;
		max-width: none !important;
		height: calc(100vh - 40px) !important;
		max-height: 100vh !important;
	}
	.multiUpload__inner__wrapper {
		height: 100% !important;
	}
	.multiUpload__inner__wrapper .__multiUpload__inner {
		border-radius: 8px 8px 0 0 !important;
	}
	footer-block.grt__mobile__footerBlock {
		width: 100% !important;
		margin: 0 !important;
		border-radius: 0 0 8px 8px !important;
		background: #fff !important;
		border-top: 1px solid #e5e5e5 !important;
		padding: 10px !important;
		box-sizing: border-box !important;
		gap: 10px !important;
	}
	/* breathing room at the end of the scroll content so the pre-cut row
	   isn't jammed against the fused footer bar (Owen: ~80px) */
	multi-upload precut {
		margin-bottom: 80px !important;
	}
}
multi-upload-wrapper.active {
	display: grid;
}
multi-upload {
	position: relative;
	max-height: calc(100vh - 36px);
	min-height: 720px;
	margin: 0 auto;
	height: calc(100vh - 36px);
	width: 100%;
	max-width: 1400px;
	background-color: #fff;
	z-index: 1;
	border-radius: 8px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 360px); /* contain right column: left flexes so the right column always fits inside the card */
	align-items: start;
}
@media (max-width: 850px) {
	multi-upload {
		grid-template-columns: minmax(0, 1fr) minmax(0, 360px); /* contain right column (see base rule) */
	}
}
.multiUpload__close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 24px;
	height: 24px;
	z-index: 1;
	cursor: pointer;
	display: block;
	background-image: url("data:image/svg+xml,%3Csvg width='24px' height='24px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 6L18 18' stroke='%23000' stroke-width='2px' stroke-linecap='round'%3E%3C/path%3E%3Cpath d='M18 6L6.00001 18' stroke='%23000' stroke-width='2px' stroke-linecap='round'%3E%3C/path%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}
@media (max-width: 700px) {
	multi-upload {
		display: block;
	}
	/* .multiUpload__close {
		position: sticky;
		margin-left: auto;
	} */
}
multi-upload upload-area {
	min-width: 0; /* grid item: allow shrink so the right column stays contained */
	padding: 10px;
	/* Grey column so the white upload cards read as cards (Owen 2026-07-01;
	   promotes the old blanks-fork grey to the shared default per the
	   one-source rule). */
	background-color: #f2f2f2;
	position: relative;
	width: calc(100% - 0px);
	overflow-x: hidden;
	overflow-y: auto;
	max-height: calc(100% - 0px);
	margin: 0px;
	height: 100%;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	border-radius: 8px 0 0 8px;
	display: grid;
	/* Pack rows at the top, content-sized. Default (normal = stretch)
	   distributed the modal's leftover height into the auto rows, inflating
	   file-blocks-area past its cards (measured 107px of invisible padding
	   under the last card) and pushing "Add another design" down with it.
	   With start, the only spacing is the cards' own 20px margin-bottom —
	   the add-another block sits in the same rhythm as a design card. */
	align-content: start;
	scroll-behavior: smooth;
}
@media (max-width: 700px) {
	multi-upload upload-area {
		border-radius: 0;
		overflow-y: unset;
		max-height: unset;
		height: unset;
	}
}
multi-upload upload-area::-webkit-scrollbar {
  width: 0px;
  height: 8px;
  display: block;
}
multi-upload upload-area::-webkit-scrollbar-track {
  background-color: #ddd;
}
multi-upload upload-area::-webkit-scrollbar-thumb {
  background-color: #666;
}
multi-upload uploaded-files-block {
	background-color: #fff;
	display: block;
	padding: 14px;
	border-radius: 8px;
	margin-bottom: 10px; /* match the upload-area's 10px side padding — even grey gutter all around the cards */
	border: 1px solid #d3d3d3;
}
multi-upload line-items-custom,
multi-upload line-items-popular {
	gap: 0px;
}
multi-upload file-progress {
	margin-bottom: 12px;
}
multi-upload item-no {
	display: grid;
	align-items: center;
	grid-template-columns: repeat(2, 1fr);
	width: 100%;
	justify-content: space-between;
	border-bottom: 1px solid #d3d3d3;
	margin-bottom: 12px;
	padding-bottom: 12px;
	margin-top: 0px;
	position: relative;
}
/* multi-upload item-no */
multi-upload .itemNo__name {
	font-weight: bold;
}
multi-upload .itemNo__action {
	text-align: right;
}
multi-upload .itemNo__action a {
	color: #03a3f7;
	font-weight: 600;
}

multi-upload .previewBlock_and_lineItems {
	display: grid;
	/* 38% left the size column at ~594px even at the modal's full 1400px cap —
	   under the 640px @container threshold below, so the one-line desktop
	   layout could never re-engage no matter how wide the screen was ("mobile
	   layout all the time"). 30% gives the size column ~673px at full width
	   (well past 640px), so it goes back to one line whenever there's real
	   room, and only stacks when the modal itself is genuinely narrower
	   (smaller windows, or <850px viewport where this collapses to 1 column
	   anyway). Preview column still shrinks vs the pre-session default, per
	   Owen's original "smaller preview" ask. */
	/* minmax floor: file-preview is width:100% of this track (transferBySize.css),
	   so as the modal narrows the preview shrunk all the way down proportionally
	   — "the preview box should not shrink... this area should never fall below
	   this size until we start stacking image preview over sizes." Modal itself
	   stays capped at 1400px (do not widen it) — so within that fixed budget,
	   the preview holds at 400px and the size-input column gets whatever's left
	   (~570px at full width). That's under the @container 640px threshold, so
	   the size column runs the stacked/per-item-label layout most of the time
	   now instead of one-line — accepted trade-off per Owen: hold the preview
	   size, let the size column use its narrow-safe fallback (still contained,
	   no collision — that fallback is what "start stacking" refers to). */
	grid-template-columns: minmax(400px, 30%) auto;
	gap: 20px;
	align-items: start;
}
/* WHEN to stack preview over sizes: keyed on the CARD's width, not the
   viewport. The old stack trigger was @media(max-width:850px) — on a big
   screen with a narrowed window the viewport never crosses it, so the
   400px preview floor crushed the size column (measured 211px at modal
   900) with stacking never firing. Card (uploaded-files-block) becomes a
   container; below 748px card width (= 400 preview + 20 gap + ~300 usable
   size column + 28 card padding) the preview stacks OVER the sizes and
   the size column takes the full card width instead. Preview stays capped
   at 400px and centered when stacked — it only shrinks below 400 once the
   card itself is physically narrower than 400 (small phones), which is
   exactly "never fall below this size until we start stacking". */
multi-upload uploaded-files-block {
	container-type: inline-size;
}
@container (max-width: 748px) {
	html body multi-upload .previewBlock_and_lineItems {
		grid-template-columns: 100%;
	}
	html body multi-upload .previewBlock_and_lineItems preview-box {
		max-width: 400px;
		margin: 0 auto;
		width: 100%;
	}
}
/* AI toolbar: NO layout/cosmetic rules here (Owen 2026-07-01: "use the
   uv-dtf-stickers-decals-by-size rules — this is exactly how the element
   should look and respond"). nt-ai-toolbar.css is the declared single
   source of truth for this element (loaded globally, covers the modal,
   own responsive system) — the UV page looks right because it runs ONLY
   that file. Earlier hand-rolled wrap/two-state systems here were parallel
   logic fighting it and are deleted. The only toolbar rules that may live
   in this file are STATE-BUG fixes (the BGR toggle-state gates + the
   stranded fused-state margin/radius counters, elsewhere in this file). */
/* Kill the excess space below the AI toolbar so the gap under the "Powered by
   AI" badge matches the card's side inset (~15px), instead of ~48px. Two
   sources stack via margin-collapse: the gang-sheet-edit APP CSS puts a large
   margin-bottom on .multiupload-rebuild-tools-inner (cross-origin, needs high
   specificity to beat), and nt-dtf-3col.css sets .ai-wrap margin-bottom:26px
   (other session's file — override the MODAL copy only, don't edit that file).
   Scoped to multi-upload preview-box so the on-page toolbar is untouched. */
/* The "NEW · 3 BG Removal options" chooser must NEVER show while the block's
   Remove Background toggle is OFF (Owen 2026-06-23 rule; resurfaced in the
   popup 2026-07-01). bg-removal-multi.js manages this with event handlers,
   but jQuery-synthetic toggle changes can miss its native change listener and
   strand the bar visible (observed live: is-visible + content intact with the
   toggle off). This :has() gate enforces the rule declaratively from the
   toggle's actual state — immune to event ordering; the bar pops back the
   instant the toggle is checked. Scoped to the popup (multi-upload). */
html body multi-upload uploaded-files-block:has(.bgRemover .toggleOption:not(:checked)) .nt-bgr-tabs {
	display: none !important;
}
/* Companion to the gate above: nt-ai-toolbar.css "fuses" the toolbar with the
   chooser (strips its top border/radius) keyed on the chooser's .is-visible
   CLASS — which strands after toggle-off (same event-ordering hole the gate
   plugs). With the chooser display:none'd, restore the toolbar's standalone
   card look so its 12px radius survives every on/off cycle. Badge stays
   below the toolbar (the popup's established placement). */
html body multi-upload uploaded-files-block:has(.bgRemover .toggleOption:not(:checked)) .nt-bgr-tabs + .multiupload-rebuild-tools-inner {
	border-top: 1px solid #E5E7EB !important;
	border-top-left-radius: 12px !important;
	border-top-right-radius: 12px !important;
	margin-top: 0 !important;
}
html body multi-upload uploaded-files-block:has(.bgRemover .toggleOption:not(:checked)) .nt-bgr-tabs + .multiupload-rebuild-tools-inner .ai-badge {
	top: auto !important;
	bottom: -22px !important;
}
/* Triple-repeated class: the gang-sheet-edit APP's cross-origin CSS re-wins
   the 44px margin in some toolbar states (e.g. the w3_bg BG-removal classes)
   over a single-class selector — repeat the class to out-specify it for good. */
html body multi-upload preview-box .ai-wrap .ai-ring .multiupload-rebuild-tools-inner.multiupload-rebuild-tools-inner.multiupload-rebuild-tools-inner {
	margin-bottom: 0 !important;
}
html body.image-uploaded multi-upload preview-box .ai-wrap {
	margin-bottom: 12px !important;
}
/* NOTE (do not re-add): a bottom-align experiment (preview-box as stretched
   flex column + .ai-wrap margin-top:auto) pinned the toolbar to the CARD
   bottom — it opened a dead hole between the preview image and the toolbar
   whenever the size column was tall. Owen: the toolbar pins to the element
   ABOVE it (the preview), not the card. The dead band from the original
   complaint was the app's 44px margin (killed above); with it gone, the
   toolbar hugs the preview and — when the preview column is the taller one —
   the badge naturally ends 14px above the card border (12 wrap margin +
   10 preview-box padding + 14 card padding − 22 badge overhang). */
@media (max-width: 850px) {
	multi-upload .previewBlock_and_lineItems {
		grid-template-columns: auto;
	}
}
/* Static, not sticky (Owen 2026-07-01): the sticky preview pinned to the
   scroll area and rode OVER the size section / tabs in the stacked
   (@container <748px) layout — preview + Powered-by-AI are normal in-flow
   content within each card at every size. */
multi-upload preview-box {
	position: relative;
}
/* Min-height + centered artwork (Owen): short/wide uploads collapsed the
   preview so the absolute bottom pill ("Preview: The image will print...")
   sat ON the artwork. 220px floor matches the on-page precedent
   (transferBySize.css upload-controls img_wide rule); the flex column
   centers the image vertically, pill stays clear at the bottom — no
   collisions no matter how short the upload is. */
multi-upload preview-box file-preview {
	min-height: 220px !important;
	justify-content: center !important;
	/* ALWAYS horizontally centered in the column (Owen). The engine's
	   [show-dimensions] rule reserves 23px on the left for the single-upload
	   page's OUTER vertical ruler and pins margin-right:0 — but in the modal
	   the rulers are children of preview-block (inside this box), so the
	   reserve just skewed the checkerboard off-center at some widths. */
	margin-left: auto !important;
	margin-right: auto !important;
}
multi-upload file-preview .verticle_direction::before {
	transform: translate(calc(-50% + 0.4px), -50%) rotate(-90deg);
}
multi-upload toggle-options {
	display: grid;
	margin-bottom: 0;
	  max-width: calc(100% - 0px);  
}
multi-upload tab-controls {
	gap: 36px;
	margin-top: 0;
}
multi-upload sizes-blocks[total-items="1"] .widthHeight__custom .del_item {
	opacity: 0;
	visibility: hidden;
}
multi-upload sizes-blocks {
	gap: 0;
}
multi-upload sizes-blocks .widthHeight__custom[option-selected] dpi-warning {
	top: -3px;
}
multi-upload sizes-blocks precut-unit-logic .precut-unit-logic__grid {
	margin-bottom: 0;
}
/* Size rows replicate the on-page (upload-controls) v3 workspace grid EXACTLY:
   custom = 20% 20% 60% (Width | Height | precut container); the precut container
   holds its own .precut-unit-logic__grid (74px 25% 25% auto = Qty | Price | Total |
   discount). Row gap 10px. NOT display:contents and NOT fr — both diverged from the
   page and never lined up one-to-one. */
multi-upload sizes-blocks .widthHeight__custom {
	gap: 10px !important;
}
multi-upload sizes-blocks .widthHeight__custom[option-selected="custom"] {
	grid-template-columns: minmax(0,20%) minmax(0,20%) minmax(0,60%) !important;
	border-bottom: 1px solid #D9D9D9;
	padding-bottom: 6px;
	margin-bottom: 10px;
	align-items: end;
}
multi-upload sizes-blocks precut-unit-logic .precut-unit-logic__grid {
	grid-template-columns: 74px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
	max-width: calc(100% - 13px);
	gap: 10px;
}
@media (min-width: 769px) {
	/* precut is a real container in the last track (NOT flattened); force auto
	   placement so it lands in the last column instead of inheriting a
	   grid-column:1/3 that overlaps Width/Height. Mobile (max-width:768px) rules
	   below keep their own precut placement. */
	multi-upload sizes-blocks .widthHeight__custom[option-selected] precut-unit-logic {
		grid-column: auto !important;
		display: block;
		width: 100%;
	}
	multi-upload sizes-blocks .widthHeight__custom[option-selected] dpi-warning {
		grid-column: 1 / -1;
	}
}
@media ( max-width: 768px ) {
  multi-upload sizes-blocks .widthHeight__custom[option-selected="custom"] precut-unit-logic {
    grid-column: 1/3;
  }
  multi-upload sizes-blocks .widthHeight__custom[option-selected="popular"] precut-unit-logic .precut-unit-logic__grid {
    grid-template-columns: 24% 21% 25% 27%;
  }
  multi-upload sizes-blocks precut-unit-logic .precut-unit-logic__grid .precut-unit-logic__price {
    margin-left: 0;
  }
}
/* ============================================================================
   Modal narrow-column layout — REUSE the on-page v3 narrow/mobile treatment
   (bysize-v3-single-override.css SECTION K/L, @container max-width:640px)
   instead of hand-tuning a one-row desktop grid. The modal's size column is
   ~590-600px even at 1900px browser width (it shares the card with the preview
   + summary panel), so the one-row 3-col layout never had enough room — Price/
   Total/discount collided (e.g. "$0.87 e$0.87" / "20% off" overlapping the ✕).
   v3 already solved this exact problem for its own narrow-container case:
   drop to Width|Height on one row, Qty/Price/Total/discount as a full-width
   row below (so those 3 columns get the WHOLE row's width instead of a third
   of it), with per-item ::before labels since the group header has no row to
   sit above anymore. Container query (not viewport media) because the trigger
   is the COLUMN's width, not the screen's — the modal can be this narrow on
   any screen size.
   THRESHOLD 560 (was 640): 640 was calibrated BEFORE the minmax responsive
   grid + header-mirror rework; after it, the one-line layout fits cleanly at
   571px — the size column's width at full 1400px modal beside the 400px
   preview — verified with worst-case content (qty 45, $49.05/$39.24, 30%
   off) on BOTH tabs: one row, contained, zero overlaps, ~40px slack. At 640
   the popup showed stacked rows at full width while the on-page single
   upload showed one line ("this should be mirroring the single on page
   upload"). 560 keeps ~10px of collision margin below the verified 571. */
multi-upload sizes-blocks {
	container-type: inline-size;
}
/* NOTE: every selector below is prefixed with `html body` (matching the v3
   pattern this block mirrors). Reason: this rule sits EARLIER in this file
   than the pre-existing @media(min-width:769px) popular-row rule (further
   down), and at EQUAL specificity, source order — not @container vs @media —
   decides the winner, so the later rule kept winning even after matching its
   selector length. `html body` adds two type-selectors of headroom so this
   block wins regardless of where in the file it sits. */
@container (max-width: 560px) {
	html body multi-upload sizes-blocks .widthHeight__customHeader {
		display: none !important;
	}
	html body multi-upload sizes-blocks .widthHeight__custom[option-selected="custom"] {
		grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
	}
	html body multi-upload uploaded-files-block sizes-blocks .widthHeight__custom[option-selected="popular"] {
		grid-template-columns: 100% !important;
	}
	/* Custom's 2 columns are flexible (minmax(0,1fr)), so spanning precut to
	   line 5 works — the flexible tracks absorb precut's width and the row
	   stays exactly container-width. Popular's single column is a fixed 100%
	   track (already fully committed); spanning it the same way forces the
	   browser to generate 3 EXTRA implicit tracks sized by content instead of
	   shrinking, inflating the row ~30px past the container. Popular doesn't
	   need a span at all: with only 1 explicit column, default grid auto-flow
	   already stacks the dropdown then precut into separate rows. */
	html body multi-upload sizes-blocks .widthHeight__custom[option-selected="custom"] precut-unit-logic {
		grid-column: 1 / 5 !important;
		margin-left: 0 !important;
		min-width: 0 !important;
		width: auto !important;
		max-width: 100% !important;
	}
	html body multi-upload sizes-blocks .widthHeight__custom[option-selected="popular"] precut-unit-logic {
		grid-column: auto !important;
		margin-left: 0 !important;
		min-width: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
	}
	html body multi-upload sizes-blocks .widthHeight__custom {
		max-width: 100% !important;
	}
	html body multi-upload sizes-blocks precut-unit-logic .precut-unit-logic__grid {
		grid-template-columns: 74px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) !important;
		width: 100% !important;
		max-width: 100% !important;
	}
	/* Group header is hidden above — restore per-item labels (mirrors the
	   engine's own pseudo-label pattern, same one v3 reuses) so each stacked
	   row still says Width/Height/Qty/Price/Total/Size. */
	html body multi-upload sizes-blocks .widthHeight__custom .widthHeight__item::before {
		content: attr(by) !important;
		text-transform: capitalize !important;
		margin-bottom: 8px !important;
	}
	html body multi-upload sizes-blocks .widthHeight__custom .precut-unit-logic__qty::before {
		content: "Qty" !important;
		margin-bottom: 8px !important;
	}
	html body multi-upload sizes-blocks .widthHeight__custom .precut-unit-logic__price::before {
		content: "Price" !important;
		margin-bottom: 8px !important;
	}
	html body multi-upload sizes-blocks .widthHeight__custom .precut-unit-logic__total::before {
		content: "Total" !important;
		margin-bottom: 8px !important;
	}
	html body multi-upload sizes-blocks .widthHeight__custom .widthHeight__item__popular::before {
		content: "Size" !important;
		margin-bottom: 8px !important;
	}
	/* STACKED input styling = the page's stacked look (Owen 2026-07-01):
	   the page switches from the compact right-column chevrons to horizontal
	   [− value +] inputs and a plain bordered qty box in its narrow mode —
	   mirror the switch so both surfaces stack identically. */
	html body multi-upload sizes-blocks .widthHeight__custom[option-selected="custom"] .widthHeight__item .widthHeight__item_inputWrapper {
		display: flex !important;
		align-items: center !important;
	}
	html body multi-upload sizes-blocks .widthHeight__custom[option-selected="custom"] .widthHeight__item .widthHeight__value-minus,
	html body multi-upload sizes-blocks .widthHeight__custom[option-selected="custom"] .widthHeight__item .widthHeight__value-plus {
		font-size: 18px !important;
		background-color: transparent !important;
		background-image: none !important;
		border: 0 !important;
		height: 100% !important;
		width: auto !important;
	}
	html body multi-upload sizes-blocks .widthHeight__custom[option-selected="custom"] .widthHeight__item .widthHeight__value-minus { padding: 0 0 0 14px !important; }
	html body multi-upload sizes-blocks .widthHeight__custom[option-selected="custom"] .widthHeight__item .widthHeight__value-plus { padding: 0 14px 0 0 !important; }
	html body multi-upload sizes-blocks .widthHeight__custom[option-selected="custom"] .widthHeight__item .widthHeight__value {
		width: 100% !important;
		text-align: center !important;
		padding: 14.5px 4px !important;
	}
	/* qty: plain bordered box, chevrons hidden (page's narrow qty) */
	html body multi-upload sizes-blocks .widthHeight__custom .precut-unit-logic__qty .qtyStepper {
		display: flex !important;
		border: 1px solid #b2b2b2 !important;
		border-radius: 6px !important;
	}
	html body multi-upload sizes-blocks .widthHeight__custom .precut-unit-logic__qty .qtyStepper__up,
	html body multi-upload sizes-blocks .widthHeight__custom .precut-unit-logic__qty .qtyStepper__down {
		display: none !important;
	}
	html body multi-upload sizes-blocks .widthHeight__custom .precut-unit-logic__qty .qtyStepper .customQtyFile__qty {
		width: 100% !important;
		text-align: center !important;
		padding: 14.5px 9px !important;
	}
}
multi-upload sizes-blocks .widthHeight__custom .widthHeight__item[by="width"]::before,
multi-upload sizes-blocks .widthHeight__custom .widthHeight__item[by="height"]::before,
multi-upload sizes-blocks .widthHeight__custom .widthHeight__item__popular::before,
multi-upload sizes-blocks .widthHeight__custom .precut-unit-logic__price::before,
multi-upload sizes-blocks .widthHeight__custom .precut-unit-logic__qty::before,
multi-upload sizes-blocks .widthHeight__custom .precut-unit-logic__total::before {
	font-size: 12px;
	font-weight: 600;
	color: #000000B2;
}
multi-upload sizes-blocks .widthHeight__item__popular .popularSizes {
	background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Crect fill='none'/%3E%3Cpolyline fill='none' points='208 96 128 176 48 96' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='12'/%3E%3C/svg%3E");
	background-position-y: center;
	background-repeat: no-repeat;
	background-size: auto;
	background-position-x: calc(100% - 12px);
}
multi-upload precut-unit-logic .precut-unit-logic__grid .__discountedPrice {
	font-size: 14px;
	font-weight: 600; /* page: 14px/600/#000 (measured live on single upload) */
	color: #000;
}
multi-upload sizes-blocks precut-unit-logic .precut-unit-logic__grid .__discountedPrice span {
	/* "ea" — page renders it 12px #808080 (measured live) */
	color: #808080;
	font-size: 12px;
}
/* Discount badge — match the on-page single-mode look (14px, normal weight,
   static position, right-aligned inline with the price/total cells) instead of
   the old multi-mode 12px/600/relative+top:11px that floated it low & centered. */
multi-upload sizes-blocks precut-unit-logic .precut-unit-logic__grid .precut-unit-logic__discount {
	font-size: 14px;
	font-weight: 600;
	color: #22A614 !important;
	position: static;
	top: auto;
	justify-content: center; /* page: centered under its column (measured live) */
	/* Modal's discount column is narrower than the page (preview takes 38%),
	   so "20% off" wrapped to two lines. Keep it on one line. */
	white-space: nowrap;
}
multi-upload sizes-blocks .del_item svg {
	fill: #E7E7E7;
}
multi-upload precut-unit-logic .precut-unit-logic__grid .__originalPrice {
	color: #A0A0A0;
	font-size: 10px;
	font-weight: 500; /* page: 10px/500 strike (measured live) */
	/* 10px, matching the LIVE page single upload (measured 2026-07-01; the
	   earlier 0 came from a v3 comment, but the rendered page uses 10). */
	margin-top: 10px;
}
multi-upload sizes-blocks .widthHeight__custom .widthHeight__item[by="width"]::before {
	content: none;
}
multi-upload sizes-blocks .widthHeight__custom .widthHeight__item[by="height"]::before {
	content: none;
}
multi-upload sizes-blocks .widthHeight__custom .widthHeight__item__popular::before {
	content: none;
}
multi-upload sizes-blocks .widthHeight__custom .precut-unit-logic__price::before {
	content: none;
}
multi-upload sizes-blocks .widthHeight__custom .precut-unit-logic__qty::before {
	content: none;
	margin-bottom: 2px;
}
multi-upload sizes-blocks .widthHeight__custom .precut-unit-logic__total::before {
	content: none;
}
multi-upload line-items .mu-size-help {
	font-size: 15px;
	color: #2b2b2b;
	margin: 14px 0 18px;
}
multi-upload line-items .mu-size-help__link {
	color: #019aff;
	font-weight: 600;
	text-decoration: none;
}
multi-upload line-items .mu-size-help__link:hover {
	text-decoration: underline;
}
/* Helper text swaps per tab, like the page (Owen 2026-07-01: "on popular
   size tab the text below is not updating"): custom tab shows .mu-size-help,
   popular tab shows the block's popularOptionText. Same :has() pattern as
   the row-visibility rules. */
multi-upload line-items .mu-popular-help {
	display: none;
	font-size: 15px;
	color: #2b2b2b;
	margin: 14px 0 18px;
}
multi-upload uploaded-files-block:has(tab-controls .tabOptionName[value="popular"]:checked) line-items .mu-size-help {
	display: none;
}
multi-upload uploaded-files-block:has(tab-controls .tabOptionName[value="popular"]:checked) line-items .mu-popular-help {
	display: block;
}
/* Column header row (labels once) — grid matches the size rows so columns line up.
   Same .widthHeight__customHeader element the page uses; per-row ::before labels removed. */
/* Header MIRRORS the row structure so columns line up AND shrink together:
   top level = minmax(0,20%) minmax(0,20%) minmax(0,60%) (same as the custom row),
   and the last 4 labels live in .widthHeight__customHeader__grid which uses the
   SAME template as .precut-unit-logic__grid (74px 25% 25% auto). minmax(0,%)
   lets the tracks shrink to fit the modal's narrow size column instead of
   overflowing behind the summary panel. */
multi-upload sizes-blocks .widthHeight__customHeader {
	display: grid !important;
	grid-template-columns: minmax(0,20%) minmax(0,20%) minmax(0,60%) !important;
	column-gap: 10px !important;
	margin: 0 0 8px !important;
	padding: 0 !important;
	border: none !important;
	align-items: end;
}
multi-upload sizes-blocks .widthHeight__customHeader__grid {
	display: grid;
	/* equal 1fr for Qty-neighbours so Price/Total/discount columns are identical
	   width in the header and the rows (auto sized differently because the header's
	   last cell is empty while the row's holds "20% off") — keeps Total aligned. */
	grid-template-columns: 74px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
	column-gap: 10px;
	max-width: calc(100% - 13px);
	align-items: end;
}
multi-upload sizes-blocks .widthHeight__customHeader > div,
multi-upload sizes-blocks .widthHeight__customHeader__grid > div {
	font-size: 12px !important;
	font-weight: 600 !important;
	color: rgba(0,0,0,0.698) !important;
	background: none !important;
	border: none !important;
	padding: 0 !important;
	min-width: 0;
}
multi-upload sizes-blocks .widthHeight__customHeader .qtyItem__head,
multi-upload sizes-blocks .widthHeight__customHeader .priceItem__head,
multi-upload sizes-blocks .widthHeight__customHeader .totalItem__head {
	text-align: center;
}
/* Header swaps per tab (Owen 2026-07-06 — reverses the earlier one-header
   decision): the Popular tab must show "Size | Qty | Price | Total", never
   Width/Height. Default = custom tab: popular header hidden. When THIS
   block's popular radio is checked, the custom header hides and the popular
   header shows with tracks matching the popular ROW (dropdown = 40%+10px,
   precut grid = 60%); its Qty/Price/Total sit in the same nested __grid the
   custom header uses, so the shared __grid template keeps them aligned. */
multi-upload sizes-blocks .widthHeight__customHeader--popular {
	display: none !important;
}
multi-upload uploaded-files-block:has(tab-controls .tabOptionName[value="popular"]:checked) sizes-blocks .widthHeight__customHeader:not(.widthHeight__customHeader--popular) {
	display: none !important;
}
multi-upload uploaded-files-block:has(tab-controls .tabOptionName[value="popular"]:checked) sizes-blocks .widthHeight__customHeader--popular {
	display: grid !important;
	grid-template-columns: minmax(0, calc(40% + 10px)) minmax(0, 60%) !important;
	column-gap: 10px !important;
}
/* Popular row: same grid the page uses — the dropdown spans Width+Height
   (calc(40% + 10px)) and the precut container is the 60% track. Dropdown pinned to
   column 1; precut auto-places into column 2 via the shared precut rule above. */
@media (min-width: 769px) {
	multi-upload uploaded-files-block sizes-blocks .widthHeight__custom[option-selected="popular"] {
		display: grid !important;
		grid-template-columns: minmax(0,calc(40% + 10px)) minmax(0,60%) !important;
		/* Top-align (not end): the dropdown cell is taller because "Smart Sizing
		   Applied" sits below the dropdown. align-items:end dropped the qty/price
		   cell to the bottom, ~23px below the dropdown; start keeps qty/price
		   inline with the dropdown while the smart-sizing note flows beneath. */
		align-items: start;
	}
	multi-upload sizes-blocks .widthHeight__custom[option-selected="popular"] .widthHeight__item__popular {
		grid-column: 1;
	}
}
/* Qty chevron stepper — mirrors the Width/Height stepper */
multi-upload sizes-blocks .widthHeight__custom .precut-unit-logic__qty .qtyStepper {
	border: 1px solid #d1d5db;
	border-radius: 8px;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr 28px; /* 28px = page chevron column */
	grid-template-rows: 1fr 1fr;
	align-items: stretch;
}
multi-upload sizes-blocks .widthHeight__custom .precut-unit-logic__qty .qtyStepper .customQtyFile__qty {
	grid-column: 1;
	grid-row: 1 / 3;
	border: none !important;
	/* Match the W/H input padding (14.5px 4px, centered) so the qty box is the
	   same 52px height and sits inline with the Width/Height boxes. Was 12px…14px
	   which made the qty box 5px shorter and float low against align-items:end. */
	text-align: center;
	padding: 14.5px 4px !important;
	width: 100%;
}
multi-upload sizes-blocks .widthHeight__custom .precut-unit-logic__qty .qtyStepper__up,
multi-upload sizes-blocks .widthHeight__custom .precut-unit-logic__qty .qtyStepper__down {
	grid-column: 2;
	padding: 0;
	font-size: 0;
	background-color: #f3f4f6; /* page chevron cell grey */
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12px 12px; /* page chevron glyph size */
	border-left: 1px solid #e3e3e3;
	cursor: pointer;
}
multi-upload sizes-blocks .widthHeight__custom .precut-unit-logic__qty .qtyStepper__up {
	grid-row: 1;
	border-bottom: 1px solid #e3e3e3;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='18 15 12 9 6 15'/%3E%3C/svg%3E");
}
multi-upload sizes-blocks .widthHeight__custom .precut-unit-logic__qty .qtyStepper__down {
	grid-row: 2;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
multi-upload sizes-blocks .widthHeight__custom[option-selected="custom"] .widthHeight__item .widthHeight__item_inputWrapper {
	border: 1px solid #d1d5db;
	border-radius: 8px;
	position: relative;
	overflow: hidden;
	/* number on the left, up/down chevrons stacked in a bordered cell on the right */
	display: grid;
	grid-template-columns: 1fr 28px; /* 28px = page chevron column */
	grid-template-rows: 1fr 1fr;
	align-items: stretch;
}
multi-upload sizes-blocks .widthHeight__custom[option-selected="custom"] .widthHeight__item .widthHeight__value {
	grid-column: 1;
	grid-row: 1 / 3;
	border: none !important;
	/* Centered like the on-page single-mode input (was left-aligned + 14px left
	   padding, which shoved the number right of the column). */
	text-align: center;
	padding: 14.5px 4px !important;
}
multi-upload sizes-blocks .widthHeight__custom[option-selected="custom"] .widthHeight__item .widthHeight__value-minus,
multi-upload sizes-blocks .widthHeight__custom[option-selected="custom"] .widthHeight__item .widthHeight__value-plus {
	grid-column: 2;
	padding: 0 !important;
	font-size: 0 !important;
	background-color: #f3f4f6; /* page chevron cell grey */
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12px 12px; /* page chevron glyph size */
	border-left: 1px solid #e3e3e3;
	cursor: pointer;
	height: auto;
}
multi-upload sizes-blocks .widthHeight__custom[option-selected="custom"] .widthHeight__item .widthHeight__value-plus {
	grid-row: 1;
	border-bottom: 1px solid #e3e3e3;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='18 15 12 9 6 15'/%3E%3C/svg%3E");
}
multi-upload sizes-blocks .widthHeight__custom[option-selected="custom"] .widthHeight__item .widthHeight__value-minus {
	grid-row: 2;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
multi-upload sizes-blocks .widthHeight__custom[option-selected="custom"] .widthHeight__item .widthHeight__value-plus {
	padding: 0 14px;
}
multi-upload sizes-blocks .widthHeight__custom[option-selected="custom"] .widthHeight__item .widthHeight__value {
	width: 100%;
	max-width: 100%;
	text-align: center;
	border: none;
	outline: none;
	padding: 12px 0;
}
multi-upload designer-notes [type="checkbox"] + label i {
	top: 0px;
}
/* Vertically center the "Add Free Design Notes (Optional)" text + info
   icon with the checkbox square. Default label is inline-block which
   top-aligns the text with the absolute-positioned checkbox; switching
   to inline-flex with align-items:center lines them up cleanly. */
multi-upload designer-notes [type="checkbox"] + label {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 20px;
}
multi-upload sizes-blocks .widthHeight__custom .widthHeight__item .widthHeight__value:focus-visible,
multi-upload sizes-blocks .widthHeight__custom .customQtyFile__qty:focus-visible {
	box-shadow: unset;
}
multi-upload sizes-blocks precut-unit-logic {
	grid-column: 1/3;
}
multi-upload sizes-blocks precut-unit-logic .customQtyFile__qty {
	padding: 12px 9px;
	border-radius: 6px;
}
multi-upload sizes-blocks precut-unit-logic .precut-unit-logic__qty > div {
	border: 1px solid #b2b2b2;
	border-radius: 6px;
	color: #000;
}
multi-upload sizes-blocks .widthHeight__custom[option-selected="popular"] {
	grid-template-columns: 100% !important;
	border-bottom: 1px solid #D9D9D9;
  padding-bottom: 6px;
  margin-bottom: 10px; /* match custom row spacing */
}
multi-upload sizes-blocks .widthHeight__item__popular .popularSizes {
	/* Match on-page single-mode dropdown padding (14.5px 12px) — gives the 12px
	   horizontal breathing room the old multi-mode (vertical-only) lacked. */
	padding: 14.5px 12px;
}
multi-upload sizes-blocks .add-more-block {
	margin-top: -10px; /* even spacing: cancel the size-row bottom margin so the gap above matches the padding below */
}

multi-upload other-options {
	min-width: 0; /* grid item: keep the right column contained inside the card */
	border-left: 1px solid #d8d8d8;
	/* 52px top (was 30): the modal's close button (top:12, 24px tall) sits over
	   this column and the free-ship bar overlapped it by 6px — content now
	   starts 12px beneath the button (Owen). */
	padding: 52px 10px 10px;
	position: relative;
	width: calc(100% - 10px);
	overflow-x: hidden;
	overflow-y: auto;
	max-height: calc(100% - 10px);
	height: 100%;
	display: grid;
	align-items: self-start;
	gap: 20px;
}
.otherOptions__top {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: start;
}
.otherOptions__top free-shipping-bysize .tooltip .tooltiptext {
	bottom: unset;
	top: 26px;
	height: auto;
	margin-left: -100px;
}
.otherOptions__top prices-table .tooltip .tooltiptext {
	margin-left: -90px;
}
@media (max-width: 700px) {
	multi-upload other-options {
		width: 100%;
		background-color: #ffffff;
		overflow-y: unset;
		gap: 0;
		max-height: unset;
		height: unset;
	}
}
multi-upload other-options delivery-block .delivery-block {
	line-height: 125%;
	font-size: 13px;
	margin-bottom: 10px;
	margin-top: 0;
  padding: 8px 36px;
}

/* Pin footer-block (pre-cut + Proceed + Chip) to the bottom of the right
   column on DESKTOP only. Mobile uses `display: contents` to flatten and
   re-orders via `order:`, so this must NOT apply on mobile.
   2026-07-01 (Owen): proper sticky-footer instead of position:absolute —
   the absolute pin OVERLAPPED the column content when it ran long (footer
   painted over the Ninja Guarantee card). Now: the column is a 2-row grid
   [scrollable top | in-flow footer]; .otherOptions__top scrolls internally,
   footer-block sits static at the bottom with a white bg. No overlap at any
   content height. */
@media (min-width: 701px) {
	multi-upload other-options {
		position: relative !important;
		gap: 0 !important;
		padding-bottom: 0 !important;
		grid-template-rows: minmax(0, 1fr) auto !important;
		align-items: stretch !important;
		overflow: hidden !important;
		/* full height — the base max-height calc(100% - 10px) left the column
		   divider (border-left) stopping 10px short of the modal bottom */
		height: 100% !important;
		max-height: 100% !important;
	}
	multi-upload other-options .otherOptions__top {
		overflow-y: auto;
		/* vertical scroll ONLY — overflow-y:auto computes overflow-x to auto
		   too, and a 1px sub-pixel overflow was painting a horizontal
		   scrollbar in the right column (Owen 2026-07-06). */
		overflow-x: hidden;
		min-height: 0;
		scrollbar-width: thin;
		padding-bottom: 12px;
	}
	multi-upload other-options footer-block {
		position: static !important;
		background: #fff;
		display: flex !important;
		flex-direction: column !important;
		gap: 10px !important;
		max-width: none !important;
		width: auto !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
		margin: 0 !important;
		min-height: 0 !important;
		padding: 10px 0 10px !important;
	}
	multi-upload other-options footer-block proceed-to-checkout.grt__desktop__footerBlock {
		position: static !important;
		margin: 0 !important;
		width: 100% !important;
	}
	multi-upload other-options footer-block .multiupload-rewards-multi {
		position: static !important;
		margin: 0 !important;
		width: 100% !important;
	}
	multi-upload other-options footer-block > * {
		min-width: 0 !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}
}
/* Zero the reward chip's own top margin in multi-upload contexts so the
   footer-block gap is the only thing controlling the Proceed → Chip distance. */
multi-upload other-options footer-block .multiupload-rewards-multi .reward-point-block,
.multiupload-rewards-mobile .reward-point-block {
	margin: 0 !important;
}
/* Reward chip slot inside the multi-upload footer. */
.multiupload-rewards-multi {
	min-width: 0 !important;
	max-width: 100% !important;
	margin: 0;
	box-sizing: border-box;
}
/* Common chip layout — applies to BOTH the desktop slot
   (.multiupload-rewards-multi) AND the mobile slot
   (.multiupload-rewards-mobile). Keeps eyebrow + copy on one line each, with
   ellipsis if they would overflow, and gives the body min-width:0 so it can
   shrink inside the inline-flex chip. */
.multiupload-rewards-multi .reward-point-block,
.multiupload-rewards-multi #__reward_info,
.multiupload-rewards-mobile .reward-point-block,
.multiupload-rewards-mobile .reward-point-block > div {
	min-width: 0 !important;
	max-width: 100% !important;
	width: 100% !important;
	box-sizing: border-box !important;
}
.multiupload-rewards-multi #__reward_info,
.multiupload-rewards-mobile .reward-point-block > div {
	display: flex !important;
	align-items: center !important;
	padding: 4px 8px !important;
	min-height: 0 !important;
	height: auto !important;
}
.multiupload-rewards-multi .reward-crest__eyebrow,
.multiupload-rewards-mobile .reward-crest__eyebrow {
	font-size: 9px !important;
	text-align: left !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}
.multiupload-rewards-multi .reward-crest__copy,
.multiupload-rewards-mobile .reward-crest__copy {
	font-size: 12px !important;
	text-align: left !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}
.multiupload-rewards-multi .reward-crest__body,
.multiupload-rewards-mobile .reward-crest__body {
	align-items: flex-start !important;
	text-align: left !important;
	min-width: 0 !important;
	flex: 1 1 auto !important;
	overflow: hidden !important;
}
.multiupload-rewards-multi .reward-crest__body > *,
.multiupload-rewards-multi .reward-crest__eyebrow-row,
.multiupload-rewards-mobile .reward-crest__body > *,
.multiupload-rewards-mobile .reward-crest__eyebrow-row {
	text-align: left !important;
	max-width: 100% !important;
}
.multiupload-rewards-mobile .reward-crest__eyebrow-row {
	flex-wrap: nowrap !important;
	overflow: hidden !important;
}
/* Make sure the swatch never shrinks below its intended size. */
.multiupload-rewards-multi .reward-crest__swatch,
.multiupload-rewards-mobile .reward-crest__swatch {
	flex-shrink: 0 !important;
}
@media (max-width: 700px) {
	/* Hide the desktop slot on mobile (lives inside other-options right column,
	   which itself is hidden/reflowed on mobile). The mobile slot
	   .multiupload-rewards-mobile (rendered inside .grt__mobile__footerBlock
	   under Proceed to Checkout) stays visible. */
	.multiupload-rewards-multi { display: none !important; }
	.multiupload-rewards-mobile {
		display: block !important;
		margin: 0 !important;
		text-align: center !important;
		width: 100% !important; /* slice carried an explicit ~calc(100% - 14px) width, leaving the chip 14px short of the CTA */
		max-width: 100% !important;
		box-sizing: border-box !important;
	}
	/* Match the PDP mobile behavior: chip pill is centered (max-content
	   width with auto margins) but the text inside stays left-aligned
	   (handled by the .reward-crest__body rules above). Override the
	   width:100% from the shared chip rules with !important. */
	/* CTA + chip: SAME width AND left/right edges (Owen). The CTA carried a
	   ~7px side margin the chip didn't have — zero it so both fill the
	   footer-block identically. */
	footer-block.grt__mobile__footerBlock proceed-to-checkout {
		margin-left: 0 !important;
		margin-right: 0 !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}
	/* Full width, matching the Proceed to Checkout button above it (Owen
	   2026-07-01 — the centered max-content pill rendered narrower than the
	   CTA). Text inside stays left-aligned via the .reward-crest__body rules. */
	.multiupload-rewards-mobile .reward-point-block,
	.multiupload-rewards-mobile .reward-point-block > div {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		box-sizing: border-box !important;
	}
	.multiupload-rewards-mobile .reward-point-block {
		display: flex !important;
	}
	/* Show the free shipping countdown bar in multi-upload on mobile too
	   (per request). Force-visible with !important so it beats the
	   hide-if-empty-cart JS inline display:none, same as the desktop block
	   below. The ≤700px block further down gives it order:1 +
	   margin-bottom:15px so it sits above the Fastest Delivery block.
	   Unlike desktop, the title is allowed to wrap on narrow screens. */
	multi-upload other-options multi-shipping-bar,
	multi-upload other-options .otherOptions__top .cart-notice,
	multi-upload other-options .cart-notice,
	multi-upload other-options free-shipping-bysize,
	multi-upload other-options free-shipping-blanks {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		height: auto !important;
		overflow: visible !important;
	}
	multi-upload other-options free-shipping-bysize .freeShipping__title,
	multi-upload other-options free-shipping-blanks .freeShipping__title {
		display: flex !important;
		visibility: visible !important;
		opacity: 1 !important;
		height: auto !important;
		align-items: center !important;
		/* Mobile: center the notice text horizontally (desktop keeps
		   space-between with the amount pushed right). */
		justify-content: center !important;
		flex-wrap: wrap !important;
		text-align: center !important;
		gap: 4px 6px;
	}
	multi-upload other-options free-shipping-bysize .freeShipping__title > div,
	multi-upload other-options free-shipping-blanks .freeShipping__title > div {
		display: inline-flex !important;
		flex-wrap: wrap !important;
		justify-content: center !important;
		gap: 4px;
	}
	multi-upload other-options .cart-notice,
	multi-upload other-options .otherOptions__top .cart-notice {
		text-align: center !important;
	}
	multi-upload other-options .cart-notice__slider {
		display: block !important;
	}
	/* Mobile: both the free-ship notice and the Fastest Delivery box span
	   the full content width and share the same gutter. other-options
	   carries the 10px horizontal padding (the gutter); these children go
	   full-width inside it with box-sizing:border-box and no extra margin,
	   so their left/right edges line up. */
	multi-upload other-options multi-shipping-bar,
	multi-upload other-options .cart-notice,
	multi-upload other-options .otherOptions__top .cart-notice,
	multi-upload other-options free-shipping-bysize,
	multi-upload other-options free-shipping-blanks,
	multi-upload other-options delivery-block,
	multi-upload other-options delivery-block .delivery-block {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	/* Trim the delivery box's wide 36px side padding on mobile so the
	   centered text has room at full width without wrapping. */
	multi-upload other-options delivery-block .delivery-block {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}
}
@media (min-width: 701px) {
	/* Desktop: hide the mobile slot (only desktop slot shows). */
	.multiupload-rewards-mobile { display: none !important; }
}

/* Desktop multi-upload: force the free shipping bar visible, fit on one line. */
@media (min-width: 701px) {
	multi-upload other-options multi-shipping-bar,
	multi-upload other-options .cart-notice,
	multi-upload other-options free-shipping-bysize,
	multi-upload other-options free-shipping-blanks {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		height: auto !important;
		overflow: visible !important;
	}
	multi-upload other-options free-shipping-bysize .freeShipping__title,
	multi-upload other-options free-shipping-blanks .freeShipping__title {
		display: flex !important;
		visibility: visible !important;
		opacity: 1 !important;
		height: auto !important;
		min-height: 20px !important;
		flex-wrap: nowrap !important;
		white-space: nowrap !important;
		align-items: center !important;
		justify-content: space-between !important;
	}
	multi-upload other-options free-shipping-bysize .freeShipping__title > div,
	multi-upload other-options free-shipping-blanks .freeShipping__title > div {
		display: inline-flex !important;
		flex-wrap: nowrap !important;
		white-space: nowrap !important;
		align-items: center !important;
		gap: 4px;
		flex: 1 1 auto;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	multi-upload other-options free-shipping-bysize .freeShipping__title > div > span,
	multi-upload other-options free-shipping-blanks .freeShipping__title > div > span {
		white-space: nowrap !important;
	}
	multi-upload other-options free-shipping-bysize .freeShipping__title strong,
	multi-upload other-options free-shipping-blanks .freeShipping__title strong {
		flex-shrink: 0 !important;
		white-space: nowrap !important;
	}
	multi-upload other-options .cart-notice__slider {
		display: block !important;
	}
	/* Ensure the bar's parent (cart-notice + the other-options column) doesn't
	   clamp width below content. */
	multi-upload other-options multi-shipping-bar {
		width: 100% !important;
		max-width: 100% !important;
	}
}
multi-upload proceed-to-checkout {
	margin-top: 0px;
}

/* ═══ Popup pricing table + guarantee — MIRROR of the on-page (nt-dtf-3col)
   design (Owen: "replace table and guarantee in the right with what's on
   page"). Values copied from nt-dtf-3col.css:94-161, which deliberately
   excludes the modal via :not(multi-upload *) — this block is the modal's
   copy of the same look, scoped to multi-upload prices-table. ═══ */
/* No outer card box in the popup (Owen) — the right column provides its own
   framing; only the rows/selected-ring styling from the page carries over. */
multi-upload prices-table .pricesTable__table {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
	overflow: visible;
}
/* tighten (Owen): the theme's subText margin-bottom (20px) + 10px padding
   inside every header CELL stacked into a dead zone between "discount per
   piece." and the first tier row */
/* 12px = the cashback chip's "Earn up to..." real text size (span.reward-crest__copy — Owen) */
multi-upload prices-table .pricesTable__subText { margin-bottom: 8px !important; font-size: 12px !important; line-height: 1.4 !important; }
/* column header row — 14px sides = the selected ring's inset, so all three
   columns align across header / plain tiers / the ring (Owen) */
multi-upload prices-table .pricesTable__tableHeading { padding: 4px 14px 8px !important; border: 0 !important; }
multi-upload prices-table .pricesTable__tableHeading > * { color: #4b5563 !important; font-weight: 600 !important; font-size: 11px !important; padding: 0 !important; }
multi-upload prices-table .pricesTable__tableHeading_2,
multi-upload prices-table .pricesTable__tableHeading_3 { text-align: right !important; }
/* rows: clean rhythm, ONE divider between tiers (top only — the theme's
   per-row border-bottom doubled every line and left a trailing divider
   under the last tier; killed here) */
multi-upload prices-table .pricesTable__item { padding: 0 !important; border-bottom: 0 !important; }
multi-upload prices-table .pricesTable__item:not(.selected) > * { padding-top: 0 !important; padding-bottom: 0 !important; }
/* the SELECTED ring's cells too (theme gives every cell 10px vertical padding
   — it read as extra space above "1-14 pcs" inside the ring); the hint keeps
   its own 3px top */
multi-upload prices-table .pricesTable__item.selected > *:not(.pricesTable__item__msg) { padding-top: 0 !important; padding-bottom: 0 !important; }
multi-upload prices-table .pricesTable__items > .pricesTable__item:not(.selected) { border-top: 1px solid #eef0f2 !important; padding: 10px 14px !important; }
/* kill the theme's 10px padding INSIDE each row cell — headers have none, so
   the text edges were ~10-12px off column-to-column */
multi-upload prices-table .pricesTable__item_1,
multi-upload prices-table .pricesTable__item_2,
multi-upload prices-table .pricesTable__item_3 { padding-left: 0 !important; padding-right: 0 !important; }
/* no leading divider on the first tier — note the View All bar is the FIRST
   CHILD of .pricesTable__items, so target both the row right after it and
   the plain first-child case (viewAll absent on single-tier products) */
multi-upload prices-table .pricesTable__items > .pricesTable__item:first-child,
multi-upload prices-table .pricesTable__items > .pricesTable__table_viewAll + .pricesTable__item { border-top: 0 !important; }
/* qty cell */
multi-upload prices-table .pricesTable__item_1 { font-size: 13px !important; color: #1f2937 !important; font-weight: 400 !important; white-space: nowrap !important; }
multi-upload prices-table .pricesTable__item.selected .pricesTable__item_1 { font-weight: 500 !important; }
/* price cell — SAME size/style as the line items' price (Owen): discounted
   price 14px/600/#000 with the 10px #000 "ea", matching .__discountedPrice
   + its span in the size rows. */
multi-upload prices-table .pricesTable__item_2 { font-size: 10px !important; color: #000 !important; text-align: right !important; font-weight: 400 !important; white-space: nowrap !important; }
multi-upload prices-table .pricesTable__item_2 symbol,
multi-upload prices-table .pricesTable__item_2 discount { font-size: 14px !important; font-weight: 600 !important; color: #000 !important; }
/* discount cell: bold "X% off" */
multi-upload prices-table .pricesTable__item_3 { font-size: 12px !important; font-weight: 700 !important; color: #1f2937 !important; text-align: right !important; white-space: nowrap !important; }
/* selected row: clean rounded green ring via a real border (kill the theme's
   square outline animation pseudo-elements) */
multi-upload prices-table .pricesTable__items > .pricesTable__item.selected {
	background: #f1faf5 !important;
	border: 1.5px solid #21AF70 !important;
	border-radius: 12px !important;
	outline: none !important;
	box-shadow: none !important;
	padding: 14px !important; /* uniform — top/bottom match the 14px sides (Owen) */
	margin: 4px 0 6px !important;
	flex-wrap: wrap !important;
}
multi-upload prices-table .pricesTable__items > .pricesTable__item.selected::before,
multi-upload prices-table .pricesTable__items > .pricesTable__item.selected::after {
	display: none !important;
}
/* the "Add N of this design…" hint — full width below, gray, bold number */
/* padding shorthand: kills the theme's leftover 10px sides + 10px bottom —
   the hint text now spans exactly as wide as the qty/price line above it */
multi-upload prices-table .pricesTable__item__msg { flex: 0 0 100% !important; width: 100% !important; order: 9 !important; font-size: 12px !important; line-height: 1.4 !important; color: #6b7280 !important; padding: 3px 0 0 !important; font-weight: 400 !important; margin-top: 0 !important; }
multi-upload prices-table .pricesTable__item__msg b { color: #1f2937 !important; font-weight: 700 !important; }
/* guarantee: white star card (was the green banner) */
multi-upload prices-table .print_perfect {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	background: #fff !important;
	border: 1px solid #E4E4E6 !important;
	border-left: 5px solid #A6A7AB !important;
	border-radius: 14px !important;
	padding: 16px 18px !important;
	box-shadow: none !important;
	margin-top: 10px;
}
multi-upload prices-table .print_perfect > img { display: none !important; }
multi-upload prices-table .print_perfect::before {
	content: "" !important;
	display: block !important;
	flex: none !important;
	width: 26px !important;
	height: 26px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B2B2B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E") !important;
}
multi-upload prices-table .print_perfect p { margin: 0 !important; color: #1f2937 !important; font-size: 13px !important; line-height: 1.4 !important; font-weight: 400; }
multi-upload prices-table .print_perfect p strong { display: inline !important; text-transform: none !important; letter-spacing: normal !important; color: #1f2937 !important; font-weight: 700 !important; font-style: normal !important; }
multi-upload prices-table .print_perfect p em { display: inline !important; font-style: italic !important; color: #1f2937 !important; font-weight: 400 !important; }

/* ACTIVE INACTIVE TABS MANAGE FOR MULTI UPLOAD START */
multi-upload uploaded-files-block:has(sizes-blocks .precut-unit-logic__discount > span:empty) .widthHeight__custom .__originalPrice {
	opacity: 0;
	visibility: hidden;
	margin-top: 4px;
}
/* (removed) The modal used to grey the OTHER tab's rows to 0.5 opacity —
   the on-page single upload shows all edited rows as ONE full-opacity active
   list (the tab only picks what "Add another size" adds; focusing any row
   flips the tab to that row's type). Match the page: no greying. */
multi-upload uploaded-files-block:has(preview-box preview-block.image-loading) .zoom-text,
multi-upload uploaded-files-block:has(preview-box preview-block.image-loading) toggle-options,
multi-upload uploaded-files-block:has(preview-box preview-block.image-loading) line-items,
multi-upload uploaded-files-block:has(preview-box preview-block.image-loading) item-no .itemNo__action,
multi-upload uploaded-files-block:has(preview-box preview-block.image-loading) preview-box .previewText,
multi-upload:has(preview-box preview-block.image-loading) proceed-to-checkout {
	opacity: 0.5;
	pointer-events: none;
}

multi-upload uploaded-files-block:has(preview-box preview-block.image-loading) .widthHeight__item__popular > div,
multi-upload uploaded-files-block:has(preview-box preview-block.image-loading) .widthHeight__item_inputWrapper,
multi-upload uploaded-files-block:has(preview-box preview-block.image-loading) .precut-unit-logic__qty > div {
	position: relative;
  color: transparent !important;
  background-color: #e0e0e0;
  border-color: #e0e0e0 !important;
	background-image: unset !important;
  pointer-events: none;
  user-select: none;
  overflow: hidden;
}

multi-upload uploaded-files-block:has(preview-box preview-block.image-loading) preview-block .edit-with-ai,
multi-upload uploaded-files-block:has(preview-box preview-block.image-loading) .widthHeight__item_inputWrapper > *,
multi-upload uploaded-files-block:has(preview-box preview-block.image-loading) .precut-unit-logic__qty > div > *,
multi-upload uploaded-files-block:has(preview-box preview-block.image-loading) .widthHeight__item__popular > div > * {
  color: transparent !important;
	background-color: transparent !important;
	border-color: transparent !important;
	opacity: 0;
}

multi-upload uploaded-files-block:has(preview-box preview-block.image-loading) .widthHeight__item_inputWrapper::after,
multi-upload uploaded-files-block:has(preview-box preview-block.image-loading) .precut-unit-logic__qty > div::after,
multi-upload uploaded-files-block:has(preview-box preview-block.image-loading) .widthHeight__item__popular > div::after {
	content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  ) !important;
  animation: shimmer 1.2s infinite ease-in-out !important;
  transition: opacity 0.4s ease !important;
  opacity: 1 !important;
	height: unset !important;
}

multi-upload uploaded-files-block sizes-blocks .widthHeight__custom[dpi-warning="Yes"] .widthHeight__item_inputWrapper,
multi-upload uploaded-files-block sizes-blocks .widthHeight__custom[dpi-warning="Yes"] .popularSizes {
	border: 1px solid #FF8800 !important;
	box-shadow: none !important;
	outline: 1px solid #FF8800 !important;
}

multi-upload uploaded-files-block sizes-blocks .widthHeight__custom .widthHeight__item:has(.widthHeight__value.error) .widthHeight__item_inputWrapper,
multi-upload uploaded-files-block sizes-blocks .widthHeight__custom .widthHeight__item:has(.widthHeight__value.minError) .widthHeight__item_inputWrapper {
	border: 1px solid #f00 !important;
	outline: 1px solid #f00 !important;
}
multi-upload sizes-blocks precut-unit-logic .customQtyFile__qty.error {
	border: 1px solid #f00 !important;
	outline: 1px solid #f00 !important;
}


multi-upload another-upload-multi {
	margin-bottom: 10px; /* same 10px rhythm as the cards + side padding */
	display: block;
	/* start, not flex-end: upload-area is a height-filling grid, so its last
	   row stretches to absorb leftover height — flex-end rode this block to
	   the BOTTOM of that stretched row, leaving a huge dead gap between the
	   upload cards and "Add another design". start keeps it flowing directly
	   below the size blocks; when content overflows, the area scrolls anyway. */
	align-self: start;
	position: relative;
}
multi-upload another-upload-multi.dragover .secondDropZone,
another-upload.dragover .secondDropZone,
another-upload:hover .secondDropZone {
	box-shadow: 0 0 10px #46aae3;
}
multi-upload another-upload-multi .anotherUpload__title {
	font-size: large;
	margin-bottom: 12px;
	text-align: center;
}
multi-upload .addToCartGroupItemsMultiple {
	width: 100%;
}
multi-upload select {
	background-position: calc(100% - 10px) center;
}
multi-upload .edit-with-ai {
	padding: 0 12px;
	bottom: 140px !important;
	left:0 !important;
}
 
@media (max-width:768px){
	multi-upload .edit-with-ai { 
	bottom: 140px !important;
 }
 multi-upload toggle-options{
	max-width:100% !important;
 }
}

multi-upload uploaded-files-block line-items-popular .widthHeight__custom:has(.popularSizes option:checked[value=""]) .smart-sizing,
multi-upload uploaded-files-block line-items-popular .widthHeight__custom:has(.popularSizes option:checked[value=""]) dpi-warning {
	display: none;
}
/* Unselected popular row hides its dpi-warning (rule above), which removed the ~6px reserve
   that custom rows keep under the qty line — add it back as padding so the space under the
   qty line matches custom on all instances. */
multi-upload uploaded-files-block line-items-popular .widthHeight__custom:has(.popularSizes option:checked[value=""]) {
	padding-bottom: 12px;
}
multi-upload uploaded-files-block line-items-popular .widthHeight__custom:has(.popularSizes option:checked[value=""]) .popularSizes {
	border: 1px solid #D9D9D9 !important;
	outline: none !important;
}
/* multi-upload .smart-sizing {
	display: flex;
} */
.template-product-multiupload_vividpopular multi-upload .smart-sizing,
.smart-sizing-true multi-upload .smart-sizing,
.template-product-uv-dtf-by-size multi-upload .smart-sizing {
	display: flex;
}
multi-upload .widthHeight__option-toolTip {
	align-self: center;
  line-height: 1;
  position: relative;
}
multi-upload .widthHeight__option-toolTip:hover .widthHeight__option-toolTip__content {
	display: block;
}

multi-upload .widthHeight__option-toolTip__content {
	position: absolute;
	display: none;
	z-index: 1;
	background-color: #000;
	padding: 7px;
	border-radius: 6px;
	line-height: 130%;
	font-weight: 500;
	color: #fff;
	width: 250px;
	left: calc(50% - -8px);
	transform: translateX(-50%);
	transition: 0.2s all ease-in-out;
}

@media (max-width: 768px) {
	multi-upload uploaded-files-block:has(sizes-blocks .precut-unit-logic__discount > span:empty) .widthHeight__custom .__originalPrice {
		height: 4px;
	}
}
@media (max-width: 450px) {
	multi-upload sizes-blocks precut-unit-logic .precut-unit-logic__grid .precut-unit-logic__discount {
		max-width: calc(100% - 10px);
	}
	multi-upload .precut-unit-logic__discount span {
		white-space: nowrap;
	}
}

file-remove-wrapper-multi {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #0000009c;
	z-index: 999999999;
	display: grid;
	align-items: center;
}
file-remove-wrapper-multi .fileRemoveBlock {
	background-color: #fff;
	max-width: 600px;
	width: 100%;
	height: auto;
	padding: 50px 20px 20px;
	position: relative;
	z-index: 1;
	display: grid;
	gap: 14px;
	margin: auto;
	border-radius: 8px;
	text-align: center;
}
file-remove-wrapper-multi .fileRemoveBlock__close {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 30px;
	height: 30px;
	cursor: pointer;
	z-index: 1;
}
file-remove-wrapper-multi .fileRemoveBlock__action {
	display: grid;
	gap: 12px;
}
file-remove-wrapper-multi .fileRemoveBlock__action > button {
	width: 100%;
}

/* ACTIVE INACTIVE TABS MANAGE FOR MULTI UPLOAD END */

body:has(multi-upload-wrapper.multiUpload.active) {
	overflow: hidden;
}
.customer_designes .use_design {
	display: none;
}
.customer_designes .checkbox-input {
	width: 100%;
}
.customer_designes ul li:has(.upload_tools .popupinput[data-src*="upload.cloudlift.app"]) {
	display: none;
}
#purchased_files .use_designes_bulk_btn .use_designes_bulk,
#uploaded_files .use_designes_bulk_btn .use_designes_bulk {
	margin-left: auto;
	display: inherit;
}
.customTabelPopup__overlay,
.customTabelPopup__overlay-2,
.customTabelPopup__overlay-3,
.customTabelPopup__overlay-4,
.customTabelPopup__overlay-5,
.customTabelPopup__overlay-6,
.customTabelPopup__overlay-13 {
	z-index: 9999999 !important;
}
.newPrecutModal .dFlex {
	display: flex;
  gap: 20px;
}
.customTabelPopup__overlay-5 .img-container {
	padding: 0 !important;
}
.another_alert_by_size::after {
	z-index: 1;
}
.checkbox-input i {
	background-color: #ffffff91;
  border: 1px solid #00000087;
}
.customTabelPopup__overlay-5 img {
  max-height: 100%;
}
#PBarNextFrameWrapper {
	/* display: none; */
}


.customTabs__mainTitle {
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 10px;
}
.customTabs__wrapper {
	display: grid;
	grid-template-columns: auto auto auto;
	margin-bottom: 20px;
}
.customTabs__item {
	padding: 16px 12px 12px;
	width: 100%;
	border: 1px solid transparent;
	position: relative;
	border-radius: 6px 6px 0 0;
	border-bottom-color: #B9B9B9;
	cursor: pointer;
}
.customTabs__item.active {
	border: 1px solid #B9B9B9;
	border-bottom-color: transparent;
}
.customTabs__item::before {
	content: "";
	position: absolute;
	top: -1px;
	left: -1px;
	height: 6px;
	width: calc(100% + 2px);
	background-color: #fff;
	border-radius: 25px 25px 0 0;
}
.customTabs__itemTitle {
	font-size: 11px;
	font-weight: bold;
	letter-spacing: 2px;
	margin-bottom: 4px;
}
.customTabs__itemSubTitle {
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	letter-spacing: normal;
}
.customTabs__contentWrapper {
	display: grid;
	align-items: self-start;
}
.customTabs__content {
	display: none;
	/* display: grid; */
	grid-template-columns: 50% auto;
	gap: 60px;
	align-items: center;
	padding-bottom: 26px;
	border-bottom: 1px solid #B9B9B9;
}
.customTabs__content.active {
	display: grid;
}
.customTabs__content img {
	max-width: 100%;
}
.customTabs__contentTitle {
	font-weight: 600;
	font-size: 15px;
	line-height: 120%;
	letter-spacing: 0;
}
.customTabs__contentText {
	font-weight: 400;
	font-size: 14px;
	line-height: 130%;
	letter-spacing: 0;
	color: #0009;
	margin-bottom: 30px;
}
.customTabs__contentBtn {
	padding: 16px 24px;
	background-color: #FA1E75;
	color: #fff;
	width: max-content;
	border-radius: 16px;
	font-size: 15px;
	font-weight: bold;
	cursor: pointer;
}
@media (max-width: 767px) {
	.customTabs {
		display: none;
	}
}
@media (min-width: 769px) {
	upload-controls sizes-blocks .widthHeight__customHeader .qtyItem__head {
		margin-left: 10px;
	}
	upload-controls sizes-blocks .widthHeight__customHeader .priceItem__head {
		padding-left: 18px;
	}
	upload-controls sizes-blocks .widthHeight__customHeader .totalItem__head {
		padding-left: 4px;
	}
	upload-controls sizes-blocks precut-unit-logic {
		width: calc(100% - 12px);
		margin-left: 10px;
	}
	upload-controls sizes-blocks precut-unit-logic .precut-unit-logic__grid .precut-unit-logic__price {
		margin-left: 8px;
	}
}
@media (max-width: 768px) {
	upload-controls sizes-blocks .widthHeight__custom .widthHeight__item .widthHeight__item_inputWrapper,
	upload-controls sizes-blocks precut-unit-logic .precut-unit-logic__qty > div,
	upload-controls sizes-blocks .widthHeight__custom .widthHeight__item__popular > div {
		margin-top: 8px;
	}
}
product-page:has(next-element:not(.hidden)) .aiPlusDesignStudio {
	display: none;
}

.aiPlusDesignStudio {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px 36px;
	margin-bottom: 36px !important;
}
.aiPlusDesignStudio__aiBlock,
.aiPlusDesignStudio__studioBlock {
	background-color: #f3f3f3;
	border-radius: 8px;
	padding: 1.5rem 1.5rem 0;
	transition: 0.2s all ease-in-out;
	cursor: pointer;
	user-select: none;
}
.aiPlusDesignStudio__aiBlock:hover,
.aiPlusDesignStudio__studioBlock:hover {
	background-color: #e5e5e5;
}
.aiPlusDesignStudio__title {
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 10px;
}
.aiPlusDesignStudio__subTitle {
	color: #00000099;
	margin-bottom: 26px;
	font-size: 14px;
	list-style: 20px;
	font-weight: normal;
}
.aiPlusDesignStudio__link {
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 4px;
	max-width: max-content;
	position: relative;
}
.aiPlusDesignStudio__aiBlock .aiPlusDesignStudio__link,
.aiPlusDesignStudio__aiBlock .aiPlusDesignStudio__link svg {
	color: #D50D53;
	fill: #D50D53;
}
.aiPlusDesignStudio__studioBlock .aiPlusDesignStudio__link,
.aiPlusDesignStudio__studioBlock .aiPlusDesignStudio__link svg {
	color: #008AD0;
	fill: #008AD0;
}
.aiPlusDesignStudio__img {
	margin-top: 2rem;
	line-height: 0;
	width: calc(100% + 3rem);
	margin-left: -1.5rem;
}
.aiPlusDesignStudio__img img {
	max-width: 100%;
}
@media (max-width: 768px) {
	.aiPlusDesignStudio {
		gap: 10px 18px;
	}
	.aiPlusDesignStudio__aiBlock,
	.aiPlusDesignStudio__studioBlock {
		padding: 1rem 1rem 0;
	}
}

/* Target the parent <next-element> when it has a <preview-block.image-loading> */
next-element.only_progressBar:has(preview-block.image-loading):has(.fileProgress:not(.hidden))
  .previewBlock_and_pricesTable,
next-element.only_progressBar:has(preview-block.image-loading):has(.fileProgress:not(.hidden))
  tab-controls,
next-element.only_progressBar:has(preview-block.image-loading):has(.fileProgress:not(.hidden))
  .sizeGuideTrigger,
next-element.only_progressBar:has(preview-block.image-loading):has(.fileProgress:not(.hidden))
  sizes-blocks,
next-element.only_progressBar:has(preview-block.image-loading):has(.fileProgress:not(.hidden))
  .printType, 
next-element.only_progressBar:has(preview-block.image-loading):has(.fileProgress:not(.hidden))
  .designerNote_and_preCut,
next-element.only_progressBar:has(preview-block.image-loading):has(.fileProgress:not(.hidden))
  another-upload,
next-element.only_progressBar:has(preview-block.image-loading):has(.fileProgress:not(.hidden))
  proceed-to-checkout,
  next-element.only_progressBar:has(preview-block.image-loading):has(.fileProgress:not(.hidden)) #product_reward-point-block,
product-page:has( next-element.only_progressBar .fileProgress:not(.hidden) ) .underCTA {
  display: none !important;
}

.only_progressBar .fileProgress{
  background-color: #e6f6ff;
  border-radius: 15px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align:center;
}
.only_progressBar .fileProgress .fileProgress__ninjaImg{
  max-width: 80px;
}
.only_progressBar .fileProgress .loadingPercent__counter{
color: #000;
  font-weight: bold;
}

.only_progressBar .fileProgress .fileProgress__barWrap {
	position: static;
	width: 90%;
	max-width:500px;
	text-align: left;
	border-radius: .625rem;
	background-color: #fff;
	overflow: hidden;
	margin-top:10px;
	margin-bottom:10px;
}

.only_progressBar .fileProgress .fileProgress__barWrap::before{
	display:none;
}
.only_progressBar .fileProgress .fileProgress__bar img{
 opacity:0;
}
.only_progressBar  .fileProgress .fileProgress__bar{
background-color: var(--clr-blue) !important;
background-image:unset !important;
display: block;
border-radius: 0;
}
.only_progressBar  .fileProgress  p{
	opacity: 0.6;
	font-size: 14px;
	margin-bottom: 0;
}
.easyzoom.image-loading .upload_tools{
	pointer-events:all !important;
}

.smart-sizing{
	display:none;
	font-size:12px;
	font-weight:700;
	align-items:center;
	gap:5px;
	color:#4ab543;
	margin-top: 5px;
}
.smart-sizing.active{
	display:flex;
}
.smart-sizing img{
	height:16px;
	width:16px;
}
.smart-sizing path{
	fill:#4ab543;
}

.edit-with-ai {
	position: absolute;
	padding: 5px 12px;
	box-shadow: 0 4px 6px #00000040;
	border: none;
	border-radius: 8px;
	bottom: 10px;
	left: -7px;
	background: #fff;
	display: inline-flex;
	align-items: center;
	font-weight: 600;
	font-size: 11px;
	z-index: 9;
}
.edit-with-ai .edit-with-aiFlex {
	display: flex;
	align-items: center;
	gap: 0px;
	margin: 6px 0;
}
.edit-with-ai img {
	height: 24px;
	margin-left: 5px;
	/* image-rendering: pixelated; */
}
.edit-with-ai .delIcon {
	font-size: 10px;
	border-radius: 999px;
	background-color: #999999;
	color: #fff;
	width: 18px;
	height: 18px;
	display: grid;
	align-items: center;
	padding: 1px 5px 1px 5px;
	text-align: center;
	margin-left: 14px;
	font-weight: 400;
	cursor: pointer;
	position: relative;
}
.edit-with-ai .delIcon::after {
	content: "";
	position: absolute;
	left: -7px;
	height: 100%;
	width: 1px;
	background-color: #999;

}

#ai_prompt_2{
	width:100%;
	border:2px solid #8f4098;
	font-size:12px;
	height:100px;
	line-height: 1.6;
}
#ai_generate_image_2{
	width:100%;
	margin-top:10px;
	margin-bottom:10px;
	color:#fff; 
	background: linear-gradient(90deg, #7ca1e8, #8f4098);
	display:flex;
	align-items:center;
	gap:10px;
	justify-content:center;
	font-weight:700;
}
.ai_image_results img{
	max-width:100%;
}
.ai-container._success .ai_image_results img{

	max-height: 350px !important;
}
.ai_image_results{
	display:flex;
	align-items:flex-start;
	gap:10px;
	margin-top:10px;
}
.ai_image_results > div{
	flex:1;
}
 .ai_image_results > div > div{ 
	background: #f2f2f2 url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iI0M1QzVDNSIgZD0iTTAgMGg0djRIMHpNMCA4aDR2NEgwek0xNiA4aC00VjRoNHpNMTYgMTZoLTR2LTRoNHpNOCAwaDR2NEg4ek04IDhoNHY0SDh6TTggOEg0VjRoNHpNOCAxNkg0di00aDR6Ii8+PHBhdGggZmlsbD0iIzlCOUI5QiIgZD0iTTQgMGg0djRINHpNNCA4aDR2NEg0ek0xMiA4SDhWNGg0ek0xMiAxNkg4di00aDR6TTEyIDBoNHY0aC00ek0xMiA4aDR2NGgtNHpNNCA4SDBWNGg0ek00IDE2SDB2LTRoNHoiLz48L3N2Zz4=) center center;
    display:flex;
	align-items:center;
	justify-content:center; 
	height:350px;
}
.ai_result_output{
	display:none;
}

.ai_image_results .button{
	background: #07a7f2;
  color: #fff;
  padding: 9px 13px;
  font-size: 15px;
  display:none;
  margin-top:10px;
  font-weight:600;
  margin: 10px auto;
}
#ai_status_message{
	font-size:12px;
	color:rgb(223, 22, 22);
	margin:5px 0;
}

#ai_generate_image_2:disabled,
#ai_generate_image_2[disabled]{
	opacity:0.6;
	pointer-events:none;
}

.ai-container._success .ai_image_results .button{
  display: block;
}
.ai-container._success #ai_prompt_2::placeholder {
   
} 

.ai-container{
	margin-top: 10px;
}

.ai-container._success .ai_status_info,
.ai_status_info_2{
	display:none;
}

.ai-container._success .ai_status_info_2{
 display:block;
}
.customTabelPopup__overlay-ai .customTabelPopup:has(.ai-container._success){
  max-width:650px;
}
#customer_image_preview {
	max-height:100%;
}
.ai-overlay-locked .customTabelPopup{
  pointer-events: none !important;  
}

.ai-overlay-locked button,
.ai-overlay-locked  .customTabelPopup__close{
	opacity:0.7 !important; 
}

.loading-state{
	display:none;
}

.processing-ai .ai_image_results > div:not(.loading-state) {
 display:none !important;
}
.processing-ai .ai_image_results > div.loading-state {
	display:block;
}
.processing-ai .ai_image_results > div.loading-state div {
	display:flex; 
	flex-direction:column;
	align-items:center;
	justify-content:center; 
	text-align:center;
	background:#E1F4FF;
	padding:20px;
}

.processing-ai .ai_image_results > div.loading-state div h5{
	font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.processing-ai .ai_image_results > div.loading-state div span {
	display:block;
	margin-top:10px;
	font-size:12px;
	color:#888888;
	font-weight: 500;
}

@media (max-width:768px){
	.customTabelPopup__overlay-ai	.customTabelPopup{
		height: unset !important;
	}
	#customer_image_preview{
		max-height: 200px;
	}
	.ai_image_results>div>div{
		height:unset;
	}
	.ai_image_results .button{
		font-size:12px;
	}
	.processing-ai .ai_image_results>div.loading-state div{
		height:200px;
	}
	.processing-ai .ai_image_results img{
		height: 100px;
		width: auto;
	}
	.processing-ai .ai_image_results>div.loading-state div span{
		margin-top: 4px;
	}
}

preview-box:has(
  toggle-options[show-bg-option="false"][show-superres-option="false"]
) .edit-with-ai {
  bottom: -30px !important;
}

multi-upload preview-box:has(
  toggle-options[show-bg-option="false"][show-superres-option="false"]
) .edit-with-ai {
  bottom: 5px !important;
}
multi-upload other-options delivery-block .delivery-block * {
    display: inline-block;
}
multi-upload preview-box:has(toggle-options[show-bg-option="true"][show-superres-option="false"]) .edit-with-ai,
multi-upload preview-box:has(toggle-options[show-bg-option="false"][show-superres-option="true"]) .edit-with-ai {
  bottom: 83px !important;
}

/* Mobile multi-upload modal cleanup. Three things happen here:
     1. The "Add $X for Free Ship..." notice gets centered (the parent
        flexbox uses justify-content: space-between on desktop which
        leaves the inner text left-aligned with an empty / hidden
        strong on the right).
     2. The Pre-cut "Want to save time?" box moves visually above the
        free-ship notice. Done with `display: contents` to flatten the
        otherOptions__top / footer-block wrappers so their direct
        children become flex items of `<other-options>`, then ordered.
     3. Scoped to <multi-upload> so the side-cart / drawer keep their
        existing left/right layout. */
@media (max-width: 700px) {
  multi-upload free-shipping-bysize .freeShipping__title,
  multi-upload free-shipping-blanks .freeShipping__title {
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    flex-wrap: wrap;
  }
  multi-upload free-shipping-bysize .freeShipping__title > div,
  multi-upload free-shipping-blanks .freeShipping__title > div {
    width: 100%;
    text-align: center !important;
  }

  /* Flatten so siblings can be reordered with `order` regardless of
     which wrapper they currently live inside. */
  multi-upload other-options {
    display: flex !important;
    flex-direction: column !important;
  }
  multi-upload other-options .otherOptions__top,
  multi-upload other-options footer-block {
    display: contents;
  }

  multi-upload other-options multi-shipping-bar { order: 1; }
  multi-upload other-options delivery-block     { order: 2; }
  multi-upload other-options prices-table       { order: 3; }
  multi-upload other-options precut             { order: 4; }
  multi-upload other-options proceed-to-checkout{ order: 5; }

  /* Precut spacing: sits AFTER the Ninja Guarantee (which is the last child
     of prices-table). 6px gap above and below the pre-cut box to match the
     6px gap inside the anchored mobile footer (Proceed↔Cashback).
     Width left to default so the precut respects the parent's 10px
     horizontal gutters and keeps its rounded corners. */
  multi-upload other-options {
    padding-top: 5px !important;
    padding-bottom: 0 !important;  /* let the footer's padding-top:6px be the only gap */
  }
  multi-upload other-options precut {
    width: 100% !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
    margin: 6px 0 0 0 !important;
  }

  /* 15px gap below the "Add $X for Free Ship" notice before the
     "Fastest Delivery" block. Mobile flex gap is 0 here, so apply the
     space directly to multi-shipping-bar. */
  multi-upload other-options multi-shipping-bar {
    margin-bottom: 15px;
  }
}

/* Multi-upload file-progress — mobile fix.
   Desktop layout uses `grid-template-columns: 75px auto 50px` with the
   progress bar absolutely-positioned at `top: 50px; left: 75px`. On mobile
   the message bubble wraps to 3+ lines, growing past 50px tall, so the
   bar overlaps the bubble and the fireball at the bar's right edge gets
   cropped. The ninja column is also too tight, squashing the running
   ninja gif. Fix by:
     - reducing the ninja column to 60px and giving the gif explicit width
     - moving the bar to its own row spanning all columns (position: static)
     - keeping the cancel/percent column compact
*/
@media (max-width: 600px) {
  multi-upload file-progress {
    grid-template-columns: 60px auto 50px;
    grid-template-rows: auto auto;
    gap: 8px;
    align-items: center;
  }
  multi-upload .fileProgress .fileProgress__ninjaImg {
    width: 60px;
    height: auto;
    max-width: 60px;
  }
  multi-upload .fileProgress .fileProgress__msg {
    max-width: 100%;
    font-size: 11px;
    padding: 6px 8px;
    line-height: 1.2;
  }
  multi-upload .fileProgress .fileProgress__msg svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
  }
  multi-upload .fileProgress .fileProgress__barWrap {
    position: static;
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    margin-top: 6px;
    left: auto;
    top: auto;
  }
}


/* ============================================================================
   POPUP BASE LAYER — rules the by-size pages provide via PAGE-SIDE INLINE
   styles (custom-fileupload.liquid, bySize__css.liquid, bySizeNew.liquid)
   that the shared popup silently depended on. Blanks PDPs never render those
   snippets, so the popup base must live HERE in the shared sheet (found via
   computed-style diff of an identical popup clone on UV-by-size vs gildan-g500,
   2026-07-02). multi-upload-scoped: on-page single-upload surfaces untouched;
   on by-size pages every declaration matches the value that already wins the
   cascade, so those popups are unchanged by construction. Do NOT delete on a
   "duplicate of custom-fileupload" argument — that file does not load on
   blanks and the popup must render identically on ALL surfaces. */

/* qty/price/total/discount cell columns — display:grid comes ONLY from
   custom-fileupload's inline style; without it the cells stack vertically
   (the blanks bug that surfaced this whole layer). Template/gap/margins are
   deliberately NOT ported: transferBySize.css + this sheet already own them
   at equal-or-higher specificity and porting them here could flip ties. */
multi-upload precut-unit-logic .precut-unit-logic__grid {
  display: grid;
}

/* Fastest-Delivery box — grey rounded centered card w/ bold date (base look
   from custom-fileupload; blanks rendered it as plain left-aligned text). */
multi-upload .delivery-block {
  border: 1px solid #dadada;
  background: #f4f4f4;
  text-align: center;
  border-radius: 8px;
}
multi-upload .delivery-block time,
multi-upload .delivery-block date {
  font-weight: bold;
}

/* bgRemover/superRes switches must lay out in a row at ALL viewports
   (bySizeNew.liquid load-bearing comment: viewport-gating this left the
   mobile popup stacked vertically). nt-ai-toolbar.css's higher-specificity
   modal rules (display:contents flatten etc.) still win where they apply. */
multi-upload toggle-options {
  display: flex !important;
}

/* Previous-design link ("access old data") base typography. */
multi-upload .access_old_data {
  font-size: 13px;
}
multi-upload .access_old_data a {
  color: #46aae3;
  display: inline-block;
  padding: 10px 0;
}
multi-upload .access_old_data a:hover {
  color: #005192;
}

/* "Hover to Zoom" helper text is hidden site-wide (replaced by the magnifier
   overlay) — keep it hidden in the popup on every surface too. */
multi-upload .zoom-text {
  display: none !important;
}

/* ============================================================================
   V3-LOOK ABSORPTION (Owen 2026-07-02) — the popup preview hero, corner icons,
   caption pill, badge anchor, and design-note checkbox row, natively for ALL
   surfaces. Values verbatim from nt-dtf-3col.css (which loads only on
   dtf-transfers and produced these via runtime JS moves — placeUploadIcons/
   placePreviewLabel/styleDesignNote). The shared modal markup now renders the
   icons/pill in their final positions (nt-fp-icon--*/nt-pv-pill classes are ON
   the template), so on dtf-transfers those JS transforms are idempotent
   no-ops and the duplicate unscoped nt-dtf-3col.css rules carry identical
   values. multi-upload-scoped: on-page single-upload previews untouched.
   (Supersedes the earlier .easyzoom/.upload_tools base-layer port — the icons
   are now styled by their nt-fp-icon classes, and the hero checkerboard lives
   on file-preview with the print box transparent.) */

/* Preview hero — checkerboard fills the whole file-preview; the print box
   (preview-block) goes transparent so it shows through. position:relative
   anchors the corner icons + caption pill (v3 set it inline via JS).
   ⚠ Same 8px #C0C0C0/#E6E6E6 checker as nt-dtf-3col.css's conic-gradient, but
   written as two offset 45deg linear-gradients: the CDN minifier DROPS rules
   containing conic-gradient's double-position color stops ("#E6E6E6 0 50%"),
   which silently deleted this whole rule from the parsed stylesheet on first
   deploy. Do not "simplify" back to conic-gradient. position kept as its own
   rule so the icon/pill anchoring can never be hostage to gradient parsing. */
multi-upload file-preview {
  position: relative !important;
}
multi-upload file-preview {
  background-color: #E6E6E6 !important;
  background-image:
    linear-gradient(45deg, #C0C0C0 25%, transparent 25%, transparent 75%, #C0C0C0 75%),
    linear-gradient(45deg, #C0C0C0 25%, transparent 25%, transparent 75%, #C0C0C0 75%) !important;
  background-position: 0 0, 4px 4px !important;
  background-size: 8px 8px !important;
}
multi-upload file-preview preview-block { background: transparent !important; }

/* Corner icon buttons — trash top-LEFT, zoom top-RIGHT; 30x30 grey rounded,
   15px white glyph; trash hover red, zoom hover darker. */
multi-upload file-preview > .nt-fp-icon {
  position: absolute !important; top: 10px !important; bottom: auto !important;
  z-index: 7 !important; margin: 0 !important;
  width: 30px !important; height: 30px !important; padding: 5px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  background-color: rgba(0, 0, 0, 0.4) !important; border-radius: 8px !important;
  box-shadow: none !important; cursor: pointer !important;
  transition: background-color 0.2s !important;
}
multi-upload file-preview > .nt-fp-icon a { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; }
multi-upload file-preview > .nt-fp-icon svg { width: 15px !important; height: 15px !important; display: block !important; }
multi-upload file-preview > .nt-fp-icon--trash svg path { fill: #fff !important; }
multi-upload file-preview > .nt-fp-icon--trash:hover { background-color: #e5484d !important; }
multi-upload file-preview > .nt-fp-icon--zoom:hover { background-color: rgba(0, 0, 0, 0.8) !important; }
multi-upload file-preview > .nt-fp-icon--zoom { right: 10px !important; left: auto !important; }
multi-upload file-preview > .nt-fp-icon--trash { left: 10px !important; right: auto !important; }

/* "Preview: ..." caption — white rounded pill floated bottom-center INSIDE the
   preview window. */
multi-upload file-preview > .previewText.nt-pv-pill {
  position: absolute !important;
  left: 50% !important;
  bottom: 10px !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  padding: 5px 14px !important;
  width: auto !important;
  max-width: calc(100% - 20px) !important;
  background: #fff !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15) !important;
  font-size: 11.4px !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  text-align: center !important;
  z-index: 6 !important;
}
/* Belt-and-suspenders: a previewText that hasn't been pilled never shows in
   the modal (native markup always carries the class; this covers any engine
   re-render that might strip it). */
multi-upload .previewText:not(.nt-pv-pill) { display: none !important; }

/* POWERED BY AI badge anchors to the BOTTOM border of the tools box. */
multi-upload preview-box .ai-badge { top: auto !important; bottom: -22px !important; }

/* Design-note as a CHECKBOX row (v2/v3 look): hide the pencil + chevron, icon
   box becomes a 20x20 checkbox square, title stacks over subtitle; expanded
   state fills the square blue with a white CSS checkmark. Copy comes from the
   nt-design-note render params in _multiupload-modal.liquid. */
multi-upload .nt-design-note__icon {
  width: 20px !important;
  height: 20px !important;
  background: #fff !important;
  border: 1.5px solid #cfd4da !important;
  border-radius: 6px !important;
}
multi-upload .nt-design-note__icon svg { display: none !important; }
multi-upload .nt-design-note__chevron { display: none !important; }
multi-upload .nt-design-note__title { display: flex; flex-direction: column; line-height: 1.25; }
multi-upload .nt-design-note[data-collapsed="false"] .nt-design-note__icon {
  background: #019AFF !important; color: #fff !important; position: relative !important;
}
multi-upload .nt-design-note[data-collapsed="false"] .nt-design-note__icon svg,
multi-upload .nt-design-note[data-collapsed="false"] .nt-design-note__icon i,
multi-upload .nt-design-note[data-collapsed="false"] .nt-design-note__icon img { display: none !important; }
multi-upload .nt-design-note[data-collapsed="false"] .nt-design-note__icon::after {
  content: "" !important; display: block !important; width: 6px !important; height: 10px !important;
  box-sizing: border-box !important; border: solid #fff !important; border-width: 0 2.5px 2.5px 0 !important;
  transform: rotate(45deg) !important; margin-top: -2px !important;
}

/* Full-height previews in the MODAL (Owen 2026-07-02): lift transferBySize.css's
   universal 400px hero cap (the shipped BG-remove overflow fix) for the popup
   only — the hero renders at its engine-set natural height and the checkerboard
   frame grows with it. Containment is handled here by the dead-space scale
   (the shared applyPreviewMargin mirror), so tall bg-removed crops can't
   overflow the frame. On-page surfaces keep the live 400px protection. */
multi-upload file-preview preview-block .fileupload_hero,
multi-upload file-preview preview-block #fileupload_hero {
  max-height: none;
}

/* No horizontal scroll anywhere in the modal's scrollers (Owen 2026-07-06):
   sub-pixel child widths were painting a horizontal scrollbar. Vertical
   scrolling is untouched. Companion to the .otherOptions__top overflow-x
   rule in the desktop right-column block above. */
@media (max-width: 767px) {
  .multiUpload__inner__wrapper .__multiUpload__inner {
    overflow-x: hidden;
  }
}
multi-upload upload-area {
  overflow-x: hidden;
}

/* Pre-cut row (v2/v3 look): bold title stacked over the gray subtitle, info
   icon pinned to the right edge; checkbox sized 20x20/6px to match the
   design-note icon. Copy is native in _multiupload-modal.liquid ("Pre-cut my
   transfers" / "Save time with individually cut transfers"). */
multi-upload precut .precut__row { align-items: center !important; }
multi-upload precut .precut__row input[type="checkbox"] {
  width: 20px !important;
  height: 20px !important;
  border-radius: 6px !important;
}
multi-upload precut .precut__label {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  position: relative;
  line-height: 1.25;
  padding-right: 26px;
  color: #777;
  white-space: normal !important;
  overflow: visible !important;
}
multi-upload precut .precut__label strong { color: #111 !important; font-weight: 600 !important; }
multi-upload precut .precut__label .precut__info {
  position: absolute !important;
  right: 0; top: 50%;
  transform: translateY(-50%);
  margin: 0 !important;
}

/* grt footer visibility + mobile sheet geometry — ALSO page-side until now
   (__multiuploadSnippets.liquid inline <style>, by-size pages only). Without
   it the blanks popup showed the mobile footer-block as an unstyled inline
   element at ALL widths (stray chip floating off-canvas) and never got the
   flex-column scroll/footer split on phones. Values are verbatim from the
   page-side block; this sheet's own ≤700px fused-footer polish rules
   (bg #fff, width 100%, padding 10px, !important) still override exactly as
   they do on the by-size pages. Selectors are modal-unique classes; the grt
   mobile bar lives OUTSIDE <multi-upload>, so do NOT multi-upload-scope it. */
.grt__mobile__footerBlock,
.grt__desktop__footerBlock {
  display: none;
}
@media screen and (min-width: 767px) {
  .grt__desktop__footerBlock {
    display: block;
  }
}
@media screen and (max-width: 767px) {
  .grt__mobile__footerBlock {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    padding-top: 6px;
    padding-bottom: 8px;
    gap: 6px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    background: #f2f2f2;
    width: 98%;
    margin-left: auto;
    margin-right: auto;
  }
  .multiUpload__inner__wrapper {
    height: calc(100% - 20px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: auto;
  }
  .multiUpload__inner__wrapper .__multiUpload__inner {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .grt__mobile__footerBlock .button--solid {
    display: flex;
    align-items: center;
  }
  .grt__mobile__footerBlock proceed-to-checkout {
    margin-top: 0;
    width: 96%;
    margin-left: auto;
    margin-right: auto;
  }
  .grt__mobile__footerBlock .multiupload-rewards-mobile {
    width: 96%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ============================================================================
   NINJA SIZE GUIDE — no white space between tiles (Owen 2026-07-06).
   On dtf middle-scroll + the uv copy, WHITE lines painted between the grey
   mockup tiles from three sources: the grid's white bg, a 2px WHITE
   box-shadow ring on every cell (the recolor-seep cover — found via
   elementFromPoint; the outline computes none, the shadow is the painter),
   and the cells' shipped inline white default. Grey (#f2f2f2, the tiles'
   photo bg) replaces white in all three, so the dividers disappear while the
   seep cover keeps working grey-on-grey.

   SELECTOR NOTES (hard-won):
   • The VISIBLE grid is `.dtf_body_image` (class) nested INSIDE
     `#dtf_body_image` (ID) — cells are grandchildren of the ID, so
     DESCENDANT selectors via the ID are required; `> div` misses them, and
     class-only variants LOSE to nt-dtf-3col.css's ID-strength !important
     rules ((1,2,1) beats any pile of classes).
   • Cell bg keeps the exact-match [style="background-color:#ffffff"] gate:
     that's the SHIPPED default string (bySizeNew.liquid markup — over the
     CLI push limit, unpushable); the swatch picker writes a different
     serialization, the gate stops matching, and the customer's garment
     color wins untouched (verified: blue swatch → rgb(0,91,211) painted).
   • Injection-verified at this exact specificity before shipping. */
html body.image-uploaded.template-product-by-size-bg-options #dtf_body_image,
html body.image-uploaded.template-product-by-size-bg-options #dtf_body_image .dtf_body_image,
html body.image-uploaded.template-product-uv-dtf-by-size #dtf_body_image,
html body.image-uploaded.template-product-uv-dtf-by-size #dtf_body_image .dtf_body_image {
  background: #f2f2f2 !important;
  gap: 0 !important;
}
html body.image-uploaded.template-product-by-size-bg-options #dtf_body_image ._first,
html body.image-uploaded.template-product-by-size-bg-options #dtf_body_image ._second,
html body.image-uploaded.template-product-by-size-bg-options #dtf_body_image ._third,
html body.image-uploaded.template-product-by-size-bg-options #dtf_body_image ._forth,
html body.image-uploaded.template-product-by-size-bg-options #dtf_body_image ._fifth,
html body.image-uploaded.template-product-by-size-bg-options #dtf_body_image ._sixth,
html body.image-uploaded.template-product-uv-dtf-by-size #dtf_body_image ._first,
html body.image-uploaded.template-product-uv-dtf-by-size #dtf_body_image ._second,
html body.image-uploaded.template-product-uv-dtf-by-size #dtf_body_image ._third,
html body.image-uploaded.template-product-uv-dtf-by-size #dtf_body_image ._forth,
html body.image-uploaded.template-product-uv-dtf-by-size #dtf_body_image ._fifth,
html body.image-uploaded.template-product-uv-dtf-by-size #dtf_body_image ._sixth {
  box-shadow: 0 0 0 2px #f2f2f2 !important;
  outline-color: #f2f2f2 !important;
}
html body.image-uploaded.template-product-by-size-bg-options #dtf_body_image [style="background-color:#ffffff"],
html body.image-uploaded.template-product-uv-dtf-by-size #dtf_body_image [style="background-color:#ffffff"] {
  background-color: #f2f2f2 !important;
}

/* ============================================================================
   3COL PRICING TABLE — desktop Price + Discount columns match the LINE-ITEM
   price exactly (Owen 2026-07-06): "$1.19" at 14px/600/#000 with a smaller
   grey "ea" (12px/400/#808080), same as the Step-2 size row's
   .__discountedPrice. nt-dtf-3col.css's "PRICING TABLE v2" pins the cloned
   table's cells at media-tiered sizes (13.8/15/17px bold) that outgrow the
   line item on wide monitors. The cell's "ea" is a BARE TEXT NODE
   (‹symbol›$‹/symbol›‹discount›0.95‹/discount› ea) so it can't be selected —
   instead the CELL carries the ea treatment (small grey) and the symbol/
   discount children carry the price treatment, reproducing the line-item
   look node-for-node. html-body prefix out-ranks the v2 !important rules;
   .selected variants included (the green-ring row has its own size tier);
   ≥1024 only so v2's mobile tiers are untouched. .nt-pricing-host exists
   only on the 3col pages (dtf middle-scroll + the uv copy).
   ⚠ Gate is ≥769 (the codebase's desktop line), NOT ≥1024: Owen's desktop
   window computes ~1000 CSS px (2x retina), and a 1024 gate silently left
   him on v2's untouched 15px/700 tier while wider windows verified fine. */
@media (min-width: 769px) {
  /* cell = the bare "ea" text → line-item ea: 12px/400 grey */
  html body.image-uploaded .nt-pricing-host .pricesTable__item_2,
  html body.image-uploaded .nt-pricing-host .pricesTable__item.selected .pricesTable__item_2 {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #808080 !important;
  }
  /* $ + number → line-item price: 14px/600 black */
  html body.image-uploaded .nt-pricing-host .pricesTable__item_2 sy,
  html body.image-uploaded .nt-pricing-host .pricesTable__item_2 symbol,
  html body.image-uploaded .nt-pricing-host .pricesTable__item_2 discount,
  html body.image-uploaded .nt-pricing-host .pricesTable__item.selected .pricesTable__item_2 sy,
  html body.image-uploaded .nt-pricing-host .pricesTable__item.selected .pricesTable__item_2 symbol,
  html body.image-uploaded .nt-pricing-host .pricesTable__item.selected .pricesTable__item_2 discount {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #000 !important;
  }
  /* Discount column ("20% off") → same 14px/600 as the price */
  html body.image-uploaded .nt-pricing-host .pricesTable__item_3,
  html body.image-uploaded .nt-pricing-host .pricesTable__item.selected .pricesTable__item_3 {
    font-size: 14px !important;
    font-weight: 600 !important;
  }
}
/* ⚠ THE ZOOM LAYER (the reason identical font-sizes still painted DIFFERENT
   sizes — Owen caught this, twice, against green computed-value checks):
   at ≥1024 nt-dtf-3col.css zooms the step column to 0.9 (so the line item's
   14px PAINTS at 12.6px) while pinning the pricing table to zoom:1 ("px
   sizes below are exact") — the table's 14px painted 14px, ~11% bigger than
   the line item no matter what font-size said. Verified via
   element.currentCSSZoom: table=1, lineItem=0.9. Match the zoom so equal
   fonts paint equal. Same targets + band as nt-dtf-3col's zoom:1 rule;
   html-body prefix wins the tie. */
@media (min-width: 1024px) {
  html body.image-uploaded .nt-pricing-host .pricesTable > *:not(.print_perfect) {
    zoom: 0.9 !important;
  }
}