/*
 * New panels: Shirt, Change shirt, Add text, Edit text, Fonts, Upload, Edit image and Edit clip art in the
 * clip art browser's style (clipart-panel.css). Markup from widgets/panels/new*Panels.coffee; only used
 * when Ooshirts.NewPanels.enabled() (?panels=new). Every rule is under .np-panel, so the old panels
 * are untouched. Linked from views/lab.php.
 */

.panels-container .np-panel {max-height: none; overflow: visible}
.panels-container .np-panel [hidden] {display: none !important}

.np-panel .np {
	display: flex;
	flex-direction: column;
	max-height: clamp(453px, calc(100vh - 175px), 640px);
	font-family: 'museosans', Arial, sans-serif;
	font-size: 14px;
	line-height: 1.4;
	color: #24323A;
	text-align: left;
}
.np-panel h2, .np-panel h3, .np-panel p, .np-panel ul, .np-panel fieldset {margin: 0; padding: 0}
.np-panel fieldset {border: 0; width: auto; min-width: 0}
.np-panel ul {list-style: none}
.np-panel p {font: inherit; color: inherit}
.np-panel button {font: inherit; margin: 0; cursor: pointer; -webkit-appearance: none; appearance: none}
.np-panel button:disabled {cursor: default}
.np-panel a {text-decoration: none}
.np-panel button:focus-visible,
.np-panel a:focus-visible,
.np-panel [role="button"]:focus-visible,
.np-panel li[tabindex]:focus-visible {outline: 2px solid #00A2EA; outline-offset: 2px}

/* Header */
.np-panel .np-head {flex: none; padding: 8px 16px 12px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid #E6EBEE}
.np-panel .np-titlebar {display: flex; align-items: center; gap: 4px; min-height: 40px}
.np-panel .np-title {flex: 1; min-width: 0; font-size: 18px; font-weight: 700; line-height: 1.3; color: #24323A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis}
.np-panel .np-icon-btn {flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #5B6F79; display: flex; align-items: center; justify-content: center}
.np-panel .np-icon-btn:hover {background: #F2F5F7; color: #24323A}
.np-panel .np-expand, .np-panel .np-shrink {margin-right: -10px}
.np-panel .np-back {margin-left: -10px}
.np-panel .np-undo {position: static; left: auto; bottom: auto; transform: none; flex: none; height: 34px; padding: 0 10px; margin: 0 -8px 0 0; border: 0; border-radius: 8px; background: transparent; box-shadow: none; display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; line-height: 1; color: #00659B; cursor: pointer; text-shadow: none}
.np-panel .np-undo:hover {background: #E6F4FB}
.np-panel .np-undo.disabled, .np-panel .np-undo[disabled] {color: #9AAAB2; background: transparent; cursor: default}

/* Search */
.np-panel .np-search {margin: 0; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 4px 0 14px; box-sizing: border-box; border: 1.5px solid #CED5D9; border-radius: 10px; background: #FFFFFF; color: #5B6F79}
.np-panel .np-search:focus-within {border-color: #00A2EA; box-shadow: 0 0 0 3px #D9F1FC}
.np-panel .np-search svg {flex: none}
.np-panel .np-search input {flex: 1; min-width: 0; width: auto; height: 100%; margin: 0; padding: 0; border: 0; outline: none; box-shadow: none; background: transparent; font: inherit; font-size: 15px; color: #24323A}
.np-panel .np-search input::placeholder {color: #7A8F99}
.np-panel .np-search input::-webkit-search-cancel-button {-webkit-appearance: none}
.np-panel .np-clear {flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #5B6F79; display: flex; align-items: center; justify-content: center}
.np-panel .np-clear:hover {background: #F2F5F7}

/* Chips */
.np-panel .np-chips {display: flex; flex-wrap: wrap; gap: 6px}
.np-panel .np-chip {height: 34px; padding: 0 12px; border: 1px solid #DCE2E5; border-radius: 17px; background: #FFFFFF; font-size: 14px; color: #24323A; white-space: nowrap}
.np-panel .np-chip:hover {border-color: #00A2EA; color: #00659B}
.np-panel .np-chip.is-active {border-color: #0077B6; background: #0077B6; color: #FFFFFF; font-weight: 700; cursor: default}

/* Body */
.np-panel .np-body {flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 14px; height: auto; background: none}
.np-panel .np-body > * {flex-shrink: 0}
.np-panel .np-section {display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid #E6EBEE}
.np-panel .np-label {display: block; margin: 0; padding: 0; height: auto; font-size: 11px; font-weight: 700; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: #5B6F79}
.np-panel .np-label-row {display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0}
.np-panel .np-value {min-width: 0; font-size: 13px; font-weight: 700; color: #24323A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis}
.np-panel .np-sub {font-size: 13px; color: #5B6F79}
.np-panel .np-hint {font-size: 12px; line-height: 1.45; color: #5B6F79}
.np-panel .np-empty {padding: 32px 0; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; color: #5B6F79}
.np-panel .np-loading {padding: 48px 0; text-align: center; color: #5B6F79}

/* Buttons */
.np-panel .np-primary {height: 44px; box-sizing: border-box; padding: 0 16px; margin: 0; border: 0; border-radius: 10px; background: #0077B6; background-image: none; box-shadow: none; text-shadow: none; display: flex; align-items: center; justify-content: center; gap: 8px; font: 700 15px/1 'museosans', Arial, sans-serif; color: #FFFFFF; cursor: pointer; float: none; width: auto}
.np-panel .np-primary:hover {background: #00659B; color: #FFFFFF}
.np-panel .np-primary:disabled, .np-panel .np-primary[aria-disabled="true"] {background: #B9C6CD; cursor: default}
.np-panel .np-outline-btn {height: 40px; box-sizing: border-box; padding: 0 14px; margin: 0; border: 1.5px solid #CED5D9; border-radius: 10px; background: #FFFFFF; background-image: none; box-shadow: none; text-shadow: none; display: flex; align-items: center; justify-content: center; gap: 8px; font: 700 14px/1 'museosans', Arial, sans-serif; color: #24323A; cursor: pointer; float: none; width: auto}
.np-panel .np-outline-btn:hover {border-color: #00A2EA; color: #00659B}
.np-panel .np-outline-btn svg {flex: none; color: #5B6F79}

/* Ink swatches (Edit text, Edit image, Edit clip art) */
.np-panel .np-inks {display: flex; flex-wrap: wrap; align-items: center; gap: 3px}
.np-panel .np-swatch {width: 26px; height: 26px; padding: 0; border: 2px solid transparent; border-radius: 13px; background: transparent; display: flex; align-items: center; justify-content: center}
.np-panel .np-swatch span {display: block; width: 18px; height: 18px; border-radius: 9px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2)}
.np-panel .np-swatch:hover {border-color: #B9DDF0}
.np-panel .np-swatch.is-active {border-color: #00A2EA}
.np-panel .np-swatch-original {margin-right: 6px}
.np-panel .np-more-inks {height: 26px; padding: 0 8px; border: 1px solid #DCE2E5; border-radius: 13px; background: #FFFFFF; font-size: 12px; font-weight: 700; color: #5B6F79}
.np-panel .np-more-inks:hover {border-color: #00A2EA; color: #00659B}
.np-panel .np-pms-row {flex: 1 0 100%; margin-top: 6px}
.np-panel .np-pms-row .custom-pms {float: none; width: auto; display: flex; gap: 6px}
.np-panel .np-pms-row .custom-pms input {order: 0; flex: 1; min-width: 0; width: auto; height: 36px; box-sizing: border-box; margin: 0; padding: 0 10px; float: none; border: 1.5px solid #CED5D9; border-radius: 8px; box-shadow: none; font: 14px 'museosans', Arial, sans-serif; color: #24323A}
.np-panel .np-pms-row .custom-pms input:focus {border-color: #00A2EA; outline: none; box-shadow: 0 0 0 3px #D9F1FC}
.np-panel .np-pms-row .custom-pms a {order: 1; flex: none; width: auto; height: 36px; box-sizing: border-box; padding: 0 14px; margin: 0; float: none; border: 1.5px solid #CED5D9; border-radius: 8px; background: #FFFFFF; box-shadow: none; text-shadow: none; display: flex; align-items: center; font: 700 13px/1 'museosans', Arial, sans-serif; text-transform: none; color: #24323A}
.np-panel .np-pms-row .custom-pms a:hover {border-color: #00A2EA; color: #00659B}

/* ---------- Shirt ---------- */
.np-panel .np-shirt-card {display: flex; gap: 14px; align-items: center}
.np-panel .np-shirt-thumb {flex: none; width: 96px; height: 96px; border-radius: 12px; background: #F2F5F7; overflow: hidden; display: flex; align-items: center; justify-content: center}
.np-panel .np-shirt-thumb img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; mix-blend-mode: multiply}
.np-panel .np-shirt-text {min-width: 0; display: flex; flex-direction: column; gap: 2px}
.np-panel .np-kicker {font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #5B6F79}
.np-panel .np-shirt-name {font-size: 17px; font-weight: 700; line-height: 1.25; color: #24323A}
.np-panel .np-shirt-pitch {font-size: 13px; line-height: 1.4; color: #5B6F79}
.np-panel #change-tshirt-style-btn {width: 100%}

.np-panel .np-shirt-colors {display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px}
.np-panel .np-shirt-color {margin: 0; padding: 0; float: none; width: auto; height: auto}
.np-panel .np-shirt-colors .color-picker-canvas {display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; width: auto; height: auto; margin: 0; padding: 0; float: none; border: 2px solid transparent; border-radius: 50%; background: none; box-shadow: none; box-sizing: border-box}
.np-panel .np-shirt-colors .color-picker-canvas span {display: block; width: calc(100% - 6px); height: calc(100% - 6px); border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18)}
.np-panel .np-shirt-colors .color-picker-canvas:hover {border-color: #B9DDF0}
.np-panel .np-shirt-colors .color-picker-canvas.color-selected {border-color: #00A2EA}
.np-panel .np-more-colors {width: 100%; aspect-ratio: 1 / 1; padding: 0; border: 1px solid #DCE2E5; border-radius: 50%; background: #FFFFFF; font-size: 12px; font-weight: 700; color: #5B6F79}
.np-panel .np-more-colors:hover {border-color: #00A2EA; color: #00659B}

.np-panel .np-rows {display: flex; flex-direction: column; border: 1px solid #E6EBEE; border-radius: 12px; overflow: hidden}
.np-panel .np-row {width: 100%; min-height: 56px; box-sizing: border-box; padding: 8px 12px; border: 0; border-top: 1px solid #E6EBEE; border-radius: 0; background: #FFFFFF; display: flex; align-items: center; gap: 12px; text-align: left; color: #24323A}
.np-panel .np-rows > .np-row:first-child {border-top: 0}
.np-panel .np-row:hover {background: #FAFBFC; color: #24323A}
.np-panel .np-row-icon {flex: none; width: 36px; height: 36px; border-radius: 8px; background: #F2F5F7; color: #5B6F79; display: flex; align-items: center; justify-content: center; overflow: hidden}
.np-panel .np-row-photo img {display: block; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply}
.np-panel .np-row-text {flex: 1; min-width: 0; display: flex; flex-direction: column}
.np-panel .np-row-text b {font-size: 14px; font-weight: 700}
.np-panel .np-row-text small {font-size: 12px; color: #5B6F79; white-space: nowrap; overflow: hidden; text-overflow: ellipsis}
.np-panel .np-chevron {flex: none; color: #9AAAB2; transition: transform .15s}
.np-panel .np-fabric[aria-expanded="true"] .np-chevron {transform: rotate(90deg)}
.np-panel .np-fabric-detail {padding: 4px 14px 12px 60px; background: #FFFFFF; font-size: 13px; line-height: 1.5; color: #3F525B; display: flex; flex-direction: column; gap: 6px}
.np-panel .np-fabric-detail p {color: #3F525B}

/* ---------- Change shirt (wide) ---------- */
.panels-container .np-wide {width: 758px; z-index: 50}
.np-wide .np {height: clamp(453px, calc(100vh - 175px), 640px)}
.np-wide .np-catalog-head .np-titlebar {gap: 8px}
.np-wide .np-catalog-head .np-title {flex: none}
.np-wide .np-catalog-head .np-search {flex: 1; height: 40px; margin-left: 12px}
.np-panel .np-catalog-main {flex: 1; min-height: 0; display: flex}
.np-panel .np-side {flex: none; width: 190px; box-sizing: border-box; padding: 14px 10px; border-right: 1px solid #E6EBEE; background: #FAFBFC; display: flex; flex-direction: column; gap: 2px; overflow-y: auto}
.np-panel .np-side-item {flex: none; height: 34px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; font-size: 14px; color: #24323A}
.np-panel .np-side-item small {font-size: 12px; color: #7A8F99}
.np-panel .np-side-item:hover {background: #EEF2F4}
.np-panel .np-side-item.is-active {background: #E0F2FB; font-weight: 700; color: #00659B}
.np-panel .np-side-item.is-active small {color: #00659B}
.np-panel .np-catalog-content {flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column}
.np-panel .np-subcats {flex: none; padding: 12px 16px 0}
.np-panel .np-catalog-body {flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px 16px 16px}
.np-panel .np-result-count {margin-bottom: 10px; font-size: 13px; color: #5B6F79}
.np-panel .np-cards {display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px}
.np-panel .np-cards > li {margin: 0; padding: 0; float: none; width: auto}
.np-panel .np-card {width: 100%; height: 100%; padding: 0 0 8px; border: 0; border-radius: 12px; background: transparent; display: flex; flex-direction: column; gap: 3px; text-align: left; color: #24323A}
.np-panel .np-card-img {position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; margin-bottom: 5px; box-sizing: border-box; border-radius: 12px; background: #F2F5F7; overflow: hidden}
.np-panel .np-card-img img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; mix-blend-mode: multiply}
.np-panel .np-card-img::after {content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none}
.np-panel .np-card:hover .np-card-img::after {box-shadow: inset 0 0 0 2px #B9DDF0}
.np-panel .np-card.is-selected .np-card-img::after {box-shadow: inset 0 0 0 2.5px #00A2EA}
.np-panel .np-badge {position: absolute; top: 6px; left: 6px; padding: 2px 7px; border-radius: 6px; background: #24323A; font-size: 10px; font-weight: 700; line-height: 1.4; letter-spacing: .04em; text-transform: uppercase; color: #FFFFFF}
.np-panel .np-card-name {padding: 0 2px; font-size: 14px; font-weight: 700; line-height: 1.3}
.np-panel .np-card-desc {padding: 0 2px; font-size: 12px; line-height: 1.35; color: #5B6F79; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden}
.np-panel .np-catalog-foot {flex: none; padding: 10px 16px 14px; border-top: 1px solid #E6EBEE; background: #FFFFFF; display: flex; align-items: center; gap: 14px}
.np-panel .np-foot-note {flex: 1; min-width: 0; font-size: 13px; line-height: 1.4; color: #5B6F79}
.np-panel .np-foot-note b {color: #24323A}
.np-panel .np-use {flex: none; max-width: 60%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block; line-height: 44px}

/* ---------- Add text ---------- */
.np-panel .np-add-text {display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0}
.np-panel .np-textarea {display: block; width: 100%; box-sizing: border-box; min-height: 72px; margin: 0; padding: 10px 12px; float: none; resize: vertical; border: 1.5px solid #CED5D9; border-radius: 10px; background: #FFFFFF; box-shadow: none; font: 15px/1.4 'museosans', Arial, sans-serif; color: #24323A; overflow: auto}
.np-panel .np-textarea:focus {border-color: #00A2EA; outline: none; box-shadow: 0 0 0 3px #D9F1FC}
.np-panel .np-textarea::placeholder {color: #7A8F99}
.np-panel .np-layouts {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px}
.np-panel .np-layout {position: relative; height: 96px; padding: 8px; border: 0; border-radius: 12px; background: #F2F5F7; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; overflow: hidden; text-align: center; color: #24323A}
.np-panel .np-layout:hover {box-shadow: inset 0 0 0 2px #B9DDF0}
.np-panel .np-layout.is-dark {background: #2B3A42; color: #FFFFFF}
.np-panel .np-layout:focus-visible {outline: 2px solid #00A2EA; outline-offset: 2px}
.np-panel .np-tile-accent {color: #00A2EA}
.np-panel .np-tile-muted {color: #5B6F79}
.np-panel .np-layout.is-dark .np-tile-muted {color: #C8D3D9}
.np-panel .np-layout.is-busy {opacity: .55; cursor: progress}
.np-panel .np-layout-line {display: block; max-width: 100%; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: clip}

/* ---------- Edit text ---------- */
.np-panel .np-text-preview {position: relative; height: 112px; border-radius: 12px; overflow: hidden; background: #F2F5F7}
.np-panel .np-text-preview.is-dark {background: #2B3A42}
.np-panel .np-text-preview-inner {position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none}
.np-panel .np-text-preview .np-preview-copy {margin: 0}
.np-panel #text-properties-edit-text {min-height: 48px; height: 48px; resize: none; padding-top: 12px; padding-bottom: 12px; line-height: 1.4}
.np-panel .np-font-button {display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: 10px; box-sizing: border-box; width: 100%; padding: 8px 12px; border: 1.5px solid #CED5D9; border-radius: 10px; background: #FFFFFF; text-decoration: none; color: #24323A; cursor: pointer}
.np-panel .np-font-button:hover {border-color: #00A2EA}
.np-panel .np-font-button small {grid-column: 1; grid-row: 1; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #5B6F79}
.np-panel .np-font-name {grid-column: 1; grid-row: 2; font-size: 22px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis}
.np-panel .np-font-button b {grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 700; color: #00659B}
.np-panel .np-font-button b .np-chevron {color: inherit}
.np-panel .np-shape {display: flex; flex-direction: column; gap: 14px}
.np-panel .np-arc {display: flex; flex-direction: column; gap: 10px; min-width: 0}
.np-panel .np-arc .np-value {font-weight: 700}
.np-panel .np-slider {position: relative; padding: 6px 10px}
.np-panel .np-slider .ui-slider-horizontal {height: 4px; border: 0; border-radius: 2px; background: #DCE2E5; background-image: none; box-shadow: none}
.np-panel .np-slider .ui-slider-handle {top: -9px; width: 22px; height: 22px; margin-left: -11px; box-sizing: border-box; border: 2px solid #0077B6; border-radius: 50%; background: #FFFFFF; background-image: none; box-shadow: 0 1px 3px rgba(20, 30, 36, .2); cursor: grab}
.np-panel .np-slider .ui-slider-handle:focus-visible {outline: none; box-shadow: 0 0 0 4px #D9F1FC}
.np-panel .np-slider .ui-slider-range {border: 0; background: #0077B6; background-image: none}
.np-panel #arc-radius-slider.ui-slider-disabled {opacity: .45}
.np-panel .np-advice {position: static; display: none; margin: 10px -10px 0; padding: 8px 10px; border: 0; border-radius: 8px; background: #FFF6E5; font-size: 12px; line-height: 1.4; color: #6B3D00; box-shadow: none; width: auto}
.np-panel .np-advice::before, .np-panel .np-advice::after {display: none}
.np-panel .np-spacing {display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 10px}
.np-panel .np-arc .np-sub, .np-panel .np-spacing .np-sub {font-size: 14px; font-weight: 600; color: #24323A}
.np-panel .np-stepper {float: none; display: flex; align-items: center; justify-content: space-between; width: auto; height: 40px; box-sizing: border-box; border: 1px solid #DCE2E5; border-radius: 10px; background: #FFFFFF; overflow: hidden}
.np-panel .np-stepper .counter-header-indicator {width: 44px; height: 100%; padding: 0; border: 0; background: #FAFBFC; display: flex; align-items: center; justify-content: center; color: #24323A}
.np-panel .np-stepper .counter-header-indicator:hover {background: #F2F5F7}
.np-panel .np-stepper .np-step-down {order: 0}
.np-panel .np-stepper .counter-header-number {order: 1; float: none; min-width: 30px; height: auto; padding: 0; background: none; box-shadow: none; border-radius: 0; font: 600 14px/1 'museosans', Arial, sans-serif; text-align: center; color: #24323A; font-variant-numeric: tabular-nums}
.np-panel .np-stepper .np-step-up {order: 2}
.np-panel .np-switch {position: relative; flex: none; display: inline-flex; width: 40px; height: 24px; margin: 0; cursor: pointer}
.np-panel .np-switch-input {position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1}
.np-panel .np-switch-track {position: absolute; inset: 0; border-radius: 12px; background: #CED5D9; transition: background .15s}
.np-panel .np-switch-track::after {content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 2px rgba(20, 30, 36, .25); transition: transform .15s}
.np-panel .np-switch-input:checked + .np-switch-track {background: #0077B6}
.np-panel .np-switch-input:checked + .np-switch-track::after {transform: translateX(16px)}
.np-panel .np-switch-input:focus-visible + .np-switch-track {box-shadow: 0 0 0 3px #D9F1FC}
.np-panel .np-outline .np-label-row {align-items: center}
.np-panel .np-outline-options {display: flex; flex-direction: column; gap: 8px; visibility: visible}
.np-panel .np-outline-options.invisible {display: none}

/* ---------- Fonts ---------- */
#text-font-family.np-panel .np {height: clamp(453px, calc(100vh - 175px), 640px)}
.np-panel .np-back-link {flex: 1; min-width: 0; height: 40px; margin-left: -10px; padding: 0 8px 0 2px; border-radius: 8px; display: flex; align-items: center; gap: 2px; font-size: 18px; font-weight: 700; color: #24323A; float: none; background: none; border: 0; box-shadow: none}
.np-panel .np-back-link:hover {color: #00659B}
.np-panel .np-back-link svg {flex: none; color: #5B6F79}
.np-panel .np-count {flex: none; font-size: 13px; color: #5B6F79}
.np-panel .np-font-cats {flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px}
.np-panel .np-font-cats::-webkit-scrollbar {display: none}
.np-panel .np-font-cats .np-chip {flex: none; height: 32px; font-size: 13px}
.np-panel .np-font-body {padding: 6px 8px 16px; gap: 0}
.np-panel .np-font-list {margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px}
.np-panel .np-font-list .font-option {position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 22px; column-gap: 8px; align-items: center; padding: 8px 10px; border: 0; border-radius: 10px; font-size: 14px; cursor: pointer; color: #24323A; background: transparent}
.np-panel .np-font-list .font-option:hover {background: #F2F5F7}
.np-panel .np-font-list .font-option.selected {background: #E0F2FB}
.np-panel .np-font-list .np-font-sample {grid-column: 1; width: auto; display: block; font-size: 26px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis}
.np-panel .np-font-list small {grid-column: 1; font-size: 12px; color: #5B6F79}
.np-panel .np-font-list .np-check {grid-column: 2; grid-row: 1 / span 2; color: #0077B6; visibility: hidden}
.np-panel .np-font-list .font-option.selected .np-check {visibility: visible}
.np-panel .np-font-list .font-option.selected small {color: #00659B}

/* ---------- Upload ---------- */
#upload-image.np-panel {min-height: 0}
#upload-image.np-panel #upload-image-form {height: auto}
#upload-image.np-panel #upload-image-drop-zone {display: flex; flex-direction: column; gap: 8px}
.np-panel .np-drop {width: auto; height: auto; min-height: 264px; box-sizing: border-box; margin: 0; padding: 16px; border: 2px dashed #9FD8F3; border-radius: 14px; background: #F2FAFE; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; font: inherit; color: #24323A; transition: border-color .15s, background .15s}
.np-panel .np-drop.is-dragging, .np-panel .np-drop.drop-zone-active {border-color: #00A2EA; background: #E0F2FB}
.np-panel .np-drop-icon {width: 64px; height: 64px; border-radius: 50%; background: #FFFFFF; color: #0077B6; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0, 119, 182, .12)}
.np-panel .np-drop-icon svg {width: 28px; height: 28px}
.np-panel .np-drop-text {display: flex; flex-direction: column; gap: 2px}
.np-panel .np-drop .drag-drop-notes {margin: 0; padding: 0; font: inherit; color: inherit}
.np-panel .np-drop-title {font-size: 16px !important; font-weight: 700 !important}
.np-panel .np-drop-or {font-size: 13px !important; color: #5B6F79 !important}
#upload-image.np-panel #uploadContainer {position: relative; top: auto; left: auto; margin: 0; height: auto; width: auto; overflow: visible; display: flex; flex-direction: column; align-items: stretch; gap: 8px}
#upload-image.np-panel #uploadContainer .np-primary {padding: 0 22px}
#upload-image.np-panel #uploadContainer .input-file {position: absolute; left: -10000px; top: 0; width: 1px; height: 1px; opacity: 0}
.np-panel .np-camera-button {display: none; height: 44px; padding: 0 22px}
.np-panel .np-drop-types {font-size: 12px; line-height: 1.4; text-align: center; color: #5B6F79}
.np-panel .np-error {margin-top: 8px; padding: 8px 12px; border-radius: 8px; background: #FDECEA; font-size: 13px; color: #B3261E}
.np-panel .np-tips {gap: 10px}
.np-panel .np-tips ul {display: flex; flex-direction: column; gap: 10px}
.np-panel .np-tips li {display: flex; align-items: flex-start; gap: 10px}
.np-panel .np-tip-icon {flex: none; width: 28px; height: 28px; border-radius: 8px; background: #E6F4FB; color: #0077B6; display: flex; align-items: center; justify-content: center}
.np-panel .np-tips p {font-size: 14px; line-height: 1.4; color: #24323A}
.np-panel .np-tips p strong {font-weight: 700}
.np-panel .np-tips p span {color: #5B6F79}
.np-panel .np-foot {flex: none; padding: 10px 16px 14px; border-top: 1px solid #E6EBEE; background: #FFFFFF}
.np-panel .np-ai-button {width: 100%; height: 44px; box-sizing: border-box; padding: 0 12px; border: 1.5px dashed #9FD8F3; border-radius: 10px; background: #F2FAFE; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 700; color: #00659B}
.np-panel .np-ai-button:hover {border-color: #00A2EA; background: #E6F4FB}
.np-panel .np-ai-button svg {flex: none}
#upload-image.np-panel #upload-loading {margin: 0; padding: 18px 16px; border: 1px solid #E6EBEE; border-radius: 14px; background: #FAFBFC; flex-direction: column; gap: 10px}
#upload-image.np-panel #upload-loading[style*="block"] {display: flex !important}
.np-panel .np-loading-title {font-size: 14px; color: #24323A; overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
.np-panel .np-loading-box .loading-bar {width: auto; height: 8px; margin: 0; border: 0; border-radius: 4px; background: #E6EBEE; overflow: hidden; box-shadow: none}
.np-panel .np-loading-box .loading-bar-progress {height: 100%; border: 0; border-radius: 4px; background: #0077B6; background-image: none; box-shadow: none}
.np-panel .np-loading-box .cancel-upload {margin: 0; font-size: 13px}
.np-panel .np-loading-box .cancel-link {color: #00659B; font-weight: 700}

/* ---------- Edit image, Edit clip art ---------- */
#custom-image-settings.np-panel, #clip-art-settings.np-panel {overflow: visible}
.np-panel .np-item-card {display: flex; gap: 12px; align-items: center}
.np-panel .np-thumb {flex: none; width: 104px; height: 104px; min-height: 0; box-sizing: border-box; margin: 0; padding: 10px; float: none; border: 1px solid #E6EBEE; border-radius: 12px; background: #F2F5F7; display: flex; align-items: center; justify-content: center; overflow: hidden; line-height: normal}
.np-panel .np-thumb img {display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; margin: 0}
.np-panel .np-checker {background-color: #FFFFFF; background-image: repeating-conic-gradient(#EEF2F4 0% 25%, #FFFFFF 0% 50%); background-size: 14px 14px}
.np-panel .np-item-text {flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px}
.np-panel .np-item-name {font-size: 14px; font-weight: 700; line-height: 1.3; color: #24323A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis}
.np-panel .np-item-meta {font-size: 12px; line-height: 1.4; color: #5B6F79}
.np-panel .color-info {width: auto; float: none; margin: 0; font-size: 12px; color: #5B6F79}
.np-panel .color-info > div {display: flex; flex-wrap: wrap; align-items: center; gap: 6px; float: none}
.np-panel .color-info .color-picker-list {display: flex; flex-wrap: wrap; gap: 3px; margin: 0; padding: 0; float: none; width: auto}
.np-panel .color-info .color-picker-list li {margin: 0; float: none}
.np-panel .color-info .np-ink-count {font-weight: 400; color: #5B6F79}
.np-panel .color-info .edit-link, .np-panel .color-info .add-link {font-weight: 700; color: #00659B; text-transform: none}
.np-panel .change-clip-art-button {width: 100%}

.np-panel .np-tools {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px}
.np-panel .np-tool {position: relative; float: none; width: auto; height: auto; min-height: 68px; box-sizing: border-box; margin: 0; padding: 8px 4px 7px; border: 0; border-radius: 12px; background: #F2F5F7; background-image: none; box-shadow: none; text-shadow: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font: 700 12px/1.1 'museosans', Arial, sans-serif; text-align: center; color: #24323A; cursor: pointer}
.np-panel .np-tool:hover {background: #E6F4FB; color: #00659B}
.np-panel .np-tool.active, .np-panel .np-tool.selected, .np-panel .np-tool.is-active {background: #E0F2FB; box-shadow: inset 0 0 0 2px #00A2EA; color: #00659B}
.np-panel .np-tool-icon {display: flex; color: #24323A}
.np-panel .np-tool:hover .np-tool-icon {color: #00659B}
.np-panel .np-tool .bg-remove-trigger-label, .np-panel .np-tool-label {display: block}
.np-panel .np-tool.is-working {color: #7A8F99; pointer-events: none}
.np-panel .np-tool .bg-remove-trigger-spinner {position: absolute; top: 6px; right: 6px; margin: 0}
.np-panel .np-tool.disabled, .np-panel .np-tool[aria-disabled="true"] {opacity: .5; cursor: default}
.np-panel .np-original-hint {color: #8A4B00}

/* AI card */
.np-panel .np-ai-card {display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1.5px dashed #9FD8F3; border-radius: 14px; background: #F2FAFE}
.np-panel .np-ai-head {display: flex; align-items: center; gap: 8px; color: #00659B}
.np-panel .np-ai-head h3 {font-size: 15px; font-weight: 700; color: #00659B}
.np-panel .np-ai-card .ai-variant-ideas-section {display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0}
.np-panel .np-ai-card .ai-variant-ideas-list {display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px; overflow: visible}
.np-panel .np-ai-card .ai-variant-ideas-list:empty {display: none}
.np-panel .np-ai-card .ai-variant-idea-button {width: auto; min-height: 0; height: 32px; margin: 0; padding: 0 12px; border: 1px solid #9FD8F3; border-radius: 16px; background: #FFFFFF; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #00659B}
.np-panel .np-ai-card .ai-variant-idea-button:hover {border-color: #00A2EA; background: #FFFFFF}
.np-panel .np-ai-card .ai-variant-idea-copy {display: block}
.np-panel .np-ai-card .ai-variant-idea-title {font-size: 13px; font-weight: 400; color: #00659B; white-space: nowrap}
.np-panel .np-ai-card .ai-variant-idea-description {display: none}
.np-panel .np-ai-card .ai-variant-idea-action {display: none}
.np-panel .np-ai-card .ai-variant-idea-button.loading .ai-variant-idea-action, .np-panel .np-ai-card .ai-variant-idea-button.error .ai-variant-idea-action {display: inline; height: auto; padding: 0; background: none; line-height: 1; font-size: 12px; color: #5B6F79}
.np-panel .np-ai-inline {display: grid !important; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: stretch; margin: 0}
.np-panel .np-ai-inline[style*="none"] {display: none !important}
.np-panel .np-ai-input {width: 100%; height: 44px; min-height: 0; box-sizing: border-box; margin: 0; padding: 11px 12px; resize: none; overflow: hidden; white-space: nowrap; border: 1px solid #CDE9F7; border-radius: 10px; background: #FFFFFF; box-shadow: none; font: 14px/20px 'museosans', Arial, sans-serif; color: #24323A}
.np-panel .np-ai-input:focus {border-color: #00A2EA; outline: none; box-shadow: 0 0 0 3px #D9F1FC}
.np-panel .np-ai-input.is-invalid {border-color: #D2493F; box-shadow: 0 0 0 3px #FBE3E1}
.np-panel .np-ai-input::placeholder {color: #7A8F99}
.np-panel .np-ai-try {width: auto; height: 44px; min-width: 60px; box-sizing: border-box; margin: 0; padding: 0 14px; float: none; border: 0; border-radius: 10px; background: #0077B6; background-image: none; box-shadow: none; text-shadow: none; display: flex; align-items: center; justify-content: center; font: 700 14px/1 'museosans', Arial, sans-serif; color: #FFFFFF; cursor: pointer}
.np-panel .np-ai-try:hover {background: #00659B; color: #FFFFFF}
.np-panel .np-ai-try.disabled, .np-panel .np-ai-try.loading {background: #B9C6CD; cursor: default}
.np-panel .np-ai-card .ai-variants-section {flex-direction: column; gap: 8px; margin: 0; padding: 10px 0 0; border: 0; border-top: 1px solid #D6EAF5}
.np-panel .np-ai-card .ai-variants-list {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0}
.np-panel .np-ai-card .ai-variant-card {width: auto; flex: none; margin: 0; padding: 0; float: none}
.np-panel .np-ai-card .ai-variant-thumb {width: 100%; height: auto; aspect-ratio: 1 / 1; box-sizing: border-box; padding: 4px; border: 0; border-radius: 10px; background: #FFFFFF; box-shadow: inset 0 0 0 1px #DCE2E5; display: flex; align-items: center; justify-content: center; line-height: normal}
.np-panel .np-ai-card .ai-variant-thumb:hover {box-shadow: inset 0 0 0 2px #00A2EA}
.np-panel .np-ai-card .ai-variant-thumb img {max-width: 100%; max-height: 100%}
.np-panel .np-ai-card .ai-variant-message {font-size: 12px; color: #5B6F79}

/* ---------- Phones: the panel fills the left drawer from mobile.js ---------- */
@media only screen and (max-width: 768px) {
	.np-panel .np {max-height: 100vh; max-height: 100dvh}
	.np-wide .np, #text-font-family.np-panel .np {height: 100vh; height: 100dvh; max-height: none}
	.np-panel .np-titlebar {padding-right: 30px}
	.np-panel .np-expand, .np-panel .np-shrink {display: none}
	.np-panel .np-search input, .np-panel .np-textarea, .np-panel .np-ai-input,
	.np-panel .np-pms-row .custom-pms input {font-size: 16px} /* no zoom on focus in iOS */
	.np-panel .np-camera-button {display: flex}
	.np-panel .np-drop {min-height: 0; padding: 24px 16px}
	.np-panel .np-drop-title {font-size: 15px !important}
	.np-panel .np-drop-or {display: none}
	.np-panel .np-foot {padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px))}
	.np-panel .np-card:hover .np-card-img::after, .np-panel .np-swatch:hover {box-shadow: none}

	/* Change shirt: categories become a chip row over the cards */
	.panels-container .np-wide {width: 100%}
	.np-wide .np-catalog-head .np-titlebar {flex-wrap: wrap}
	.np-wide .np-catalog-head .np-title {flex: 1}
	.np-wide .np-catalog-head .np-search {flex: 1 0 100%; order: 3; margin: 4px 0 0; height: 44px}
	.np-panel .np-catalog-main {flex-direction: column}
	.np-panel .np-side {width: auto; flex-direction: row; gap: 6px; padding: 10px 16px; border-right: 0; border-bottom: 1px solid #E6EBEE; overflow-x: auto; overflow-y: hidden; scrollbar-width: none}
	.np-panel .np-side::-webkit-scrollbar {display: none}
	.np-panel .np-side-item {height: 32px; padding: 0 12px; border: 1px solid #DCE2E5; border-radius: 16px; background: #FFFFFF; white-space: nowrap}
	.np-panel .np-side-item small {display: none}
	.np-panel .np-side-item.is-active {border-color: #0077B6; background: #0077B6; color: #FFFFFF}
	.np-panel .np-subcats {flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 10px 16px 0}
	.np-panel .np-subcats::-webkit-scrollbar {display: none}
	.np-panel .np-subcats .np-chip {flex: none; height: 32px; font-size: 13px}
	.np-panel .np-cards {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px}
	.np-panel .np-catalog-foot {flex-direction: column; align-items: stretch; gap: 8px; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px))}
	.np-panel .np-use {max-width: none; width: 100%}
}

/* Small phones (iPhone SE) */
@media only screen and (max-width: 360px) {
	.np-panel .np-head, .np-panel .np-body {padding-left: 12px; padding-right: 12px}
	.np-panel .np-inks {gap: 2px}
	.np-panel .np-swatch {width: 24px; height: 24px}
	.np-panel .np-more-inks {height: 24px; padding: 0 6px}
	.np-panel .np-tools {gap: 6px}
	.np-panel .np-tool {font-size: 11px}
}

/* ==========================================================================
 * App frame (newShell.coffee): one header row with icon tabs, the panel as a card on a grey stage,
 * side views as cards. On phones the panel is a bottom sheet over a smaller shirt.
 * ========================================================================== */
.np-phone-only, .np-tab-short {display: none !important}
/* While loading (lab.php adds np-boot, NewShell.init removes it): the old header and panels stay hidden */
/* Side views: the card shows which one is active, not the photo */
body.np-on #shirt-side-select-menu li a.active img:not(.item-hover) {border-color: transparent !important; box-shadow: none !important}
body.np-boot header > *, body.np-boot #controls, body.np-boot #shirt-side-select-menu, body.np-boot .mobile-bottom-bar {visibility: hidden !important}
#toolbar .np-tab-icon {display: block; flex: none}

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

	/* Header: logo, tabs, Load design, price, Save design, Quote & Buy */
	body.np-on header {display: flex; align-items: stretch; height: 67px; box-sizing: border-box; padding: 0; border-top: 3px solid #00A2EA; border-bottom: 1px solid #DCE2E5; box-shadow: none; background: #FFFFFF; z-index: 5; font-family: 'museosans', Arial, sans-serif}
	body.np-on header > .container, body.np-on #main-menu, body.np-on #main-menu > .container {display: contents}
	body.np-on header .container::before, body.np-on header .container::after {display: none}
	body.np-on header h1 {order: 0; flex: none; width: 180px; box-sizing: border-box; margin: 0; padding: 0 0 0 20px; float: none; display: flex; align-items: center; align-self: stretch; height: auto}
	body.np-on header h1 a {display: flex; align-items: center; height: 100%; margin: 0; padding: 0}
	body.np-on header h1 img {display: block; width: auto; height: 34px}
	body.np-on #toolbar {order: 1; display: flex; float: none; width: auto; min-width: 0; height: auto; margin: 0; padding: 0; border: 0}
	body.np-on #toolbar li {float: none; width: 112px; min-width: 0; display: flex}
	body.np-on #toolbar a {flex: 1; height: auto; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-right: 1px solid #E6EBEE; background: transparent; opacity: 1; transition: none; font: 600 11px/1.2 'museosans', Arial, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: #5B6F79}
	body.np-on #toolbar a:hover {background: #F7F9FA; color: #24323A}
	body.np-on #toolbar a.active {box-shadow: inset 0 -3px 0 #00A2EA; background: #F2FAFE; color: #00659B; font-weight: 700}
	body.np-on #toolbar .nav-arrow {display: none}
	body.np-on header .top-menu {order: 2; margin: 0 0 0 auto; padding: 0; float: none; display: flex; align-items: center; position: relative}
	body.np-on header .top-menu > li {float: none; margin: 0}
	body.np-on header .top-menu > .np-hide-item {display: none}
	body.np-on #top-menu-load-design {display: flex; align-items: center; height: 40px; margin: 0 4px 0 0 !important; padding: 0 12px; border-radius: 8px; font: 600 14px/1 'museosans', Arial, sans-serif; color: #00659B}
	body.np-on #top-menu-load-design:hover, body.np-on #top-menu-load-design.active {background: #E6F4FB}
	body.np-on #estimate {order: 3; float: none; display: flex; align-items: center; gap: 12px; padding: 0 20px 0 8px; position: relative}
	body.np-on #estimate-price {float: none; margin: 0; text-align: right}
	body.np-on #estimate-price .average-price {display: flex; justify-content: flex-end; align-items: center; font: 700 22px/1.15 'museosans', Arial, sans-serif; font-variant-numeric: tabular-nums; color: #24323A}
	body.np-on #estimate-price .average-price * {float: none}
	body.np-on #estimate-price .average-price img {top: 0; left: 0; width: 18px; height: 18px}
	body.np-on #estimate-price small, body.np-on #estimate-price em {display: block; font: 11px/1.3 'museosans', Arial, sans-serif; font-style: normal; color: #5B6F79}
	body.np-on #estimate-qty {float: none; margin: 0; padding: 0; border: 0}
	body.np-on #estimate .open-quote-tooltip-button {float: none; display: flex; align-items: center; height: 40px; box-sizing: border-box; padding: 0 16px; border: 1px solid #CED5D9; border-radius: 8px; background: #FFFFFF; box-shadow: none; text-shadow: none; filter: none; font: 600 14px/1 'museosans', Arial, sans-serif; color: #24323A}
	body.np-on #estimate .open-quote-tooltip-button:hover {border-color: #9AAAB2; background: #F7F9FA}
	body.np-on #estimate .buy-now-button {float: none; margin: 0; display: flex; align-items: center; height: 40px; box-sizing: border-box; padding: 0 18px; border: 0; border-radius: 8px; background: #0077B6; box-shadow: none; text-shadow: none; filter: none; font: 700 14px/1 'museosans', Arial, sans-serif; color: #FFFFFF}
	body.np-on #estimate .buy-now-button:hover {background: #00659B}

	/* Stage: the panel card on the left, the shirt in the middle, side views on the right */
	body.np-on #app-wrap {height: calc(100vh - 67px) !important; min-height: 0}
	body.np-on .panels-container {top: 83px; left: 16px}
	body.np-on .panels-container > .panel {box-sizing: border-box; border: 1px solid #DCE2E5; border-radius: 12px; box-shadow: 0 4px 16px rgba(36, 50, 58, .08)}
	body.np-on .panels-container > .np-panel:not(.np-wide), body.np-on #clip-art-browser.panel {width: 360px}
	body.np-on .panels-container > .np-panel > .np, body.np-on #clip-art-browser .cab {border-radius: 11px; overflow: hidden}
	body.np-on .np-panel .np {height: max(453px, calc(100vh - 99px)); max-height: none}
	body.np-on .np-wide .np, body.np-on #clip-art-browser .cab {height: max(453px, calc(100vh - 99px)); max-height: none}
	body.np-on #canvas {position: absolute; top: 75px; left: 392px; right: 108px; width: auto; min-width: 0; margin: 0; float: none}
	body.np-on #shirt-side-select-menu {position: fixed; top: 107px; right: 16px; left: auto; bottom: auto; width: 92px; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; text-align: center}
	body.np-on #shirt-side-select-menu li {display: block; float: none; width: auto; margin: 0}
	body.np-on #shirt-side-select-menu li a {position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px 0 7px; box-sizing: border-box; border: 1px solid #DCE2E5; border-radius: 10px; background: #FFFFFF; font: 600 11px/1.2 'museosans', Arial, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: #5B6F79}
	body.np-on #shirt-side-select-menu li a:hover {border-color: #9FD8F3}
	body.np-on #shirt-side-select-menu li a.active {border: 2px solid #00A2EA; color: #00659B; font-weight: 700}
	body.np-on #shirt-side-select-menu li a span {position: static; width: auto}
	body.np-on #shirt-side-select-menu li a img {width: 64px; height: 64px; margin: 0; border: 0; border-radius: 6px; background-size: 261px 64px}
	body.np-on #shirt-side-select-menu li a#front-tshirt-btn img {background-position: 0 center}
	body.np-on #shirt-side-select-menu li a#back-tshirt-btn img {background-position: -64px center}
	body.np-on #shirt-side-select-menu li a#left-sleeve-btn img {background-position: -130px center}
	body.np-on #shirt-side-select-menu li a#right-sleeve-btn img {background-position: -197px center}
}

/* ---------- Phones: icon tabs, and the panel as a bottom sheet ---------- */
@media only screen and (max-width: 768px) {
	body.np-on {--np-sheet: max(calc(100dvh - 266px), 56dvh)}
	body.np-on header {border-top: 3px solid #00A2EA; box-shadow: none}
	body.np-on header > .container {height: 52px; padding: 0 4px 0 16px !important; border-bottom: 0}
	body.np-on header h1 img {display: block; width: auto; height: 30px}
	body.np-on .mobile-hamburger {width: 44px; height: 44px; padding: 0; font-size: 0; color: transparent; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2324323A' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E") center no-repeat}
	body.np-on #main-menu {border-top: 1px solid #E6EBEE !important; border-bottom: 1px solid #DCE2E5}
	body.np-on #toolbar {display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr))}
	body.np-on #toolbar li {display: flex}
	body.np-on #toolbar a {flex: 1; height: 60px !important; box-sizing: border-box; padding: 0 !important; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: transparent; opacity: 1; transition: none; font: 600 10px/1.2 'museosans', Arial, sans-serif !important; letter-spacing: .04em; color: #5B6F79; border-right: 1px solid #E6EBEE !important}
	body.np-on #toolbar a.active {box-shadow: inset 0 -3px 0 #00A2EA; background: #F2FAFE; color: #00659B; font-weight: 700 !important}
	body.np-on #toolbar .np-tab-icon {width: 20px; height: 20px}
	body.np-on #toolbar .nav-arrow, body.np-on #toolbar .np-tab-long {display: none !important}
	body.np-on #toolbar .np-tab-short {display: inline !important}
	body.np-on #canvas {transition: transform .25s ease}

	/* Side views and the price bar, closed state */
	body.np-on #shirt-side-select-menu {bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important}
	body.np-on #shirt-side-select-menu li {margin: 0 4px !important}
	body.np-on #shirt-side-select-menu li a {width: 64px; height: auto; padding: 4px 0; box-sizing: border-box; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 1px solid #DCE2E5; border-radius: 10px; background: #FFFFFF; color: #5B6F79 !important; font: 600 9px/1.1 'museosans', Arial, sans-serif !important; letter-spacing: .03em}
	body.np-on #shirt-side-select-menu li a.active {border: 2px solid #00A2EA; color: #00659B !important; font-weight: 700 !important}
	body.np-on #shirt-side-select-menu li a img {width: 40px !important; height: 40px !important; margin: 0 !important; border: 0 !important; border-radius: 4px !important; background-size: 163px 40px !important}
	body.np-on #front-tshirt-btn img {background-position: 0 center !important}
	body.np-on #back-tshirt-btn img {background-position: -40px center !important}
	body.np-on #left-sleeve-btn img {background-position: -82px center !important}
	body.np-on #right-sleeve-btn img {background-position: -123px center !important}
	body.np-on #shirt-side-select-menu li a span {position: static !important; width: auto !important; word-spacing: normal !important; white-space: nowrap}
	body.np-on .mobile-bottom-bar {height: calc(64px + env(safe-area-inset-bottom, 0px)); padding: 0 16px env(safe-area-inset-bottom, 0px); border-top: 1px solid #DCE2E5; box-shadow: 0 -4px 16px rgba(20, 30, 36, .06)}
	body.np-on .mobile-bottom-bar .mobile-price-amount {font: 700 20px/1.15 'museosans', Arial, sans-serif; font-variant-numeric: tabular-nums; color: #24323A}
	body.np-on .mobile-bottom-bar .mobile-price-label {font-size: 11px; color: #5B6F79}
	body.np-on .mobile-bottom-bar .mobile-save-btn {height: 44px; padding: 0 16px; border: 1px solid #CED5D9; border-radius: 10px; background: #FFFFFF; font: 600 15px/1 'museosans', Arial, sans-serif; color: #24323A}
	body.np-on .mobile-bottom-bar .mobile-buy-btn {height: 44px; padding: 0 18px; border: 0; border-radius: 10px; background: #0077B6; font: 700 15px/1 'museosans', Arial, sans-serif; color: #FFFFFF}

	/* The sheet (mobile.js opens and closes it) */
	body.np-on .controls {left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; width: 100% !important; max-width: none !important; height: auto !important; max-height: var(--np-sheet); box-sizing: border-box; padding-top: 18px !important; border: 0; border-radius: 18px 18px 0 0; background: #FFFFFF; box-shadow: 0 -8px 28px rgba(20, 30, 36, .16); transform: translateY(calc(100% + 40px)); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; overflow-y: auto !important}
	body.np-on .controls.mobile-panel-open {left: 0 !important; transform: none; visibility: visible; transition: transform .25s ease; box-shadow: 0 -8px 28px rgba(20, 30, 36, .16)}
	body.np-on.np-sheet-full .controls {max-height: calc(100dvh - 24px); overflow: hidden !important}
	body.np-on .mobile-panel-handlebar {top: 8px; left: 50%; right: auto; transform: translateX(-50%); width: 40px; height: 5px; border-radius: 3px; background: #CED5D9; opacity: 1}
	body.np-on .mobile-panel-close {top: 20px; right: 6px; width: 44px; height: 44px; padding: 0; border-radius: 8px; display: flex !important; align-items: center; justify-content: center; color: #5B6F79; font-size: 0; line-height: 1}
	body.np-on .mobile-panel-close.np-done {width: auto; right: 6px; padding: 0 10px; font: 700 15px/1 'museosans', Arial, sans-serif; color: #00659B}
	body.np-on .mobile-overlay.active {top: 116px; background: transparent}
	body.np-on.np-sheet-open .mobile-bottom-bar, body.np-on.np-sheet-open #shirt-side-select-menu, body.np-on.np-sheet-open .tuck-walker {visibility: hidden}
	body.np-on.np-pop-open .mobile-bottom-bar, body.np-on.np-pop-open #shirt-side-select-menu {visibility: hidden}
	body.np-on.np-pop-open .tuck-walker {visibility: hidden}
	body.np-on .np-panel .np {max-height: calc(var(--np-sheet) - 18px)}
	body.np-on .np-wide .np, body.np-on #text-font-family.np-panel .np {height: calc(100dvh - 42px); max-height: none}
	body.np-on #clip-art-browser .cab {height: calc(100dvh - 42px)}
	body.np-on .np-panel .np-head {padding: 2px 16px 10px}
	body.np-on .np-panel .np-titlebar {min-height: 44px; padding-right: 44px}
	body.np-on .np-panel#text-properties .np-titlebar, body.np-on .np-panel#custom-image-settings .np-titlebar, body.np-on .np-panel#clip-art-settings .np-titlebar {padding-right: 64px}

	/* Compact panels */
	.np-phone-only {display: flex !important}
	body.np-on .np-panel .np-body {gap: 14px}
	/* Shirt: one row with Change, the colors, details behind a button */
	body.np-on .np-panel .np-shirt-card, body.np-on .np-panel #change-tshirt-style-btn {display: none}
	body.np-on .np-panel .np-shirt-row {height: 60px; flex: none; box-sizing: border-box; padding: 0 12px 0 8px; border: 0; border-radius: 12px; background: #F2F5F7; align-items: center; gap: 10px; text-align: left; color: #24323A}
	body.np-on .np-panel .np-shirt-row-thumb {flex: none; width: 44px; height: 44px; border-radius: 8px; overflow: hidden; background: #FFFFFF}
	body.np-on .np-panel .np-shirt-row-thumb img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 20%}
	body.np-on .np-panel .np-shirt-row-text {flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px}
	body.np-on .np-panel .np-shirt-row-text b {font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis}
	body.np-on .np-panel .np-shirt-row-text small {font-size: 12px; color: #5B6F79}
	body.np-on .np-panel .np-shirt-row-change {font-size: 14px; font-weight: 700; color: #00659B}
	body.np-on .np-panel .np-shirt-colors .color-picker-canvas span {width: 30px; height: 30px}
	body.np-on .np-panel .np-shirt-colors .color-picker-canvas {max-width: 40px; margin: 0 auto}
	body.np-on .np-panel .np-more-colors {max-width: 40px; display: block; margin: 0 auto; color: #00659B}
	body.np-on .np-panel .np-details-toggle {height: 48px; flex: none; box-sizing: border-box; padding: 0 14px; border: 1px solid #DCE2E5; border-radius: 12px; background: #FFFFFF; align-items: center; justify-content: space-between; font-size: 15px; font-weight: 600; color: #24323A}
	body.np-on .np-panel .np-details-toggle .np-chevron {color: #7A8F99; transition: transform .15s}
	body.np-on .np-panel .np-details-toggle[aria-expanded="true"] .np-chevron {transform: rotate(90deg)}
	body.np-on .np-panel .np-shirt-details {display: none}
	body.np-on .np-panel .np-shirt-details.is-open {display: flex}
	body.np-on .np-panel .np-shirt-details > .np-label {display: none}
	/* Edit text: one-line box, font row, inks, and one of Arc / Spacing / Outline */
	body.np-on #text-properties .np-text-preview, body.np-on #text-properties .np-body > .np-label[for="text-properties-edit-text"], body.np-on #text-properties .np-shape-section > .np-label {display: none}
	body.np-on #text-properties .np-textarea {min-height: 48px; padding: 12px 14px; border: 2px solid #00A2EA; border-radius: 12px; box-shadow: none; font-size: 16px; font-weight: 600}
	body.np-on #text-properties .np-font-button {min-height: 48px; height: 48px; padding: 0 14px; flex-direction: row; align-items: center; gap: 10px; border-radius: 12px}
	body.np-on #text-properties .np-font-button small {flex: none}
	body.np-on #text-properties .np-font-button .np-font-name {flex: 1; min-width: 0; font-size: 19px}
	body.np-on #text-properties .np-font-button b {font-size: 0; color: #7A8F99}
	body.np-on #text-properties .np-ink-row .np-swatch {width: 34px; height: 34px; border-radius: 17px}
	body.np-on #text-properties .np-ink-row .np-swatch span {width: 24px; height: 24px; border-radius: 12px}
	body.np-on #text-properties .np-ink-row .np-more-inks {height: 30px; color: #00659B}
	body.np-on .np-panel .np-shape-tabs {display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; flex: none}
	body.np-on .np-panel .np-shape-tab {height: 64px; border: 0; border-radius: 12px; background: #F2F5F7; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 12px; font-weight: 600; color: #24323A}
	body.np-on .np-panel .np-shape-tab.is-active {box-shadow: inset 0 0 0 2px #0077B6; background: #E6F4FB; color: #00659B; font-weight: 700}
	body.np-on #text-properties .np-shape {display: block}
	body.np-on #text-properties [data-np-tool="arc"] .np-spacing,
	body.np-on #text-properties [data-np-tool="arc"] .np-outline,
	body.np-on #text-properties [data-np-tool="spacing"] .np-arc,
	body.np-on #text-properties [data-np-tool="spacing"] .np-outline,
	body.np-on #text-properties [data-np-tool="outline"] .np-shape-section {display: none}
	body.np-on #text-properties .np-section.np-outline {border-top: 0; padding-top: 0}
	/* Upload: the buttons and file types in one dashed box, two plain tips, AI at the bottom */
	body.np-on #upload-image.np-panel #upload-image-drop-zone {gap: 10px; padding: 16px; border: 2px dashed #9FD8F3; border-radius: 14px; background: #F2FAFE}
	body.np-on #upload-image.np-panel .np-drop {min-height: 0; padding: 0; border: 0; background: transparent; gap: 10px}
	body.np-on #upload-image.np-panel .np-drop-icon, body.np-on #upload-image.np-panel .np-drop-text {display: none}
	body.np-on #upload-image.np-panel #uploadContainer {width: 100%; gap: 10px}
	body.np-on #upload-image.np-panel #uploadContainer .np-primary {height: 50px; border-radius: 12px; font-size: 16px}
	body.np-on #upload-image.np-panel .np-camera-button {width: 100%; box-sizing: border-box; justify-content: center; height: 46px; border: 1px solid #9FD8F3; border-radius: 12px; font-size: 15px; font-weight: 600; color: #00659B}
	body.np-on #upload-image.np-panel .np-tip-icon, body.np-on #upload-image.np-panel .np-tips li:nth-child(2) {display: none}
	body.np-on #upload-image.np-panel .np-tips ul {gap: 8px}
	body.np-on #upload-image.np-panel .np-tips p {font-size: 14px; line-height: 1.45}
	body.np-on #upload-image.np-panel .np-tips p strong {font-weight: 600}
	body.np-on #upload-image.np-panel .np-foot {padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 0}
	body.np-on #upload-image.np-panel .np-ai-button {font-weight: 600}
}

/* ==========================================================================
 * Save, Load, Quote & Buy (newShell.coffee _popovers): white cards with a title row, the panels' inputs and buttons
 * ========================================================================== */
body.np-on .np-pop {box-sizing: border-box; padding: 0; border: 1px solid #DCE2E5; border-radius: 12px; background: #FFFFFF; box-shadow: 0 12px 32px rgba(36, 50, 58, .16); font: 14px/1.4 'museosans', Arial, sans-serif; color: #24323A; text-align: left}
body.np-on .np-pop .tooltip-pointer {display: none !important}
body.np-on .np-pop-head {display: flex; align-items: center; gap: 8px; min-height: 56px; box-sizing: border-box; padding: 0 8px 0 20px; border-bottom: 1px solid #E6EBEE}
body.np-on .np-pop-title {flex: 1; min-width: 0; margin: 0; font: 700 17px/1.2 'museosans', Arial, sans-serif; color: #24323A}
body.np-on .np-pop-close, body.np-on .np-quote .panel-header .close-link {flex: none; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #5B6F79; cursor: pointer}
body.np-on .np-pop-close:hover, body.np-on .np-quote .panel-header .close-link:hover {background: #F2F5F7; color: #24323A}
body.np-on .np-pop .np-pop-checkout, body.np-on .np-pop.save-and-checkout .np-pop-save {display: none}
body.np-on .np-pop.save-and-checkout .np-pop-checkout {display: inline}
body.np-on .np-pop form {width: auto !important; min-width: 0 !important; margin: 0}
body.np-on .np-pop .tooltip-label {display: block; margin: 0 0 6px; font: 600 13px/1.3 'museosans', Arial, sans-serif; color: #24323A}
body.np-on .np-pop .input-text-2 {display: block; width: 100% !important; height: 44px; box-sizing: border-box; margin: 0 0 14px; padding: 0 12px !important; border: 1px solid #CED5D9 !important; border-radius: 10px !important; background: #FFFFFF; box-shadow: none; font: 16px/1 'museosans', Arial, sans-serif !important; color: #24323A}
body.np-on .np-pop .input-text-2:focus {outline: none; border-color: #00A2EA !important; box-shadow: 0 0 0 3px rgba(0, 162, 234, .18)}
body.np-on .np-pop .input-text-2::placeholder {color: #9AAAB2}
body.np-on .np-pop .primary-button {float: none; display: flex; align-items: center; justify-content: center; height: 46px; box-sizing: border-box; margin: 0; padding: 0 18px !important; border: 0 !important; border-radius: 10px !important; background: #0077B6 !important; box-shadow: none !important; text-shadow: none !important; filter: none; font: 700 15px/46px 'museosans', Arial, sans-serif !important; color: #FFFFFF !important; text-decoration: none; text-align: center}
body.np-on .np-pop .primary-button:hover {background: #00659B !important}
body.np-on .np-pop .tooltip-loading {border-radius: 12px}
body.np-on .np-pop #save-notice, body.np-on .np-pop #load-notice, body.np-on .np-pop .tooltip-warning:not(:empty), body.np-on .np-pop .save-step-warning:not(:empty) {margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; background: #FDECEC; font-size: 13px; color: #B42318}
body.np-on .np-pop .save-step-warning:empty {display: none}

/* Save */
body.np-on #save-design-tooltip #save-first-time-form, body.np-on #save-design-tooltip #save-form {padding: 18px 20px 20px}
body.np-on #save-design-tooltip #save-first-time-form .input-text-2 {width: 100% !important}
body.np-on #save-design-tooltip #design_review {display: flex; align-items: center; gap: 10px; margin: 0 0 16px}
body.np-on #save-design-tooltip #design_review label {position: static; font-size: 14px; color: #24323A}
body.np-on #save-design-tooltip #design_review_input {flex: none; width: 20px; height: 20px; margin: 0; accent-color: #0077B6}
body.np-on #save-design-tooltip #save-form .clearfix {display: flex; flex-wrap: wrap; align-items: center; gap: 10px}
body.np-on #save-design-tooltip #save-form .clearfix::before, body.np-on #save-design-tooltip #save-form .clearfix::after {display: none}
body.np-on #save-design-tooltip #save-form .tooltip-paragraph {flex: 0 0 100%; display: flex; align-items: center; gap: 10px; height: auto; min-height: 44px; margin: 0; padding: 0 12px; box-sizing: border-box; border-radius: 10px; background: #F2F5F7; line-height: 1.3}
body.np-on #save-design-tooltip #save-form .tooltip-paragraph .icon {float: none; margin: 0; opacity: .7}
body.np-on #save-design-tooltip #save-form .tooltip-text {float: none; flex: 1; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600}
body.np-on #save-design-tooltip #save-form .tooltip-paragraph .input-text-2 {float: none; flex: 1; margin: 4px 0}
body.np-on #save-design-tooltip #save-form .tooltip-edit-field {float: none; font: 600 13px/1 'museosans', Arial, sans-serif; color: #00659B}
body.np-on #save-design-tooltip #save-form #save-as-new-shirt {flex: 1}
body.np-on #save-design-tooltip #save-form .or_text {margin: 0; font-size: 13px; color: #7A8F99}
body.np-on #save-design-tooltip #save-form #share_design_link {display: flex; align-items: center; height: 46px; box-sizing: border-box; padding: 0 16px; border: 1px solid #CED5D9; border-radius: 10px; font: 600 15px/1 'museosans', Arial, sans-serif; color: #24323A; text-decoration: none}
body.np-on #save-design-tooltip #save-form #share_design_link:hover {background: #F7F9FA}

/* Load */
body.np-on #load-design-tooltip #load-design-form, body.np-on #load-design-tooltip #designs-list-form {padding: 18px 20px 20px}
body.np-on #load-design-tooltip #load-design-form p {margin: 0}
body.np-on #load-design-tooltip #designs-list-form .tooltip-paragraph {width: auto; margin: 0 0 8px; padding: 0; border: 0; text-align: left; white-space: normal; font-size: 13px; color: #5B6F79}
body.np-on #load-design-tooltip #designs-list-form .tooltip-paragraph strong {color: #24323A}
body.np-on #load-design-tooltip #designs-list-form .scroller {height: auto !important; max-height: 320px; overflow-y: auto}
body.np-on #load-design-tooltip #designs-list-form .scroller > .content {position: static !important; overflow: visible !important}
body.np-on #load-design-tooltip #designs-list-form .scroller > .pane {display: none !important}
body.np-on #load-design-tooltip #designs-list-form .tooltip-design-item {display: flex; align-items: center; gap: 10px; height: auto; min-height: 52px; margin: 0; padding: 0 4px; border: 0; border-bottom: 1px solid #E6EBEE; border-radius: 0; font-size: 14px}
body.np-on #load-design-tooltip #designs-list-form .tooltip-design-item:hover {border-color: #E6EBEE; border-radius: 0; background: #F7F9FA}
body.np-on #load-design-tooltip #designs-list-form .tooltip-design-item .tooltip-design-date {float: none; flex: none; width: 44px; margin: 0; font-style: normal; font-size: 12px; color: #7A8F99; font-variant-numeric: tabular-nums}
body.np-on #load-design-tooltip #designs-list-form .tooltip-design-item .tooltip-design-name {float: none; flex: 1; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: #24323A}
body.np-on #load-design-tooltip #designs-list-form .tooltip-design-item .primary-button {display: flex; float: none; margin: 0; flex: none; height: 34px; padding: 0 14px !important; border-radius: 8px !important; font-size: 13px !important; line-height: 34px !important; background: #FFFFFF !important; box-shadow: inset 0 0 0 1px #9FD8F3 !important; color: #00659B !important}
body.np-on #load-design-tooltip #designs-list-form .tooltip-design-item .primary-button:hover {background: #E6F4FB !important}
body.np-on #load-design-tooltip .success-load {width: auto; margin: 0; padding: 20px; text-align: center; font-size: 15px; color: #1B7F3B}

/* Quote & Buy */
body.np-on .np-quote {display: none; flex-direction: column; height: auto; overflow: hidden}
body.np-on .np-quote[style*="display: block"] {display: flex !important}
body.np-on .np-quote .panel-header {display: flex; align-items: center; gap: 8px; flex: none; min-height: 56px; box-sizing: border-box; margin: 0 !important; padding: 0 8px 0 20px !important; border: 0; border-bottom: 1px solid #E6EBEE !important; border-radius: 0 !important; background: #FFFFFF !important; position: static !important}
body.np-on .np-quote .panel-header::before, body.np-on .np-quote .panel-header::after {display: none}
body.np-on .np-quote .panel-header h2 {float: none; flex: 1; min-width: 0; margin: 0 !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 17px/1.2 'museosans', Arial, sans-serif !important; color: #24323A}
body.np-on .np-quote .panel-header .add-t-shirt {float: none; flex: none; order: 1; display: flex; align-items: center; height: 36px; padding: 0 10px; border-radius: 8px; font: 600 14px/1 'museosans', Arial, sans-serif !important; color: #00659B; text-decoration: none}
body.np-on .np-quote .panel-header .add-t-shirt:hover {background: #E6F4FB}
body.np-on .np-quote .panel-header .close-link {order: 2; margin: 0 !important; position: static !important}
body.np-on .np-quote .get-quote-details {flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; width: auto !important; margin: 0 !important; padding: 16px 20px !important; background: #FFFFFF}
body.np-on .np-quote .get-quote-colors {float: none !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 10px 12px !important; border: 0 !important; border-radius: 10px !important; background: #F2F5F7 !important; box-sizing: border-box}
body.np-on .np-quote .get-quote-colors > .content {position: static !important; overflow: visible !important; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 0}
body.np-on .np-quote .nano > .pane {display: none !important}
body.np-on .np-quote .get-quote-colors .total-inks {flex: 0 0 100%; margin: 0 !important; font-size: 13px !important; color: #24323A}
body.np-on .np-quote .get-quote-colors .total-inks strong {font-weight: 700}
body.np-on .np-quote .front-ink-colors, body.np-on .np-quote .back-ink-colors, body.np-on .np-quote .left-ink-colors, body.np-on .np-quote .right-ink-colors {align-items: center; gap: 6px}
body.np-on .np-quote .front-ink-colors[style*="block"], body.np-on .np-quote .back-ink-colors[style*="block"], body.np-on .np-quote .left-ink-colors[style*="block"], body.np-on .np-quote .right-ink-colors[style*="block"] {display: flex !important}
body.np-on .np-quote .get-quote-colors .list-title {font-size: 12px !important; color: #5B6F79 !important}
body.np-on .np-quote .get-quote-colors .color-picker-list {display: flex; gap: 4px; margin: 0; padding: 0}
body.np-on .np-quote .get-quote-colors .color-picker-list::before, body.np-on .np-quote .get-quote-colors .color-picker-list::after {display: none}
body.np-on .np-quote .get-quote-colors .color-picker-element {float: none; margin: 0; padding: 0; list-style: none}
body.np-on .np-quote .get-quote-colors .color-picker-canvas {display: block; width: 18px !important; height: 18px !important; box-sizing: border-box; border: 1px solid rgba(36, 50, 58, .18) !important; border-radius: 50%; margin: 0}
body.np-on .np-quote .get-quote-colors .color-picker-canvas .tooltip-outline {display: none !important}
body.np-on .np-quote .scroll-wrapper {float: none !important; width: auto !important; height: auto !important; margin: 0 !important; overflow: visible !important}
body.np-on .np-quote .scroll-wrapper > .content {position: static !important; overflow: visible !important; padding: 0; margin: 0}
body.np-on .np-quote .t-shirt-list {display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0}
body.np-on .np-quote .t-shirt-item {display: grid !important; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; width: auto !important; margin: 0 !important; padding: 14px !important; border: 1px solid #DCE2E5 !important; border-radius: 12px !important; background: #FFFFFF !important; list-style: none}
body.np-on .np-quote .t-shirt-item .clip-art-image {float: none !important; width: 56px !important; height: 74px !important; margin: 0 !important; border-radius: 8px; object-fit: cover; background: #F2F5F7}
body.np-on .np-quote .t-shirt-information {display: flex !important; flex-direction: column; justify-content: center; gap: 2px; float: none; width: auto; margin: 0}
body.np-on .np-quote .breadcrumb {font-size: 12px; font-style: normal; color: #5B6F79}
body.np-on .np-quote .breadcrumb .font-color-2 {color: #5B6F79}
body.np-on .np-quote .t-shirt-type {margin: 0}
body.np-on .np-quote .t-shirt-name {font: 700 16px/1.25 'museosans', Arial, sans-serif !important; color: #24323A}
body.np-on .np-quote .t-shirt-type .t-shirt-remove a {font-size: 13px; font-weight: 600; color: #B42318}
body.np-on .np-quote .t-shirt-price-info {font-size: 14px; color: #24323A; font-variant-numeric: tabular-nums}
body.np-on .np-quote .t-shirt-price-info strong {font-weight: 700}
body.np-on .np-quote .t-shirt-price-info .normal {font-size: 13px; color: #5B6F79}
body.np-on .np-quote .t-shirt-size-list {grid-column: 1 / -1; display: grid !important; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 8px; margin: 0 !important; padding: 12px 0 0 !important; border-top: 1px solid #E6EBEE !important}
body.np-on .np-quote .t-shirt-size-list::before, body.np-on .np-quote .t-shirt-size-list::after {display: none}
body.np-on .np-quote .t-shirt-size-list .t-shirt-size {float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; display: flex; flex-direction: column; gap: 4px; text-align: center}
body.np-on .np-quote .t-shirt-size-list .t-shirt-size[style*="none"] {display: none !important}
body.np-on .np-quote .t-shirt-size .label {font: 600 12px/1 'museosans', Arial, sans-serif !important; color: #5B6F79 !important}
body.np-on .np-quote .t-shirt-size .input-text-1 {width: 100% !important; height: 44px; box-sizing: border-box; padding: 0 2px !important; border: 1px solid #CED5D9 !important; border-radius: 10px !important; background: #FFFFFF; box-shadow: none; font: 600 16px/1 'museosans', Arial, sans-serif !important; color: #24323A !important; text-align: center; font-variant-numeric: tabular-nums}
body.np-on .np-quote .t-shirt-size .input-text-1:focus {outline: none; border-color: #00A2EA !important; box-shadow: 0 0 0 3px rgba(0, 162, 234, .18)}
body.np-on .np-quote .get-quote-checkout {flex: none; display: flex !important; flex-direction: row !important; align-items: center !important; gap: 12px; height: auto !important; margin: 0 !important; padding: 14px 20px !important; border: 0 !important; border-top: 1px solid #E6EBEE !important; border-radius: 0 0 12px 12px !important; background: #FFFFFF !important; box-shadow: none !important}
body.np-on .np-quote .get-quote-price {order: 1 !important; flex: 1; min-width: 0; margin: 0 !important; padding: 0 !important; text-align: left !important}
body.np-on .np-quote .get-quote-price .subtotal {display: block !important; font: 700 24px/1.15 'museosans', Arial, sans-serif !important; color: #24323A; font-variant-numeric: tabular-nums}
body.np-on .np-quote .get-quote-price .labels {display: block !important; font-size: 12px !important; font-style: normal; color: #1B7F3B !important}
body.np-on .np-quote .get-quote-checkout .primary-button {order: 2 !important; flex: none; width: auto !important; height: 48px; padding: 0 22px !important; font-size: 16px !important; line-height: 48px !important}
body.np-on .np-quote .get-quote-checkout .no-items {order: 1 !important; flex: 1; width: auto !important; height: auto; line-height: 1.4; font-size: 14px; color: #5B6F79; text-align: left !important}
body.np-on .np-quote .get-quote-save-step {flex: 1; padding: 18px 20px 20px !important}
body.np-on .np-quote .get-quote-save-step .save-step-notice {margin: 0 0 16px; padding: 10px 12px; border-radius: 10px; background: #E6F4FB; font: 600 14px/1.4 'museosans', Arial, sans-serif; color: #00659B}
body.np-on .np-quote .get-quote-save-step .tooltip-label {font-size: 13px}
body.np-on .np-quote .get-quote-save-step .save-step-back {display: block; margin-top: 12px; text-align: center; font: 600 14px/1 'museosans', Arial, sans-serif; color: #00659B}

body.np-on .np-quote.save-step-active .get-quote-details, body.np-on .np-quote.save-step-active .get-quote-checkout, body.np-on .np-quote.save-step-active .add-t-shirt {display: none !important}
body.np-on .np-quote .get-quote-save-step .primary-button {width: 100%}

/* "Design your shirt first." */
body.np-on .np-toast {padding: 10px 14px !important; border: 0 !important; border-radius: 10px !important; background: #24323A !important; box-shadow: 0 8px 24px rgba(36, 50, 58, .24) !important; font: 600 14px/1.3 'museosans', Arial, sans-serif; color: #FFFFFF !important; white-space: nowrap}
body.np-on .np-toast .tooltip-pointer {display: none !important}

@media only screen and (min-width: 769px) {
	body.np-on #save-design-tooltip.np-pop, body.np-on #load-design-tooltip.np-pop {position: fixed; top: 75px; right: 16px; left: auto; bottom: auto; width: 360px; margin: 0; z-index: 30}
	body.np-on .np-quote {position: fixed; top: 75px; right: 16px; left: auto; bottom: auto; width: 480px; max-height: calc(100vh - 91px); margin: 0; z-index: 30}
	body.np-on .np-quote .t-shirt-size-list {grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr)}
	body.np-on .np-toast {position: fixed !important; top: 75px !important; right: 16px !important; bottom: auto !important; left: auto !important; margin: 0 !important; z-index: 30}
}

@media only screen and (max-width: 768px) {
	/* Save: a bottom sheet over the price bar */
	body.np-on #save-design-tooltip.np-pop {position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; width: auto !important; max-width: none !important; max-height: calc(100dvh - 24px); overflow-y: auto; border: 0; border-radius: 18px 18px 0 0 !important; box-shadow: 0 -8px 28px rgba(20, 30, 36, .16) !important; padding-bottom: env(safe-area-inset-bottom, 0px); z-index: 3002 !important}
	body.np-on #save-design-tooltip .np-pop-head {padding: 6px 6px 0 16px; border-bottom: 0}
	body.np-on #save-design-tooltip #save-first-time-form, body.np-on #save-design-tooltip #save-form {padding: 6px 16px 20px}
	/* Load stays in the menu: the form only */
	body.np-on #load-design-tooltip .np-pop-head {display: none}
	body.np-on #load-design-tooltip.np-pop {border: 0 !important; box-shadow: none !important; background: transparent !important}
	body.np-on #load-design-tooltip #load-design-form {padding: 0}
	body.np-on #load-design-tooltip #load-design-form .clearfix {gap: 8px !important}
	body.np-on #load-design-tooltip #load-design-form .input-text-2 {margin: 0 !important; font-size: 16px !important; padding: 0 12px !important}
	body.np-on #load-design-tooltip #load-design-form .primary-button {height: 44px; padding: 0 16px !important; border: 0 !important; background: #0077B6 !important; color: #FFFFFF !important; font: 700 15px/44px 'museosans', Arial, sans-serif !important}
	/* Quote: full screen, header and checkout pinned */
	body.np-on .np-quote[style*="display: block"] {margin: 0 !important; background: #FFFFFF !important; border: 0; border-radius: 0 !important}
	body.np-on .np-quote .panel-header {padding: 0 4px 0 16px !important; padding-top: env(safe-area-inset-top, 0px) !important}
	body.np-on .np-quote .panel-header .add-t-shirt {font-size: 13px !important; padding: 0 8px}
	body.np-on .np-quote .get-quote-details {padding: 14px 16px !important}
	body.np-on .np-quote .t-shirt-size-list {grid-template-columns: repeat(4, minmax(0, 1fr))}
	body.np-on .np-quote .t-shirt-size .input-text-1 {height: 46px}
	body.np-on .np-quote .get-quote-checkout {padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important; border-radius: 0 !important; box-shadow: 0 -4px 16px rgba(20, 30, 36, .06) !important}
	body.np-on .np-quote .get-quote-checkout .primary-button {height: 50px; line-height: 50px !important}
	body.np-on .np-quote .get-quote-save-step {overflow-y: auto; padding: 16px !important}
	body.np-on .np-toast {background: #24323A !important; color: #FFFFFF !important; box-shadow: 0 8px 24px rgba(36, 50, 58, .24) !important}
}

/* The shirt photos dialog (desktop; phones keep mobile.css's full-screen viewer). The photo and thumbnails keep
   the sizes tshirtPhotos.js fits them to (607 x 552 and 49 x 49) */
@media (min-width: 769px) {
	body.np-on #dialog-container .np-photos {width: 695px; height: 552px; margin: 72px auto 0; padding: 72px 16px 16px; border: 1px solid #DCE2E5; border-radius: 12px; background: #FFFFFF; box-shadow: 0 16px 48px rgba(20, 30, 36, .18); font-family: 'museosans', Arial, sans-serif}
	body.np-on #dialog-container .np-photos .dialog-header {position: absolute; top: 0; left: 0; right: 0; width: auto; height: 56px; display: flex; align-items: center; margin: 0; padding: 0 8px 0 20px; border-bottom: 1px solid #E6EBEE; border-radius: 12px 12px 0 0; background: #FFFFFF; text-align: left; box-sizing: border-box}
	body.np-on #dialog-container .np-photos .dialog-header h2 {flex: 1; margin: 0; font: 700 17px/1.2 'museosans', Arial, sans-serif; color: #24323A}
	body.np-on #dialog-container .np-photos .dialog-header .close-link {position: static; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; color: #5B6F79}
	body.np-on #dialog-container .np-photos .dialog-header .close-link:hover {background: #F2F5F7; color: #24323A}
	body.np-on #dialog-container .np-photos .image-window {width: 607px; height: 552px; margin: 0; border-radius: 10px; background: #F2F5F7}
	body.np-on #dialog-container .np-photos #photo-side-gallery {width: 72px; height: 552px; margin: 0; padding: 0; border: 0; background: none}
	body.np-on #dialog-container .np-photos #photo-side-gallery .content {margin: 0; padding: 0 0 0 1px}
	body.np-on #dialog-container .np-photos #photo-side-gallery .clip-art-image {width: 49px; height: 49px; margin: 0 0 10px auto; padding: 4px; border: 1px solid #DCE2E5; border-radius: 10px; background: #FFFFFF; box-sizing: content-box}
	body.np-on #dialog-container .np-photos #photo-side-gallery .clip-art-image:hover {border-color: #9AAAB2}
	body.np-on #dialog-container .np-photos #photo-side-gallery .clip-art-image.np-active {border-color: #00A2EA; box-shadow: 0 0 0 1px #00A2EA}
	body.np-on #dialog-container .np-photos #photo-side-gallery .t-shirt-picture-detail {border-radius: 6px}
}