/* T-shirt Designer — library window (v1.7.1) */
.su-lw { position: fixed; inset: 0; z-index: 1000050; background: rgba(15, 16, 20, .55); display: flex; align-items: center; justify-content: center; padding: 24px; font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #17181a; }
.su-lw *, .su-lw *::before, .su-lw *::after { box-sizing: border-box; }
.su-lw-box { position: relative; width: min(1180px, 100%); height: min(860px, 100%); background: #fff; border-radius: 14px; box-shadow: 0 24px 70px rgba(0,0,0,.35); display: flex; flex-direction: column; overflow: hidden; }
.su-lw-head { display: flex; align-items: center; gap: 16px; padding: 14px 18px 0; border-bottom: 1px solid #e3e5e8; }
.su-lw-title { font-size: 19px; font-weight: 700; padding-bottom: 12px; }
.su-lw-tabs { display: flex; gap: 4px; align-self: flex-end; }
.su-lw-tabs button { border: 0; background: none; padding: 9px 14px 11px; font: inherit; font-weight: 600; color: #555; cursor: pointer; border-bottom: 3px solid transparent; }
.su-lw-tabs button.on { color: #17181a; border-bottom-color: #f2c230; }
.su-lw-x { margin-left: auto; align-self: flex-start; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #f1f2f4; font-size: 22px; line-height: 1; cursor: pointer; }
.su-lw-x:hover { background: #e4e6e9; }
.su-lw-bar { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-bottom: 1px solid #eef0f2; flex-wrap: wrap; }
.su-lw-crumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.su-lw-crumbs button { border: 0; background: none; padding: 4px 6px; border-radius: 6px; font: inherit; font-weight: 600; color: #2563c9; cursor: pointer; }
.su-lw-crumbs button:last-child { color: #17181a; cursor: default; }
.su-lw-crumbs span { color: #999; }
.su-lw-acts { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.su-lw-btn { border: 1.5px solid #c9ccd0; background: #fff; border-radius: 8px; padding: 8px 14px; font: inherit; font-weight: 600; cursor: pointer; }
.su-lw-btn:hover { border-color: #17181a; }
.su-lw-primary { background: #17181a; color: #fff; border-color: #17181a; }
.su-lw-primary:hover { background: #333; }
.su-lw-body { flex: 1; overflow-y: auto; padding: 16px 18px 24px; }
.su-lw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 14px; }
.su-lw-cell { position: relative; display: flex; flex-direction: column; gap: 4px; }
.su-lw-tile { display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: 100%; border: 1.5px solid #e3e5e8; background: #fff; border-radius: 10px; padding: 8px; cursor: pointer; font: inherit; text-align: center; color: inherit; }
.su-lw-tile:hover:not([disabled]) { border-color: #17181a; box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.su-lw-tile[disabled] { cursor: default; }
.su-lw-tile b { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.su-lw-tile small { color: #777; font-size: 12px; margin-top: -4px; }
.su-lw-img { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: repeating-conic-gradient(#eef0f2 0 25%, #fff 0 50%) 0 0 / 14px 14px; }
.su-lw-img img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.su-lw-img em { font-style: normal; font-weight: 700; color: #888; }
/* folders: a tab on top and the first item as the picture */
.su-lw-folder .su-lw-img { background: #f6e7b0; border-radius: 4px 10px 10px 10px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); padding: 10px; margin-top: 8px; overflow: visible; }
.su-lw-folder .su-lw-img::before { content: ""; position: absolute; left: 0; top: -8px; width: 44%; height: 12px; background: #f2c230; border-radius: 6px 8px 0 0; }
.su-lw-folder .su-lw-img img { border-radius: 4px; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.15); max-width: 88%; max-height: 88%; }
.su-lw-fico { display: none; }
.su-lw-tools { position: absolute; top: 4px; right: 4px; display: none; gap: 3px; }
.su-lw-cell:hover .su-lw-tools, .su-lw-cell:focus-within .su-lw-tools { display: flex; }
@media (hover: none) { .su-lw-tools { display: flex; } }
.su-lw-mini { width: 26px; height: 26px; border: 1px solid #d5d7db; border-radius: 50%; background: rgba(255,255,255,.95); font-size: 14px; line-height: 1; cursor: pointer; padding: 0; }
.su-lw-cell > .su-lw-mini { position: absolute; top: 2px; right: 2px; }
.su-lw-mini:hover { background: #17181a; color: #fff; }
.su-lw-del:hover { background: #c62828; border-color: #c62828; }
.su-lw-ia { border: 1.5px solid #2563c9; color: #2563c9; background: #fff; border-radius: 7px; padding: 5px 8px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.su-lw-ia:hover { background: #2563c9; color: #fff; }
.su-lw-new .su-lw-tile { border-color: #1e9e3e; box-shadow: 0 0 0 2px rgba(30,158,62,.25); }
.su-lw-note { color: #666; text-align: center; padding: 40px 10px; }
.su-lw-foot { padding: 9px 18px; border-top: 1px solid #eef0f2; font-size: 12.5px; color: #666; min-height: 38px; }
.su-lw-busy { color: #17181a; font-weight: 600; }
.su-lw-drop { position: absolute; inset: 0; background: rgba(242, 194, 48, .16); border: 3px dashed #f2c230; border-radius: 14px; display: grid; place-items: center; pointer-events: none; z-index: 5; }
.su-lw-drop div { background: #17181a; color: #fff; padding: 16px 26px; border-radius: 12px; text-align: center; display: flex; flex-direction: column; gap: 4px; }
.su-lw-drop b { font-size: 18px; }
.su-lw-drop[hidden] { display: none; }
@media (max-width: 600px) {
	.su-lw { padding: 0; }
	.su-lw-box { border-radius: 0; height: 100%; }
	.su-lw-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
	.su-lw-head { flex-wrap: wrap; gap: 6px; }
	.su-lw-tabs { order: 3; width: 100%; }
}

/* v1.7.2: fill the screen (the page behind is not needed while browsing) */
.su-lw { padding: 10px; }
.su-lw-box { width: 100%; height: 100%; max-width: none; }
@media (min-width: 900px) { .su-lw-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; } }
/* Themes style every <button>: keep ours exactly as designed (shop pages) */
.su-lw button { -webkit-appearance: none !important; appearance: none !important; text-transform: none !important; letter-spacing: normal !important; box-shadow: none; min-height: 0 !important; min-width: 0 !important; line-height: 1.25 !important; font-family: inherit !important; text-decoration: none !important; text-shadow: none !important; }
.su-lw .su-lw-x { display: grid !important; place-items: center; width: 38px !important; height: 38px !important; padding: 0 !important; margin-left: auto !important; border: 0 !important; border-radius: 50% !important; background: #f1f2f4 !important; color: #17181a !important; font-size: 24px !important; font-weight: 400 !important; line-height: 1 !important; }
.su-lw .su-lw-x:hover { background: #17181a !important; color: #fff !important; }
.su-lw .su-lw-btn { display: inline-flex !important; align-items: center; height: auto !important; padding: 9px 16px !important; border: 1.5px solid #9aa0a6 !important; border-radius: 8px !important; background: #fff !important; color: #17181a !important; font-size: 14px !important; font-weight: 600 !important; }
.su-lw .su-lw-btn:hover { border-color: #17181a !important; background: #f6f7f8 !important; }
.su-lw .su-lw-primary { background: #17181a !important; color: #fff !important; border-color: #17181a !important; }
.su-lw .su-lw-primary:hover { background: #333 !important; color: #fff !important; }
.su-lw .su-lw-tabs button { padding: 9px 14px 11px !important; border: 0 !important; border-bottom: 3px solid transparent !important; border-radius: 0 !important; background: none !important; color: #555 !important; font-size: 14.5px !important; font-weight: 600 !important; }
.su-lw .su-lw-tabs button.on { color: #17181a !important; border-bottom-color: #f2c230 !important; }
.su-lw .su-lw-crumbs button { padding: 4px 6px !important; border: 0 !important; background: none !important; color: #2563c9 !important; font-size: 14px !important; font-weight: 600 !important; border-radius: 6px !important; }
.su-lw .su-lw-crumbs button:last-child { color: #17181a !important; }
.su-lw .su-lw-tile { padding: 8px !important; border: 1.5px solid #e3e5e8 !important; border-radius: 10px !important; background: #fff !important; color: #17181a !important; font-size: 13px !important; font-weight: 400 !important; }
.su-lw .su-lw-tile:hover:not([disabled]) { border-color: #17181a !important; }
.su-lw .su-lw-mini { width: 26px !important; height: 26px !important; padding: 0 !important; border: 1px solid #d5d7db !important; border-radius: 50% !important; background: rgba(255,255,255,.95) !important; color: #17181a !important; font-size: 14px !important; line-height: 1 !important; }
.su-lw .su-lw-mini:hover { background: #17181a !important; color: #fff !important; }
.su-lw .su-lw-del:hover { background: #c62828 !important; border-color: #c62828 !important; }
.su-lw .su-lw-ia { padding: 5px 8px !important; border: 1.5px solid #2563c9 !important; border-radius: 7px !important; background: #fff !important; color: #2563c9 !important; font-size: 12.5px !important; font-weight: 600 !important; }
.su-lw .su-lw-ia:hover { background: #2563c9 !important; color: #fff !important; }

/* v1.9.2: library limit */
.su-lw .su-lw-lim { font-weight: 700; }
.su-lw .su-lw-lim.full { color: #b42318; }