h1.product-title {
    font-size: 24px;
    text-transform: none;
}
p.breadcrumbs { margin-bottom: 5px; }
.section { padding: 35px 0px; }


#item-selections-container { -webkit-transition: none; transition: none; }
#item-selections-container {
		display: none;
		position: fixed;
		left: 0px;
		right: 0px;
		bottom: 0px;
		height: 0px;
		background-color: #ECECEC;
		padding: 15px 25px 35px 25px;
		z-index: 1000;
		box-shadow: 5px 5px 20px #555;
		-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		-o-transition: all 0.5s ease;
		transition: all 0.5s ease;
}
#item-selections-container.visible {
	display: block;
	height: auto;
}
#item-selections-container.collapsed {
	height: 20px;
	min-height: 20px;
}

#item-selections-container.collapsed *:not(.collapse) {
	display: none;
}

div.collapse {
	display: block;
	width: 20px;
	height: 20px;
	background: url('/images/icon_collapse.svg') no-repeat;
	cursor: pointer;
	float: right;
	transform: rotate(90deg);
}
#item-selections-container.collapsed div.collapse {
	transform: rotate(-90deg);
}
#item-selections-container p.button { margin-bottom: 0px; }

#item-content h5 {
	margin-bottom: 7px;
}
#item-content .tableify {
	margin-top: 0px;
}

#item-display { text-align: center; height: 300px; }
#item-display img { 
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 300px;
}

#item-images ul { max-height: 245px; overflow-y: scroll; }
#item-images ul li {
	display: inline-block;
	width: 50px;
	margin: 3px 4px;
}
#item-images ul li.active {
	border: 1px solid #555;
}
#item-images ul li img { width: 100%; }
#item-images ul li a { display: block; }

#item-images .thumbnail {
	display: block;
	margin-bottom: 10px;
}

#logo-upload .thumbnail {
    margin-right: 15px;
}
#logo-upload .thumbnail p {
	margin: 0px;
}
#logo-upload .thumbnail img {
	max-height: 80px;
	margin: 0px;
}
#logo-upload .thumbnail input[type="radio"]:checked + label::before, #logo-upload .thumbnail input[type="radio"]:not(:checked) + label::before {
	top: calc(50% - 9px);
}
#logo-upload .thumbnail input[type="radio"]:checked + label::after, #logo-upload .thumbnail input[type="radio"]:not(:checked) + label::after {
	top: calc(50% - 5px);
}

#logo-upload .upload-result .thumbnail {
	width: 75%;
}
h4#item-price {
    font-size: 32px;
    margin-bottom: 25px;
}

.additional-desc { display: none; margin-bottom: 25px; }
.additional-desc ul { margin-bottom: 25px; }
.additional-desc table { table-layout: fixed; }

.item-options { margin-bottom: 15px; }
.selector-option {
	display: inline-block;
	margin: 3px;
}
a.selector-button {
	display: inline-block;
	color: #000000;
	padding: 7px 14px;
	background-color: #f8f8f8;
	border: 1px solid #dedede;
	min-width: 35px;
	text-align: center;
	font-size: 15px;
}
a.selector-button.selector-image { padding: 3px; background-color: #ffffff; }
a.selector-button img {
	display: inline-block;
	max-height: 70px;
	width: auto;
	text-align: center;
	padding: 3px;
}
a.selector-button.selected { cursor: default; color: #000000; }
p.pretotal { font-size: 13px; margin: 0px;  }

p.button a {
	display: inline-block;
	text-align: center;
	color: #FFFFFF;
	background-color: #27ba5b;
	border-radius: 3px;
	padding: 10px 15px;
	font-size: 13px;
	margin: 0px;
	text-decoration: none;
	min-width: 140px;
	text-transform: uppercase;
}
p.no-button a { display: inline-block; margin-left: 25px; }
p.button.rounded a {
    border-radius: 30px;
    padding: 14px 32px;
    font-size: 16px;
}

.additional-desc {
    display: none;
	padding-top: 35px;
	border-top: 1px solid #dedede;
}

#artwork-container .artwork-content { display: none; }

#pms-color-panel {
	margin: 4px 0 14px;
}
#pms-color-panel h5 {
	margin: 0 0 8px;
}
.pms-input-row {
	display: inline-flex;
	align-items: center;
	border: 1px solid #c8c8c8;
	border-radius: 4px;
	overflow: hidden;
	background: #fff;
}
.pms-input-row::before {
	content: 'PMS';
	display: flex;
	align-items: center;
	padding: 0 12px;
	height: 42px;
	background: #f0f0f0;
	border-right: 1px solid #c8c8c8;
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 1px;
	color: #555;
	white-space: nowrap;
}
#pms-number-input {
	border: none;
	outline: none;
	padding: 0 12px;
	height: 42px;
	font-size: 16px;
	width: 160px;
	background: transparent;
}
.pms-hint {
	margin: 7px 0 0;
	font-size: 12px;
	color: #aaa;
}
.pms-hint a {
	color: #888;
	text-decoration: none;
}
.pms-hint a:hover {
	text-decoration: underline;
}

#item-container .form-container p span { display: block; margin-bottom: 4px; }
#custom-notes p, #custom-notes li {
    font-size: 13px;
    font-style: italic;
}

#cat-listings {
    padding-top: 35px;
    border-top: 1px solid #dedede;
}

/* ===== Drop Zone Upload Component ===== */
.drop-zone {
    border: 2px dashed #c4d9e8;
    border-radius: 12px;
    background: #f7fbfe;
    padding: 30px 20px 26px;
    text-align: center;
    cursor: pointer;
    position: relative;
    margin-bottom: 25px;
    transition: border-color 0.2s ease, background 0.2s ease;
    outline: none;
}
.drop-zone:hover,
.drop-zone:focus-visible {
    border-color: #27ba5b;
    background: #f0fdf4;
}
.drop-zone.dragover {
    border-color: #27ba5b;
    background: #ecfdf5;
    box-shadow: 0 0 0 4px rgba(39,186,91,0.12);
}
.drop-zone.uploading {
    pointer-events: none;
    opacity: 0.8;
}
.drop-zone.dz-done {
    border-style: solid;
    border-color: #86efac;
    background: #f0fdf4;
    cursor: pointer;
}
.drop-zone .dz-icon {
    display: block;
    margin: 0 auto 12px;
    width: 44px;
    height: 44px;
    color: #94a3b8;
    transition: color 0.2s ease;
}
.drop-zone:hover .dz-icon,
.drop-zone.dragover .dz-icon { color: #27ba5b; }
.drop-zone.dz-done .dz-icon  { color: #16a34a; }
.drop-zone .dz-title {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 5px;
    transition: color 0.2s ease;
}
.drop-zone.dz-done .dz-title { color: #16a34a; }
.drop-zone .dz-subtitle { font-size: 13px; color: #64748b; margin: 0 0 6px; }
.drop-zone .dz-browse    { color: #27ba5b; text-decoration: underline; cursor: pointer; }
.drop-zone .dz-hint      { font-size: 12px; color: #9ca3af; margin: 0; }

/* Progress bar */
.dz-progress { display: none; margin-top: 14px; }
.dz-progress-bar-wrap {
    height: 5px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 5px;
}
.dz-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #27ba5b, #16a34a);
    border-radius: 3px;
    width: 0%;
    transition: width 0.3s ease;
}
.dz-progress-text { font-size: 12px; color: #64748b; margin: 0; }

/* Improved upload result thumbnails */
.file-upload .upload-result { display: none; margin-top: 10px; }
.file-upload .upload-result .thumbnail {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: 8px;
    margin-bottom: 8px;
    margin-right: 0 !important;
    width: auto !important;
}
.file-upload .upload-result .thumbnail img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: 4px;
    flex-shrink: 0;
    max-height: 80px !important;
    margin: 0 !important;
    background: #fff;
    border: 1px solid #e2e8f0;
}
.file-upload .upload-result .thumbnail p {
    display: flex;
    align-items: center;
    flex: 1;
    margin: 0 !important;
    min-width: 0;
    font-size: 13px;
    text-align: left;
}
.file-upload .upload-result .thumbnail label {
    display: flex;
    align-items: center;
}
.file-upload .upload-result .thumbnail label span.checkbox,
.file-upload .upload-result .thumbnail label span.checkmark {
    display: none;
}
.file-upload .upload-result .thumbnail input[type="radio"]:checked + label::before,
.file-upload .upload-result .thumbnail input[type="radio"]:not(:checked) + label::before {
    top: calc(50% - 9px);
}
.file-upload .upload-result .thumbnail input[type="radio"]:checked + label::after,
.file-upload .upload-result .thumbnail input[type="radio"]:not(:checked) + label::after {
    top: calc(50% - 5px);
}
.file-upload .upload-result .thumbnail .thumb-meta {
    flex: 1;
    min-width: 0;
    text-align: left;
}
.file-upload .upload-result .thumbnail .thumb-filename {
    display: block;
    font-size: 13px;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}
.file-upload .upload-result .thumbnail.icon {
    background: #eff6ff;
    border-color: #93c5fd;
}
.file-upload .upload-result .thumbnail .upload-remove,
.file-upload .upload-result > p a.upload-remove {
    font-size: 12px;
    color: #ef4444;
    cursor: pointer;
    text-decoration: underline;
    flex-shrink: 0;
}

/* Saved files grid — 2-up rows */
.file-upload .saved-files {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    border-top: 1px solid #e5e7eb;
    padding-top: 10px;
}
.file-upload .saved-files > h6,
.file-upload .saved-files > p.note {
    grid-column: 1 / -1;
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}
.file-upload .saved-files > p.note {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}
.file-upload .saved-files .thumbnail {
    display: flex !important;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    margin: 0 !important;
    cursor: pointer;
    background: #fff;
    transition: border-color 0.15s ease, background 0.15s ease;
    vertical-align: unset;
}
.file-upload .saved-files .thumbnail p {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0 !important;
}
.file-upload .saved-files .thumbnail label {
    display: flex;
    align-items: center;
    width: 100%;
    cursor: pointer;
}
.file-upload .saved-files .thumbnail img {
    flex: 1;
    min-width: 0;
    max-height: 90px;
    width: auto;
    object-fit: contain;
    max-width: 100%;
    margin: 0 !important;
    display: block;
}
.file-upload .saved-files .thumbnail label span.checkbox,
.file-upload .saved-files .thumbnail label span.checkmark {
    display: none;
}
.file-upload .saved-files .thumbnail input[type="radio"]:checked + label::before,
.file-upload .saved-files .thumbnail input[type="radio"]:not(:checked) + label::before {
    top: calc(50% - 9px);
}
.file-upload .saved-files .thumbnail input[type="radio"]:checked + label::after,
.file-upload .saved-files .thumbnail input[type="radio"]:not(:checked) + label::after {
    top: calc(50% - 5px);
}