/* Print Studio — frontend styles */

.ps-gallery-layout {
	display: flex;
	gap: 28px;
	align-items: flex-start;
	margin-top: 20px;
}
.ps-gallery-main { flex: 1; min-width: 0; }
.ps-gallery-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
@media (max-width: 900px) {
	.ps-gallery-layout { flex-direction: column; }
	.ps-gallery-sidebar { width: 100%; }
	.ps-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.ps-gallery-grid { grid-template-columns: 1fr; }
}
.ps-gallery-item {
	display: block;
	text-decoration: none;
	color: inherit;
	border: 1px solid #e2e2e2;
	border-radius: 6px;
	overflow: hidden;
	transition: box-shadow 0.15s ease;
	position: relative;
}
.ps-gallery-item:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.12); }
.ps-gallery-thumb {
	aspect-ratio: var(--ps-card-ratio, 4 / 3);
	background: #f5f5f5;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	position: relative;
}
.ps-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ps-gallery-thumb-flippable .ps-thumb-front,
.ps-gallery-thumb-flippable .ps-thumb-back {
	position: absolute;
	top: 0;
	left: 0;
	transition: opacity 0.25s ease;
}
.ps-gallery-thumb-flippable .ps-thumb-back { opacity: 0; }
.ps-gallery-thumb-flippable:hover .ps-thumb-front { opacity: 0; }
.ps-gallery-thumb-flippable:hover .ps-thumb-back { opacity: 1; }
.ps-thumb-flip-hint {
	position: absolute;
	bottom: 6px;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(0,0,0,0.6);
	color: #fff;
	font-size: 10px;
	padding: 2px 8px;
	border-radius: 10px;
	opacity: 0;
	transition: opacity 0.2s ease;
	pointer-events: none;
}
.ps-gallery-thumb-flippable:hover .ps-thumb-flip-hint { opacity: 0; }
.ps-gallery-thumb-flippable:not(:hover) .ps-thumb-flip-hint { opacity: 1; }
.ps-blank-thumb { color: #888; font-weight: 600; border: 2px dashed #ccc; }
.ps-upload-thumb { color: #1e88e5; font-weight: 600; border: 2px dashed #90caf9; background: #f2f8fe; }
html { scroll-behavior: smooth; }
.ps-gallery-title { padding: 8px 10px; font-size: 14px; text-align: center; }
.ps-gallery-swatch-dots { display: flex; justify-content: center; gap: 6px; padding: 0 10px 10px; }
.ps-gallery-swatch-dot {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px #ddd;
	cursor: pointer;
	padding: 0;
	box-sizing: border-box;
}
.ps-gallery-swatch-dot.active { box-shadow: 0 0 0 2px #333; }
.ps-gallery-sidebar {
	width: 260px;
	flex-shrink: 0;
	padding: 20px;
	background: #fafafa;
	border: 1px solid #eee;
	border-radius: 8px;
}
.ps-gallery-sidebar h3 { margin: 0 0 14px; font-size: 18px; font-weight: 700; color: #222 !important; }
.ps-gallery-sidebar h4 { margin: 18px 0 12px; font-size: 13px; font-weight: 600; color: #555 !important; }

.ps-gallery-sidebar .ps-gallery-search {
	width: 100%;
	box-sizing: border-box;
	border-radius: 6px;
}
.ps-gallery-sidebar .ps-gallery-search input { flex: 1; min-width: 0; width: auto; }

.ps-filter-checkbox { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #333; cursor: pointer; margin-bottom: 12px; }
.ps-filter-checkbox input { margin: 0; }
.ps-filter-clear { border: 1px solid #ddd; background: #fff; color: #333; font-size: 12px; padding: 6px 12px; border-radius: 4px; cursor: pointer; margin-top: 8px; width: 100%; }

.ps-gallery-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.ps-gallery-header h2 { margin: 0; }
.ps-gallery-search {
	display: flex;
	align-items: center;
	gap: 8px;
	border: 1px solid #ddd;
	border-radius: 20px;
	padding: 6px 14px;
	background: #fff;
	color: #888;
}
.ps-gallery-search input {
	border: none;
	outline: none;
	font-size: 13px;
	width: 200px;
	color: #333;
}
.ps-favourites-toggle {
	display: flex;
	align-items: center;
	gap: 6px;
	border: 1px solid #ddd;
	background: #fff !important;
	color: #333 !important;
	font-size: 13px;
	padding: 7px 14px;
	border-radius: 20px;
	cursor: pointer;
}
.ps-favourites-toggle.active { background: #fdecea !important; border-color: #f5c6c0; color: #e53935 !important; }

.ps-favourite-btn.ps-favourite-btn {
	position: absolute;
	top: 8px;
	right: 8px;
	background: #f2f2f2 !important;
	border: 1px solid #ddd !important;
	box-sizing: border-box !important;
	padding: 0 !important;
	margin: 0 !important;
	width: 30px !important;
	height: 30px !important;
	min-width: 30px !important;
	min-height: 30px !important;
	max-width: 30px !important;
	max-height: 30px !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(0,0,0,0.2);
	z-index: 5;
	line-height: 30px !important;
}
.ps-heart-glyph.ps-heart-glyph {
	display: block !important;
	color: #999 !important;
	opacity: 1 !important;
	visibility: visible !important;
	width: 18px !important;
	height: 18px !important;
	transform: none !important;
}
.ps-favourite-btn.active .ps-heart-glyph { color: #e53935 !important; }

.ps-design-help-thumb {
	flex-direction: column;
	gap: 6px;
	color: #333 !important;
	border: 2px dashed #ccc;
	text-align: center;
	padding: 10px;
}
.ps-design-help-thumb span { font-size: 12px; color: #777; }

.ps-gallery-no-results { text-align: center; padding: 30px; color: #777; }
.ps-gallery-no-results button { margin-left: 8px; border: 1px solid #ddd; background: #fff; padding: 4px 12px; border-radius: 4px; cursor: pointer; }
.ps-gallery-pagination { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 24px 0; flex-wrap: wrap; }
.ps-gallery-page-btn {
	min-width: 34px;
	height: 34px;
	padding: 0 10px;
	border: 1px solid #ddd;
	background: #fff;
	color: #333 !important;
	border-radius: 6px;
	cursor: pointer;
	font-size: 13px;
	box-sizing: border-box;
}
.ps-gallery-page-btn:hover:not(:disabled) { background: #f5f5f5; }
.ps-gallery-page-btn.active { background: #333 !important; color: #fff !important; border-color: #333; font-weight: 600; }
.ps-gallery-page-btn:disabled { opacity: 0.4; cursor: default; }

/* Upload-your-own-design section */
.ps-upload-own-design { margin-top: 30px; padding: 20px; background: #fafafa; border: 1px solid #eee; border-radius: 6px; }
.ps-upload-slot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.ps-upload-slot-preview { flex: 1 0 100%; max-width: 260px; }
.ps-upload-slot-preview:empty { display: none; }
.ps-upload-slot-preview .ps-upload-preview-img-wrap { margin-bottom: 4px; }
.ps-upload-slot-preview img { max-width: 100%; border: 1px solid #ddd; display: block; border-radius: 4px; }
.ps-upload-slot-preview p { display: none; }
.ps-upload-warning { background: #fff3cd; border: 1px solid #ffe69c; color: #664d03; padding: 10px 14px; border-radius: 4px; margin: 10px 0; }
#ps-upload-preview-images img { max-width: 100%; border: 1px solid #ddd; display: block; }
.ps-upload-preview-img-wrap { position: relative; display: inline-block; max-width: 100%; margin-bottom: 14px; }
/* The guide overlays are positioned as percentages of THIS wrapper, but
   nothing previously told the image itself to actually fill it — so
   the wrapper (and the correctly-sized guides inside it) rendered at
   one size while the image rendered at its own separate, unrelated
   size, leaving the guides floating disconnected from the actual
   photo instead of overlaid on it. Scoped specifically to the
   fullscreen review modal (#ps-upload-preview-images), where JS
   explicitly sets real width/height on the wrapper via
   updateUploadPreviewSizing() — the small inline slot preview shown
   right after picking a file reuses this same wrapper class but has
   no JS-set dimensions, so forcing height:100% there against an
   undefined wrapper height would collapse it to nothing instead. */
#ps-upload-preview-images .ps-upload-preview-img-wrap img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ps-upload-preview-guide { position: absolute; pointer-events: none; box-sizing: border-box; }
.ps-upload-preview-guide-bleed { border: 2px dashed #e53935; }
.ps-upload-preview-guide-safe { border: 2px dotted #1e88e5; }

/* Product page action buttons — colors intentionally NOT hardcoded here;
   .button and .button.alt are WooCommerce's own classes, styled by
   whatever theme is active, so these automatically match the site. */
.ps-action-buttons { margin: 14px 0; display: flex; flex-direction: column; gap: 10px; }
.ps-action-buttons a { margin: 0 !important; text-align: center; padding: 14px 20px !important; font-size: 15px !important; border-radius: 6px; font-weight: 600; }
.ps-action-buttons[data-ps-pending="1"] a { opacity: 0.5; cursor: not-allowed; }
.ps-variation-hint { font-style: italic; color: #777; margin: 4px 0 0; width: 100%; }

.ps-qr-note a { font-weight: 600; }

.ps-icon-category { border: 1px solid #eee; border-radius: 6px; margin-bottom: 8px; overflow: hidden; }
.ps-icon-category-header {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	text-align: left;
	background: #fafafa;
	border: none;
	padding: 10px 12px;
	font-size: 13px;
	font-weight: 600;
	color: #333 !important;
	cursor: pointer;
}
.ps-icon-category-arrow { display: inline-block; transition: transform 0.15s ease; font-size: 11px; color: #777 !important; }
.ps-icon-category-open .ps-icon-category-arrow { transform: rotate(90deg); }
.ps-icon-category-grid { padding: 10px 12px; max-height: 220px; }
.ps-library-modal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 8px; max-height: 300px; overflow-y: auto; }
.ps-library-modal-grid img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fafafa; cursor: pointer; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; padding: 6px; }
.ps-icons-admin-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 14px; margin-top: 16px; max-width: 900px; }
.ps-icons-admin-tile {
	position: relative;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 6px;
	padding: 10px;
	box-sizing: border-box;
}
.ps-icons-admin-tile img { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; }
.ps-icons-admin-delete {
	position: absolute;
	top: -8px;
	right: -8px;
	width: 24px !important;
	height: 24px !important;
	box-sizing: border-box !important;
	border-radius: 50% !important;
	border: 2px solid #fff !important;
	background: #e53935 !important;
	color: #fff !important;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	padding: 0 !important;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ===================== Studio editor ===================== */

.ps-studio-app { max-width: 100%; width: 100%; margin: 0; box-sizing: border-box; }
.ps-studio-fullscreen {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	/* Standard "full-bleed" technique — pulls the element to span the
	   full viewport width regardless of ANY ancestor's max-width, without
	   needing to know that ancestor's class name (guessing at specific
	   theme wrapper selectors was fragile and didn't reliably work).
	   Deliberately NOT using position:fixed here — an earlier fullscreen
	   attempt showed that breaks badly inside an Elementor section using
	   CSS transforms, since that creates a new positioning context. */
	width: 100vw;
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
}
.ps-studio-fullscreen .ps-studio-body { flex: 1; min-height: 0; }

.ps-topbar {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 10px 16px; background: #fff; border: 1px solid #eee; border-radius: 6px 6px 0 0; flex-wrap: wrap;
}
.ps-topbar-left, .ps-topbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ps-studio-title { font-weight: 600; font-size: 15px; }
.ps-title-input { padding: 6px 10px; border: 1px solid #ccc; border-radius: 4px; min-width: 220px; }
.ps-icon-btn { font-size: 13px; color: #333 !important; background: #f7f7f7 !important; border: 1px solid #ddd !important; }
.ps-icon-btn:hover { background: #eee !important; }
#ps-hand-tool.active { background: #333 !important; color: #fff !important; border-color: #333 !important; }
.ps-close-btn { margin-left: 4px; color: #333 !important; background: #f7f7f7 !important; border: 1px solid #ddd !important; }

.ps-low-res-warning { background: #fff3cd; border: 1px solid #ffe69c; color: #664d03; padding: 10px 14px; margin: 0; }

.ps-studio-body { display: flex; border: 1px solid #eee; border-top: none; min-height: 640px; background: #fff; }

.ps-left-sidebar { width: 84px; background: #fafafa; border-right: 1px solid #eee; display: flex; flex-direction: column; flex-shrink: 0; }
.ps-sidebar-tab {
	background: none; border: none; border-bottom: 1px solid #eee; padding: 14px 4px; cursor: pointer; color: #555;
	display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.ps-sidebar-tab span { font-size: 11px; font-weight: 600; }
.ps-qr-panel-thumb-wrap { display: flex; justify-content: center; padding: 12px 0; }
.ps-qr-panel-thumb {
	width: 140px;
	height: 140px;
	object-fit: contain;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 8px;
	cursor: pointer;
	transition: border-color 0.15s ease;
}
.ps-qr-panel-thumb:hover { border-color: #1e88e5; }

#ps-qr-purchase-btn {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	padding: 10px 12px;
	margin-top: 10px;
	border: none;
	border-radius: 4px;
	background-color: #1a1a1a;
	color: #ffffff;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}
#ps-qr-purchase-btn:hover { background-color: #333; color: #ffffff; }
.ps-sidebar-tab.active { background: #fff; color: #1e88e5; border-right: 2px solid #1e88e5; margin-right: -1px; }
.ps-mobile-only-tab { display: none; }

.ps-left-panel { width: 260px; flex-shrink: 0; border-right: 1px solid #eee; padding: 14px; overflow-y: auto; overflow-x: hidden; max-height: 760px; }
.ps-panel .button { width: 100%; margin-bottom: 8px; }
.ps-uploaded-images-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-top: 12px;
}
.ps-uploaded-image-item { position: relative; }
.ps-uploaded-image-item img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
	background: #f5f5f5;
	border: 1px solid #ddd;
	border-radius: 4px;
	cursor: pointer;
}
.ps-uploaded-image-delete {
	position: absolute;
	top: -6px;
	right: -6px;
	width: 20px !important;
	height: 20px !important;
	min-width: 20px;
	box-sizing: border-box !important;
	border-radius: 50% !important;
	border: 2px solid #fff !important;
	background: #e53935 !important;
	color: #fff !important;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	padding: 0 !important;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ps-panel label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.ps-panel input, .ps-panel select { width: 100%; padding: 6px 8px; margin-top: 4px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }

.ps-text-fields-list { list-style: none; margin: 10px 0 0; padding: 0; }
.ps-text-field-row { margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.ps-text-field-row input { flex: 1 1 auto; min-width: 0; }
.ps-text-field-delete {
	flex: 0 0 auto;
	align-self: stretch;
	width: 30px;
	height: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	line-height: 1;
	font-size: 16px;
	color: #555 !important;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
}
.ps-text-field-row input { margin-top: 0; }

.ps-shape-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ps-shape-btn { font-size: 24px; padding: 14px 0; background: #fafafa; border: 1px solid #ddd; border-radius: 6px; cursor: pointer; color: #333 !important; }
.ps-shape-btn:hover { background: #f0f0f0; }

/* Contextual toolbar — sits above the canvas, appears only when something's
   selected. Never touches the left sidebar, which always keeps showing its
   current tool tab (Text/Shapes/Photos/etc.) regardless of selection. */
.ps-contextual-toolbar {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	align-items: center;
	gap: 10px;
	padding: 8px 18px;
	background: #fff;
	border: 1px solid #e8e8e8;
	border-radius: 28px;
	white-space: nowrap;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin-bottom: 14px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.ps-panel-heading { margin: 0 0 4px; font-size: 14px; color: #222 !important; }
.ps-mobile-sheet-drag, .ps-mobile-sheet-header, .ps-topbar-center, .ps-mobile-filter-toggle { display: none; }
.ps-topbar-brand { font-weight: 700; font-size: 15px; color: #222 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ps-toolbar-group { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; flex-shrink: 0; }
.ps-toolbar-group > *, .ps-contextual-toolbar > * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	align-self: center !important;
	box-sizing: border-box !important;
	height: 32px !important;
	font-size: 13px !important;
	line-height: 30px !important;
}
.ps-toolbar-group > * > * { font-size: inherit; }

/* Removes the native number-input spinner (up/down arrows) on these
   two specifically — its presence changes how the browser calculates
   vertical centering of the text inside the box, differently from a
   plain text input, which is why these two kept touching the top edge
   even after every other toolbar control aligned correctly. Redundant
   anyway: dedicated -/+ buttons already sit beside the size input. */
#ps-obj-rotate {
	display: block;
	box-sizing: border-box !important;
	height: 32px !important;
	line-height: 30px !important;
	padding: 0 4px !important;
	vertical-align: middle;
}

#ps-font-size, #ps-obj-rotate {
	-webkit-appearance: textfield;
	-moz-appearance: textfield;
	appearance: textfield;
}
#ps-font-size::-webkit-inner-spin-button,
#ps-font-size::-webkit-outer-spin-button,
#ps-obj-rotate::-webkit-inner-spin-button,
#ps-obj-rotate::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.ps-toolbar-plain-label { display: flex; align-items: center; font-size: 12px; color: #333 !important; white-space: nowrap; }
.ps-toolbar-inline-label { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #333 !important; flex-shrink: 0; line-height: 1; }
.ps-toolbar-group > label:not(.ps-toolbar-inline-label) { line-height: 1; display: inline-flex; align-items: center; }
.ps-toolbar-group input, .ps-toolbar-group select {
	vertical-align: middle !important;
	box-sizing: border-box !important;
	height: 32px !important;
	max-height: 32px !important;
	line-height: 30px !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
.ps-toolbar-group button:not(.ps-color-box-btn):not(.ps-adjust-reset):not(.ps-toolbar-btn) {
	vertical-align: middle !important;
	box-sizing: border-box !important;
	height: 32px !important;
	max-height: 32px !important;
	line-height: 30px !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	overflow: hidden;
	flex-shrink: 0 !important;
	min-width: max-content;
}
.ps-toolbar-group input[type="checkbox"], .ps-toolbar-group input[type="radio"] { height: auto !important; max-height: none !important; line-height: normal !important; }

/* Fully self-contained styling for the toolbar's "black button" style
   controls — not relying on whatever external .button appearance was
   being inherited before, which caused two separate problems:
   inconsistent heights (padding/line-height varying by wherever that
   inherited styling actually came from), and the Effects dropdown
   looking visually mismatched from its neighbors (that inherited
   .button look never applies to <select> elements in the first place,
   only <button>/<a>). appearance:none plus a custom white arrow keeps
   this one visually a dropdown while matching the buttons around it. */
.ps-toolbar-group button:not(.ps-color-box-btn):not(.ps-adjust-reset):not(.ps-toolbar-btn),
#ps-text-effect {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border: none !important;
	border-radius: 4px !important;
	background-color: #1a1a1a !important;
	color: #ffffff !important;
	font-size: 13px !important;
	font-family: inherit !important;
	padding-left: 12px !important;
	padding-right: 12px !important;
	cursor: pointer !important;
	white-space: nowrap !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}
#ps-text-effect {
	width: 100px !important;
	padding-right: 28px !important;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='12' height='12' fill='none' stroke='white' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
}
#ps-text-effect option { background-color: #fff; color: #000; }

.ps-toolbar-mini-icon { font-size: 10px; color: #666 !important; letter-spacing: -0.5px; white-space: nowrap; }
.ps-toolbar-divider { width: 1px; height: 24px; background: #ddd; flex-shrink: 0; }
.ps-toolbar-btn {
	border: none;
	background: transparent;
	color: #444 !important;
	cursor: pointer;
	width: 32px;
	height: 32px;
	padding: 0;
	border-radius: 50%;
	font-size: 14px;
	line-height: 1;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.ps-toolbar-btn:hover { background: #f0f0f0; }
.ps-toolbar-btn.active { background: #333 !important; color: #fff !important; }
.ps-toolbar-delete { color: #e53935 !important; }
.ps-toolbar-delete:hover { background: #fdecea !important; }

#ps-font-search { width: 160px; box-sizing: border-box; padding: 0 14px; border: 1px solid #ddd; border-radius: 18px; flex-shrink: 0; }
#ps-font-size {
	width: 50px !important;
	box-sizing: border-box !important;
	height: 32px !important;
	line-height: 30px !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	padding-left: 10px !important;
	padding-right: 10px !important;
	border: 1px solid #ddd !important;
	border-radius: 16px !important;
	flex-shrink: 0 !important;
	text-align: center !important;
}
#ps-shape-stroke-width { width: 50px; box-sizing: border-box; padding: 0 10px; border: 1px solid #ddd; border-radius: 16px; flex-shrink: 0; text-align: center; }

/* Color inputs — browsers render <input type="color"> as a large plain
   rectangle by default; this makes it look like the small round swatch
   in the reference instead. */
#ps-text-color, #ps-shape-fill, #ps-shape-stroke {
	-webkit-appearance: none;
	appearance: none;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 2px solid #ddd;
	border-radius: 50%;
	cursor: pointer;
	flex-shrink: 0;
	background: none;
}
#ps-text-color::-webkit-color-swatch-wrapper,
#ps-shape-fill::-webkit-color-swatch-wrapper,
#ps-shape-stroke::-webkit-color-swatch-wrapper { padding: 0; border-radius: 50%; }
#ps-text-color::-webkit-color-swatch,
#ps-shape-fill::-webkit-color-swatch,
#ps-shape-stroke::-webkit-color-swatch { border: none; border-radius: 50%; }
#ps-text-color::-moz-color-swatch,
#ps-shape-fill::-moz-color-swatch,
#ps-shape-stroke::-moz-color-swatch { border: none; border-radius: 50%; }

.ps-font-picker { position: relative; flex-shrink: 0; }
.ps-font-size-picker { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.ps-font-size-picker input[type="number"] { width: 48px; text-align: center; }
.ps-font-size-step { width: 24px; height: 24px; padding: 0; font-size: 14px; line-height: 1; }
.ps-font-size-step[data-step="-1"] { margin-right: -4px !important; }
#ps-font-size { margin-left: -4px !important; margin-right: -4px !important; }
.ps-font-size-step[data-step="1"] { margin-left: -4px !important; }
.ps-hex-field {
	width: 74px;
	margin-left: 4px;
	padding: 4px 6px;
	font-size: 12px;
	font-family: monospace;
	border: 1px solid #ccc;
	border-radius: 4px;
	text-transform: uppercase;
}

.ps-recent-colors-list { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ps-color-history-item {
	display: block;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	line-height: 0;
}
.ps-color-history-dot {
	display: block;
	width: 22px;
	height: 22px;
	border-radius: 4px;
	border: 1px solid rgba(0,0,0,0.15);
	box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.ps-color-history-item:hover .ps-color-history-dot { border-color: #888; transform: scale(1.08); }

.ps-color-box-btn {
	width: 26px;
	height: 26px;
	border-radius: 4px;
	border: 1px solid rgba(0,0,0,0.2);
	box-shadow: 0 1px 2px rgba(0,0,0,0.08);
	cursor: pointer;
	padding: 0;
	vertical-align: middle;
}
/* The native <input type="color"> behind each swatch button used to be
   display:none — but browsers position their native color-picker popup
   relative to that input's own on-screen location, and a display:none
   element has no on-screen location at all, so the popup fell back to
   a default position (the viewport's top-left corner) completely
   disconnected from where the swatch actually is. Giving it real
   dimensions and a real position (just invisible and non-interactive,
   stacked exactly on top of the visible swatch) gives the browser
   something real to anchor the popup to. */
.ps-color-swatch-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 32px; }
.ps-color-swatch-wrap .ps-color-box-btn { position: relative; z-index: 1; }
.ps-color-swatch-wrap input[type="color"] {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 26px; height: 26px;
	opacity: 0;
	pointer-events: none;
	border: none;
	padding: 0;
}
.ps-font-dropdown {
	/* position/top/left are set dynamically in JS (position:fixed,
	   anchored to the input's actual screen location) — this avoids
	   being clipped by the toolbar's horizontal-scroll container, which
	   was silently hiding the whole dropdown before. */
	display: flex;
	flex-direction: column;
	width: 260px;
	max-height: 340px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 6px;
	z-index: 100000;
	box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.ps-font-row {
	display: block;
	width: 100%;
	flex-shrink: 0;
	box-sizing: border-box;
	text-align: left;
	background: none;
	border: none;
	padding: 10px 12px;
	line-height: 1.4;
	font-size: 15px;
	font-family: Arial, Helvetica, sans-serif !important;
	color: #222 !important;
	cursor: pointer;
	border-radius: 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ps-font-row:hover { background: #f0f6ff; }
.ps-font-option-empty { color: #999; text-align: center; padding: 20px; }

.ps-layers-list-compact { list-style: none; margin: 0; padding: 6px; display: flex; flex-direction: column; gap: 6px; max-height: 280px; overflow-y: auto; border: 1px solid #eee; border-radius: 6px; background: #fafafa; }
.ps-layer-row {
	padding: 8px 12px;
	border: 1px solid #e2e2e2;
	border-radius: 6px;
	background: #fff;
	font-size: 13px;
	cursor: pointer;
	color: #333;
	transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
	display: flex;
	align-items: center;
	gap: 6px;
}
.ps-layer-row:hover { background: #eef4ff; border-color: #b9d3ff; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.ps-layer-row.active { background: #dceaff; border-color: #7fb0ff; box-shadow: 0 1px 4px rgba(0,90,255,0.15); }
.ps-layer-row .ps-layer-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0; }
.ps-layer-row .ps-layer-lock-icon { flex: 0 0 16px; width: 16px; text-align: center; font-size: 12px; }
.ps-layer-row .ps-layer-drag-handle { flex: 0 0 14px; width: 14px; text-align: center; color: #bbb; cursor: grab; font-size: 13px; }
.ps-layer-row.dragging { opacity: 0.4; }
.ps-layer-row.drag-over-top { box-shadow: inset 0 2px 0 #2271b1; }
.ps-layer-row.drag-over-bottom { box-shadow: inset 0 -2px 0 #2271b1; }
.ps-layer-row.hidden-layer { opacity: 0.5; }

.ps-layers-action-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 8px;
	padding: 8px;
	background: #fafafa;
	border: 1px solid #eee;
	border-radius: 6px;
	transition: opacity 0.15s ease;
}
.ps-layers-action-strip button {
	flex: 1 1 40px;
	box-sizing: border-box !important;
	border: 1px solid #ddd;
	background: #fff;
	color: #444 !important;
	cursor: pointer;
	border-radius: 4px;
	height: 32px;
	padding: 0 !important;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ps-layers-action-strip button svg { width: 16px; height: 16px; flex-shrink: 0; pointer-events: none; }
.ps-layers-action-strip button:hover { background: #f0f0f0; }
.ps-layers-action-strip button.active { background: #333 !important; color: #fff !important; }

.ps-canvas-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; position: relative; background: #ececec; padding: 20px 30px 30px; min-width: 0; overflow: hidden; }
.ps-card-area { position: relative; }
.ps-guide-badges { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 8px; }
.ps-badge { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 12px; background: #fff; border: 1px solid #ddd; cursor: pointer; }
.ps-badge:not(.active) { opacity: 0.45; text-decoration: line-through; }
.ps-badge-safe { color: #2e7d32; border-color: #a5d6a7; }
.ps-badge-bleed { color: #e65100; border-color: #ffcc80; }

.ps-ruler-row { display: flex; align-self: flex-start; margin-left: 22px; }
.ps-ruler-corner { width: 0; }
.ps-ruler-h { position: relative; height: 20px; border-bottom: 1px solid #ccc; }
.ps-ruler-and-canvas { display: flex; min-height: 0; min-width: 0; overflow: hidden; }
.ps-ruler-v { position: relative; width: 22px; border-right: 1px solid #ccc; flex-shrink: 0; }
.ps-ruler-tick { position: absolute; font-size: 9px; color: #999; }
.ps-ruler-h .ps-ruler-tick { top: 4px; transform: translateX(-50%); border-left: 1px solid #ccc; padding-left: 2px; height: 8px; }
.ps-ruler-v .ps-ruler-tick { left: 4px; transform: translateY(-50%); }

.ps-canvas-area { display: flex; justify-content: center; overflow: auto; max-width: 100%; position: relative; touch-action: manipulation; }
#ps-fabric-canvas { touch-action: manipulation; }

.ps-rotate-live-badge {
	position: fixed;
	background: #333;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	padding: 4px 8px;
	border-radius: 4px;
	pointer-events: none;
	z-index: 100000;
	white-space: nowrap;
}
.ps-spacing-label {
	position: fixed;
	background: #333;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	padding: 4px 8px;
	border-radius: 4px;
	pointer-events: none;
	z-index: 100000;
	white-space: nowrap;
}
.ps-side-thumbs {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 16px 12px;
	background: #fff;
	border-left: 1px solid #eee;
	width: 100px;
	flex-shrink: 0;
}
.ps-side-thumbs-heading { font-size: 11px; font-weight: 600; color: #888 !important; text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 4px; text-align: center; }
.ps-side-thumb { background: #fff !important; border: 2px solid #ddd; border-radius: 6px; cursor: pointer; padding: 6px; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; box-sizing: border-box; }
.ps-side-thumb.active { border-color: #1e88e5; background: #f2f8fe !important; box-shadow: 0 0 0 2px rgba(30,136,229,0.15); }
.ps-side-thumb-img { display: block; width: 70px; height: 45px; background-color: #fff; background-size: cover; background-position: center; border: 1px solid #eee; border-radius: 3px; }
.ps-side-thumb-label { font-size: 11px; font-weight: 600; color: #333 !important; }

.ps-color-swatches {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 10px;
	background: #fff;
	border: 1px solid #eee;
	border-top: none;
}
.ps-color-swatches-label { font-size: 13px; font-weight: 600; color: #333 !important; }
#ps-color-swatches-list { display: flex; gap: 8px; }
.ps-color-swatch-dot {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px #ddd;
	cursor: pointer;
	padding: 0;
}
.ps-color-swatch-dot.active { box-shadow: 0 0 0 2px #333; }
.ps-custom-color-btn-REMOVED-PLACEHOLDER {
	background: repeating-conic-gradient(#ddd 0% 25%, #fff 0% 50%) 0 0 / 10px 10px;
	color: #555 !important;
	font-weight: 700;
	font-size: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ps-image-sub-panel, .ps-tool-sub-panel {
	display: none;
	flex-direction: column;
	gap: 10px;
	padding: 14px 16px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.15);
	z-index: 100000;
	min-width: 220px;
}
.ps-image-sub-panel label, .ps-tool-sub-panel label { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #333 !important; }
.ps-image-sub-panel input[type="range"], .ps-tool-sub-panel input[type="range"] { flex: 1; }
.ps-image-sub-panel input[type="color"], .ps-tool-sub-panel input[type="color"] { width: 36px; height: 28px; border: 1px solid #ddd; border-radius: 4px; padding: 0; cursor: pointer; }

/* Grid of icon options inside a popover (alignment, bullet/number list) —
   distinct from the row-based sliders (.ps-adjust-row) used for
   spacing/opacity/hue etc. */
.ps-tool-option-grid { display: flex; gap: 6px; }
.ps-tool-option-btn {
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #ddd;
	border-radius: 6px;
	background: #fff;
	color: #333 !important;
	cursor: pointer;
	box-sizing: border-box;
	padding: 0;
}
.ps-tool-option-btn:hover { background: #f5f5f5; }
.ps-tool-option-btn.active { background: #333 !important; color: #fff !important; border-color: #333; }

.ps-adjust-panel { flex-direction: column; gap: 8px; }
.ps-adjust-row { display: flex; align-items: center; gap: 8px; width: 100%; }
.ps-adjust-row label { min-width: 78px; font-size: 12px; color: #333 !important; line-height: 1; display: inline-flex; align-items: center; }
.ps-adjust-row input, .ps-adjust-row button { vertical-align: middle; box-sizing: border-box; }
.ps-adjust-row input[type="range"] { flex: 1; }

.ps-shape-corner-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.ps-shape-corner-grid label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: #555 !important; line-height: 1.2; }
.ps-shape-corner-grid input[type="number"] { width: 100%; box-sizing: border-box; padding: 4px 6px; border: 1px solid #ccc; border-radius: 4px; }
.ps-adjust-row input[type="number"] {
	width: 60px;
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 3px 6px;
	font-size: 12px;
}
.ps-adjust-reset {
	border: none;
	background: none;
	color: #666 !important;
	cursor: pointer;
	font-size: 15px;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	flex-shrink: 0;
}
.ps-adjust-reset:hover { background: #eee; }
/* Rainbow gradient track so you can see roughly where a hue shift is
   headed before dragging — a plain grey slider doesn't convey that. */
.ps-hue-slider {
	-webkit-appearance: none;
	appearance: none;
	height: 8px;
	border-radius: 4px;
	background: linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
}
.ps-hue-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid #333;
	cursor: pointer;
}
.ps-hue-slider::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid #333;
	cursor: pointer;
}

.ps-custom-color-panel {
	position: absolute;
	bottom: 100%;
	right: 10px;
	margin-bottom: 8px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	z-index: 600;
	width: 160px;
}
.ps-custom-color-panel label { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: #333 !important; }
.ps-custom-color-panel input[type="color"] { width: 40px; height: 26px; border: 1px solid #ddd; border-radius: 4px; padding: 0; cursor: pointer; }

.ps-swatch-list-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 10px;
	background: #fafafa;
	border: 1px solid #eee;
	border-radius: 6px;
	margin-bottom: 8px;
}
.ps-swatch-list-row-top {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
}
.ps-swatch-list-row.active { background: #f0f6ff; border-color: #90caf9; }
.ps-swatch-list-row input[type="color"] { width: 24px; height: 24px; border: 1px solid #ddd; border-radius: 50%; padding: 0; cursor: pointer; flex-shrink: 0; }
.ps-swatch-dot-preview { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #ddd; flex-shrink: 0; }
.ps-swatch-dot2-wrap { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.ps-swatch-color2-toggle {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1px solid #ddd;
	background: #fff;
	color: #666 !important;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	box-sizing: border-box;
	padding: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.ps-swatch-color2-toggle:hover { background: #f0f0f0; }
.ps-swatch-color-name { width: 100%; box-sizing: border-box; border: 1px solid #ddd; border-radius: 4px; padding: 5px 8px; font-size: 12px; }
.ps-swatch-list-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: #333 !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-swatch-list-row .button { width: auto !important; margin-bottom: 0 !important; font-size: 11px !important; padding: 2px 8px !important; height: auto !important; line-height: 1.8 !important; flex-shrink: 0; }
.ps-swatch-remove-btn { border: none; background: #fdecea; color: #e53935 !important; width: 22px; height: 22px; border-radius: 50%; cursor: pointer; font-size: 11px; flex-shrink: 0; }
.ps-swatch-select-btn { font-size: 14px; font-weight: 700; }

.ps-zoom-bar {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
	padding: 12px;
	background: #fff;
	border: 1px solid #eee;
	border-top: none;
	font-size: 13px;
}
.ps-zoom-bar button {
	box-sizing: border-box !important;
	border: 1px solid #ddd !important;
	background: #f7f7f7 !important;
	width: 32px !important;
	height: 32px !important;
	min-width: 32px !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 50% !important;
	cursor: pointer;
	font-size: 16px !important;
	line-height: 1 !important;
	color: #333 !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
}
.ps-zoom-bar button:hover { background: #eee !important; }

.ps-zoom-settings-menu {
	position: fixed;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 6px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.12);
	overflow: hidden;
	z-index: 100000;
	min-width: 160px;
}
.ps-zoom-settings-menu button {
	display: block;
	width: 100%;
	text-align: left;
	padding: 8px 16px;
	border: none;
	background: #fff;
	color: #333;
	font-size: 13px;
	cursor: pointer;
	white-space: nowrap;
}
.ps-zoom-settings-menu button:hover { background: #f5f5f5; }

/* Ensure every icon-only button centers its SVG cleanly, regardless of
   which specific button class it uses. */
/* Every circular button in the app locked to a true circle, regardless
   of any theme button padding/border that might otherwise distort it —
   this exact bug already bit the favourite-heart button once (a theme's
   own button padding stretched it into an oval); rather than fix each
   circular button individually as they're found, this rule covers all
   of them consistently, including any added later. */
.ps-icon-btn, .ps-toolbar-btn, .ps-shape-btn,
.ps-color-swatch-dot, .ps-swatch-remove-btn, .ps-favourite-btn,
.ps-icon-style-btn, .ps-gallery-swatch-dot,
.ps-adjust-reset, .ps-color-box-btn {
	box-sizing: border-box !important;
	padding: 0 !important;
	margin: 0;
}
/* .ps-close-btn has a text label ("Close") alongside its icon, not just
   an icon — it still needs box-sizing safety, but zeroing its padding
   would crush the label against the button's edges. */
.ps-close-btn {
	box-sizing: border-box !important;
}

.ps-icon-btn, .ps-toolbar-btn, .ps-shape-btn, .ps-close-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
}

#ps-zoom-level { font-weight: 600; min-width: 44px; text-align: center; }
.ps-zoom-bar-divider { width: 1px; height: 20px; background: #ddd; }
#ps-hand-tool-zoom { border-radius: 6px !important; width: auto !important; padding: 0 12px !important; font-size: 13px !important; }
#ps-hand-tool-zoom.active { background: #333 !important; color: #fff !important; border-color: #333 !important; }

@media (max-width: 782px) {
	.ps-studio-body { flex-direction: column; }
	.ps-left-sidebar { width: 100%; flex-direction: row; overflow-x: auto; }
	.ps-left-panel { width: 100%; max-height: 260px; }
	.ps-side-thumbs { width: 100%; flex-direction: row; border-left: none; border-top: 1px solid #eee; }
}

/* Modal (preview / confirm dialogs) */
.ps-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); z-index: 100000; display: flex; align-items: center; justify-content: center; }
.ps-modal-inner { background: #fff !important; padding: 24px; border-radius: 8px; max-width: 720px; width: 90%; max-height: 85vh; overflow-y: auto; }
.ps-modal-inner h3 { color: #222 !important; }
.ps-modal-inner p:not(.ps-review-authorize-error), .ps-modal-inner .description { color: #555 !important; }

/* Fullscreen variant — used for the Review your design page. Takes the
   entire viewport edge-to-edge (no centered card, no backdrop gap)
   with a two-pane layout: product preview on the left on a light grey
   field, the review/checklist panel on the right in a plain white
   column — matching a real Vistaprint-style review screen rather than
   a dialog box floating over the canvas. */
.ps-modal-fullscreen { padding: 0; background: #fff; }
.ps-modal-fullscreen .ps-modal-inner {
	max-width: none;
	width: 100%;
	height: 100vh;
	max-height: 100vh;
	margin: 0;
	padding: 0;
	border-radius: 0;
	display: flex;
	overflow: hidden;
}
.ps-review-preview-pane {
	flex: 1 1 60%;
	background: #f2f2f2;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow-y: auto;
	padding: 32px;
	position: relative;
}
.ps-review-side-panel {
	flex: 0 0 420px;
	max-width: 420px;
	padding: 0;
	overflow: hidden;
	border-left: 1px solid #eee;
	position: relative;
	display: flex;
	flex-direction: column;
}
.ps-review-side-scroll {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 32px 32px 16px;
}
.ps-review-side-footer {
	flex: 0 0 auto;
	padding: 16px 32px 24px;
	border-top: 1px solid #eee;
	background: #fff;
}
.ps-review-close-btn {
	position: absolute;
	top: 20px;
	right: 20px;
	background: none;
	border: none;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	color: #555 !important;
	z-index: 2;
}
@media (max-width: 900px) {
	.ps-modal-fullscreen .ps-modal-inner { flex-direction: column; }
	.ps-review-preview-pane { flex: 1 1 auto; }
	.ps-review-side-panel { flex: 1 1 auto; max-width: none; border-left: none; border-top: 1px solid #eee; }
}
#ps-preview-images {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 100%;
	height: 100%;
}
/* No fixed pixel cap — the design fills as much of the pane as it can,
   constrained only by the pane's own available width/height (via vh so
   it never overflows vertically), scaling down gracefully for narrower
   screens through the flex-wrap above. */
#ps-preview-images > div { max-width: 100%; }
#ps-upload-preview-images > div { max-width: 100%; }
.ps-preview-side-tabs { display: flex; gap: 8px; }
.ps-preview-side-tab {
	padding: 6px 20px;
	border: 1px solid #ddd;
	border-radius: 20px;
	background: #fff;
	color: #555 !important;
	font-size: 13px;
	cursor: pointer;
}
.ps-preview-side-tab.active { background: #333 !important; color: #fff !important; border-color: #333; }
.ps-preview-thumb {
	display: block;
	margin: 0 auto 10px;
	border: 1px solid #ddd;
	box-shadow: 0 4px 16px rgba(0,0,0,0.08);
	object-fit: contain;
}
.ps-actual-size-toggle { display: flex; align-items: center; gap: 6px; font-size: 13px; margin: 10px 0; cursor: pointer; }

.ps-drafts-list { list-style: none; margin: 0 0 12px; padding: 0; }
.ps-draft-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid #e2e2e2;
	border-radius: 6px;
	margin-bottom: 8px;
	background: #fafafa;
}
.ps-draft-row-title { font-size: 13px; color: #333 !important; flex: 1; }
.ps-drafts-delete-btn { background: none; border: none; color: #b00; cursor: pointer; font-size: 15px; padding: 2px 6px; }

.ps-review-checklist { margin: 0 0 16px; padding-left: 18px; color: #333 !important; font-size: 14px; }
.ps-review-checklist li { margin-bottom: 4px; }
.ps-review-warning {
	background: #fdeaea;
	border: 1px solid #f3b8b8;
	border-radius: 8px;
	padding: 14px 16px;
	margin: 16px 0;
	color: #7a1f1f !important;
	font-size: 13px;
}
.ps-review-warning strong { display: block; margin-bottom: 4px; color: #7a1f1f !important; }
.ps-review-warning p { margin: 4px 0; color: #7a1f1f !important; }
.ps-review-warning u { text-decoration: underline; }
.ps-review-authorize-label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 13px;
	color: #333 !important;
	margin: 16px 0 4px;
	cursor: pointer;
}
.ps-review-authorize-error {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #b32d2e !important;
	background: #fdeceb;
	border: 1px solid #f3c6c3;
	border-radius: 6px;
	padding: 10px 14px;
	font-size: 13px;
	margin: 0 0 12px;
	font-weight: 600;
}
.ps-review-continue-btn {
	width: 100%;
	padding: 12px 0;
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 10px;
}
.ps-review-continue-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* This Studio page is frontend, not wp-admin, so a disabled .button
   here doesn't get WordPress's own visible-disabled treatment — it was
   falling back to bare native browser styling, which reads as nearly
   invisible rather than clearly "still there but disabled." */
.ps-text-case-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	background: #f0f0f0 !important;
	color: #888 !important;
	border-color: #ddd !important;
}
.ps-review-edit-btn {
	display: block;
	width: 100%;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	color: #555 !important;
	text-decoration: underline;
	text-align: center;
	padding: 6px 0;
	font-size: 13px;
}
.ps-review-edit-btn:hover { color: #222 !important; }

/* Cart page — the customer's confirmed design preview. WooCommerce
   wraps item_data values in a compact inline dt/dd structure meant for
   short text, not images — styling this plugin's own elements directly
   (rather than trying to also restyle WooCommerce's wrapping markup,
   which browsers can restructure since it isn't valid to nest a <div>
   inside the <p> WooCommerce puts the value in) is what reliably breaks
   this out into a clear block. */

/* Price/Quantity/Subtotal default to vertical-align:middle, centering
   them across the FULL row height — which includes the design preview
   sitting below the product name/details. That reads as if they belong
   to the image rather than the product line itself. Aligning them to
   the top instead puts everything that's "about this line item" into
   one clean row together, with the design preview clearly reading as
   its own separate section underneath. */
.woocommerce-cart-form .product-price,
.woocommerce-cart-form .product-quantity,
.woocommerce-cart-form .product-subtotal {
	vertical-align: top !important;
	padding-top: 20px !important;
}

/* The theme's own cart-totals sidebar likely uses a negative top
   margin or absolute positioning tuned for a specific table height —
   this breaks once a product row grows taller than that (a
   double-sided item showing two preview images plus a button), causing
   it to overlap the table header above it. Forcing normal, safe static
   positioning regardless of whatever offset the theme was assuming. */
.cart_totals {
	margin-top: 0 !important;
	position: static !important;
	top: auto !important;
}
/* Same underlying cause, different symptom: the "Cart totals" heading
   and the Subtotal row directly below it were ALSO overlapping WITHIN
   the box itself — the container-level fix above only addressed its
   position relative to the table above it, not spacing internal to
   the box. */
.cart_totals h2 {
	position: static !important;
	margin: 0 0 16px !important;
	top: auto !important;
}
.cart_totals table {
	position: static !important;
	margin-top: 0 !important;
	top: auto !important;
}

.ps-cart-design-divider {
	border: none;
	border-top: 1px solid #eee;
	margin: 14px 0 12px;
	width: 100%;
}
/* Shrink-wraps to its widest child (the design preview image, up to
   200px) and centers everything inside it — this is what makes the
   Edit button center to the image's own actual rendered width,
   whatever that happens to be for a given card's proportions, rather
   than centering against the full column width. */
.ps-cart-design-group {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
}
.ps-cart-design-preview {
	display: flex !important;
	margin-top: 0;
}
.ps-cart-design-preview-double { gap: 16px; }
.ps-cart-design-side { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ps-cart-design-side small { color: #666; font-size: 12px; }

/* The Edit design button was inheriting WooCommerce's default
   full-width .button styling, reading as oversized next to a small
   preview image — sized compactly here instead, to fit its own
   content. Centering itself now comes from the shared
   .ps-cart-design-group wrapper above, not its own margin. */
.ps-cart-edit-design-btn {
	display: inline-block !important;
	width: auto !important;
	padding: 8px 18px !important;
	font-size: 13px !important;
	margin: 10px 0 8px !important;
}

/* Quantity, Printing Type, and any other product/variation details
   WooCommerce lists under the item name were each stacking as their
   own block by default, wrapping awkwardly rather than reading as one
   clean line. Covers every markup pattern WooCommerce has used across
   versions/themes — the modern wc-item-meta list, the older variation
   dl, AND a third pattern some setups use instead: each attribute as
   its own standalone <p> (block-level by default, same stacking
   problem) rather than wrapped in a list or definition-list at all. */
.woocommerce-cart-form .wc-item-meta,
.woocommerce-cart-form .variation {
	display: flex !important;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 20px;
	margin: 6px 0 4px !important;
	padding: 0 !important;
	list-style: none;
}
.woocommerce-cart-form .wc-item-meta li,
.woocommerce-cart-form .variation > div {
	display: flex;
	gap: 4px;
	font-size: 13px;
	color: #555;
	margin: 0 !important;
}
.woocommerce-cart-form .wc-item-meta li p,
.woocommerce-cart-form .wc-item-meta-label,
.woocommerce-cart-form .variation dt,
.woocommerce-cart-form .variation dd {
	margin: 0 !important;
	padding: 0 !important;
	display: inline;
}
.woocommerce-cart-form .wc-item-meta-label { font-weight: 600; color: #333; }

/* Third pattern: standalone <p class="wc-item-meta"> attributes, one
   per line item detail, not wrapped in any shared list container. */
.woocommerce-cart-form p.wc-item-meta {
	display: inline-flex !important;
	gap: 4px;
	font-size: 13px;
	color: #555;
	margin: 0 20px 4px 0 !important;
}
/* Confirmed via direct inspection: WooCommerce nests the VALUE inside
   its own <p> tag within the <dd> — <dd class="variation-Quantity">
   <p>500</p></dd> — not as plain text. A <p> is block-level by
   default regardless of its parent's own display setting, so it was
   still forcing its own line break and default margin even with the
   <dd> itself already set to inline above. */
.woocommerce-cart-form .variation dd p {
	display: inline;
	margin: 0 !important;
	padding: 0 !important;
}

/* ============================================================
   MOBILE STUDIO REDESIGN (max-width: 600px)
   ============================================================
   A genuinely different layout on phones, not the desktop layout
   squeezed smaller — matching a real mobile design-tool pattern
   (VistaPrint-style): a bottom tab bar for the main tools, each tab's
   content sliding up as its own sheet, a small floating toolbar that
   follows whatever's selected, and a second contextual sheet
   (color/font/etc.) that swaps in — replacing the tab bar — the
   moment something's selected.

   One shared set of sizing values below (--ps-m-*) is used
   everywhere in this section deliberately — every tab button, sheet
   button, and floating-toolbar button reads from the SAME few
   numbers, so nothing ends up a different size or spacing from
   anything else by accident.
   ============================================================ */
@media (max-width: 600px) {
	:root {
		--ps-m-tabbar-h: 60px;
		--ps-m-icon: 22px;
		--ps-m-label: 10px;
		--ps-m-gap: 6px;
		--ps-m-pad: 10px;
		--ps-m-touch: 44px;
		--ps-m-radius: 16px;
	}

	/* ---- Top bar: same 3-zone idea as the reference (menu / brand /
	   primary action). The previous version fixed a fixed HEIGHT here
	   without accounting for the fact this bar can WRAP to a second row
	   when its content doesn't fit one line (real, existing desktop
	   behavior) — the wrapped Preview & Finish / Close row was still
	   there, just squeezed out of the fixed-height box and visually
	   covered by the canvas immediately below it, which is exactly why
	   those buttons looked like they'd vanished. Forcing everything
	   onto one row (nowrap) and actually freeing up the room for it —
	   hiding the redundant title text, making Close icon-only — is the
	   real fix, not just resizing. overflow-x is a safety net only, not
	   the primary fix. ---- */
	.ps-topbar {
		padding: 6px var(--ps-m-pad);
		height: auto;
		min-height: 52px;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-areas: "logo logo" "left right";
		row-gap: 6px;
		align-items: center;
		border-radius: 0;
	}
	.ps-topbar-left { grid-area: left; justify-self: start; flex-wrap: nowrap; overflow-x: auto; }
	.ps-topbar-right { grid-area: right; justify-self: end; flex-wrap: nowrap; overflow-x: auto; }
	.ps-studio-title { display: none; }
	/* A clear, separate, labeled way to change what the text SAYS —
	   distinct from the font/color/style controls below it, which
	   change how it LOOKS. Desktop already has this separation via its
	   own text-field-list panel; this gives mobile the same clarity. */
	button#ps-mobile-edit-text-btn {
		display: flex !important;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		max-width: 100%;
		height: var(--ps-m-touch);
		max-height: var(--ps-m-touch);
		margin: 0 0 8px;
		padding: 0 12px;
		font-size: 14px;
		font-weight: 600;
		font-family: inherit;
		line-height: normal;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
		border: none;
		border-radius: 6px;
		cursor: pointer;
		-webkit-appearance: none;
		appearance: none;
		color: #ffffff !important;
		background-color: #000000 !important;
	}
	.ps-topbar-left .ps-icon-btn,
	.ps-topbar-right .ps-icon-btn { width: var(--ps-m-touch); height: var(--ps-m-touch); flex-shrink: 0; }
	.ps-close-btn {
		padding: 0 !important;
		margin: 0 !important;
		width: var(--ps-m-touch);
		height: var(--ps-m-touch);
		min-width: var(--ps-m-touch);
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0 !important;
	}
	.ps-close-btn-label { display: none; }
	#ps-preview-design, #ps-save-template { flex-shrink: 0; white-space: nowrap; height: var(--ps-m-touch); padding: 0 16px; }
	/* True edge-to-edge on mobile — the border and rounded corners were
	   built for a desktop "framed panel within the page" look, which on
	   a full-screen phone view just left a visible border/gap around
	   the outside instead of the work area genuinely filling 100%. Also
	   drops the fixed 640px minimum height, which could force extra
	   scrolling on a shorter phone screen — mobile should size to
	   whatever's actually available, not a desktop-tuned floor. */
	.ps-studio-body { border: none; min-height: 0; }
	/* Centered logo/brand, matching the reference's 3-zone top bar
	   (icons | logo | primary action) — there was previously no center
	   zone at all, just two sides. Absolutely centered so it stays true
	   center regardless of how wide the left/right sections are. */
	.ps-topbar-center {
		grid-area: logo;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		max-height: 32px;
		min-width: 0;
		overflow: hidden;
		pointer-events: none;
	}
	.ps-topbar-center img { max-height: 32px; width: auto; display: block; }

	/* The negative-margin full-bleed technique above requires an
	   ancestor to actually allow the element to visually extend beyond
	   its normal box — many theme wrappers apply overflow-x:hidden
	   specifically to prevent unwanted horizontal scroll, which would
	   silently clip that technique's effect even though the CSS itself
	   is correct. position:fixed breaks out of ancestor overflow
	   entirely, at the cost of a known, documented risk (breaking
	   inside an Elementor section using CSS transforms) — scoped to
	   mobile only here to limit that risk's blast radius, since the
	   desktop version works and shouldn't be touched. */
	.ps-studio-fullscreen {
		position: fixed;
		top: 0; left: 0;
		width: 100vw;
		height: 100vh;
		margin: 0;
	}

	/* ---- Front/Back switch: a clean pill above the bottom tab bar,
	   matching the reference, instead of the desktop side-thumbnail
	   column (which was never given a mobile treatment at all, and was
	   just sitting there full-width and oversized on a phone screen). ---- */
	.ps-side-thumbs {
		position: fixed;
		bottom: calc(var(--ps-m-tabbar-h) + 8px + env(safe-area-inset-bottom, 0px));
		left: 50%;
		transform: translateX(-50%);
		flex-direction: row;
		width: auto;
		border: none;
		background: #fff;
		border-radius: 999px;
		box-shadow: 0 2px 8px rgba(0,0,0,0.12);
		padding: 4px;
		gap: 0;
		z-index: 500;
	}
	.ps-side-thumbs-heading { display: none; }
	.ps-side-thumb {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: auto;
		height: 36px;
		padding: 0 18px;
		border-radius: 999px;
		border: none;
		background: none;
		font-size: 13px;
		font-weight: 600;
	}
	.ps-side-thumb.active { background: #333; color: #fff !important; }
	/* This — not the button itself — was the actual empty box: a
	   separate span with its own dimensions that the JS sets a
	   background-image on. Hiding the button's own background-image
	   never touched this, since it's a different element entirely. */
	.ps-side-thumb-img { display: none; }

	/* ---- Bottom tab bar (was the left sidebar) ---- */
	.ps-studio-body { flex-direction: column; padding-bottom: var(--ps-m-tabbar-h); position: relative; }
	.ps-left-sidebar {
		position: fixed;
		bottom: 0; left: 0; right: 0;
		width: auto;
		height: var(--ps-m-tabbar-h);
		flex-direction: row;
		justify-content: center;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		border-right: none;
		border-top: 1px solid #eee;
		background: #fff;
		z-index: 500;
		padding-bottom: env(safe-area-inset-bottom, 0);
	}
	.ps-sidebar-tab {
		flex: 0 0 auto;
		width: clamp(64px, 19vw, 84px);
		height: var(--ps-m-tabbar-h);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		border-right: none !important;
		margin-right: 0 !important;
	}
	.ps-sidebar-tab svg { width: var(--ps-m-icon); height: var(--ps-m-icon); }
	.ps-sidebar-tab span { font-size: var(--ps-m-label); }
	.ps-sidebar-tab.active { border-right: none; border-top: 2px solid #1e88e5; }
	.ps-mobile-only-tab { display: flex; }

	/* The background/swatches bar lives elsewhere in the page on
	   desktop (a row near the top of the canvas) — rather than moving
	   it in the markup or duplicating its IDs (real risk of ID
	   collisions and split state), it gets the exact same bottom-sheet
	   treatment as every other panel, toggled by the same
	   ps-mobile-sheet-open class via the new Background tab. Desktop's
	   version is completely unaffected, since none of this applies
	   outside this media query. */
	#ps-color-swatches {
		position: fixed;
		left: 0; right: 0; bottom: 0;
		width: auto;
		max-height: 55vh;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		overflow-y: auto;
		border-radius: var(--ps-m-radius) var(--ps-m-radius) 0 0;
		box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
		padding: var(--ps-m-pad);
		transform: translateY(100%);
		transition: transform 0.22s ease;
		z-index: 600;
		background: #fff;
	}
	/* Only forced visible once actually opened — admin has no tab that
	   can ever add this class, so admin's own display:none (set
	   server-side, since this whole element isn't relevant to them)
	   is correctly left alone rather than being overridden. */
	#ps-color-swatches.ps-mobile-sheet-open { display: flex !important; transform: translateY(0); }

	/* ---- Each tab's content becomes a sheet sliding up from the
	   bottom, not a permanently-visible side column. ---- */
	.ps-left-panel {
		position: fixed;
		left: 0; right: 0; bottom: 0;
		width: auto;
		max-height: 55vh;
		border-right: none;
		border-radius: var(--ps-m-radius) var(--ps-m-radius) 0 0;
		box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
		padding: 0;
		transform: translateY(100%);
		transition: transform 0.22s ease;
		z-index: 600;
		background: #fff;
	}
	.ps-left-panel.ps-mobile-sheet-open { transform: translateY(0); }
	.ps-mobile-sheet-drag { width: 100%; height: 18px; }
	.ps-mobile-sheet-drag::before { content: ''; display: block; width: 36px; height: 4px; border-radius: 2px; background: #ddd; margin: 10px auto 4px; }
	.ps-mobile-sheet-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		gap: var(--ps-m-gap);
		padding: 4px var(--ps-m-pad) var(--ps-m-pad);
		border-bottom: 1px solid #f0f0f0;
	}
	.ps-mobile-sheet-back {
		width: var(--ps-m-touch);
		height: var(--ps-m-touch);
		display: flex;
		align-items: center;
		justify-content: center;
		background: none;
		border: none;
		padding: 0;
		font-size: 26px;
		line-height: 1;
		color: #222 !important;
		position: relative;
		z-index: 2;
	}
	.ps-mobile-sheet-done {
		height: var(--ps-m-touch);
		padding: 0 14px;
		border: none;
		background: #333;
		color: #fff !important;
		border-radius: 999px;
		font-size: 13px;
		font-weight: 600;
	}
	.ps-mobile-sheet-title { font-size: 16px; font-weight: 700; color: #222 !important; margin: 0; }
	.ps-panel {
		display: flex;
		flex-direction: column;
		padding: var(--ps-m-pad) var(--ps-m-pad) calc(var(--ps-m-pad) + 8px);
		max-height: none;
		overflow-y: auto;
	}
	/* The sheet header above already shows the panel's title — this
	   in-panel heading (e.g. a second "Icons" or "Layers") would just
	   be a redundant repeat of it directly underneath. */
	.ps-panel-heading { display: none; }
	/* Matches the reference: the "+ Add Text" action sits below the
	   list of what's already on the card, not above it — done via
	   order rather than actually moving it in the markup, so desktop
	   (which never sees this rule at all) keeps its own layout
	   completely untouched. */
	#ps-add-text-btn { order: 2; margin-top: 10px; }
	#ps-text-fields-list { order: 1; }

	/* The card wasn't actually undersized — VistaPrint's own reference
	   has plenty of grey space around the card too, that's normal.
	   The real problem was the wrapper aligning content to the TOP
	   (flex-start, inherited from desktop) instead of centering it,
	   which is why the card sat off to one side with dead space below
	   rather than genuinely centered with breathing room on all sides. */
	.ps-canvas-wrap { justify-content: center; align-items: center; padding: 8% 6%; box-sizing: border-box; }

	/* ---- Floating mini toolbar on the selected object itself ----
	   Position (top/left) is set by JS, matching the same
	   coordinate-transform technique already used for the resize/
	   rotate badges — this only sets its fixed visual shape. */
	.ps-floating-obj-toolbar {
		display: none !important;
	}
	.ps-floating-obj-toolbar button {
		width: var(--ps-m-touch);
		height: var(--ps-m-touch);
		display: flex;
		align-items: center;
		justify-content: center;
		background: none;
		border: none;
		border-radius: 50%;
		color: #333 !important;
		padding: 0;
	}
	.ps-floating-obj-toolbar button:active { background: #f0f0f0; }
	.ps-floating-obj-divider { width: 1px; height: 22px; background: #e5e5e5; flex-shrink: 0; }

	/* ---- Contextual toolbar (font/color/etc.) becomes a second sheet
	   that SWAPS IN for the tab bar the instant something is selected
	   — same sheet treatment as the tab panels, not the old top
	   horizontal-scroll strip. ---- */
	.ps-contextual-toolbar {
		position: fixed;
		left: 0; right: 0; bottom: 0;
		flex-wrap: wrap;
		overflow-x: visible;
		overflow-y: auto;
		max-height: 72vh;
		border-radius: var(--ps-m-radius) var(--ps-m-radius) 0 0;
		border: none;
		box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
		margin-bottom: 0;
		padding: var(--ps-m-pad);
		padding-bottom: calc(var(--ps-m-pad) + env(safe-area-inset-bottom, 0));
		z-index: 550;
		gap: var(--ps-m-gap);
	}
	.ps-contextual-toolbar .ps-toolbar-group { flex-wrap: wrap; }
	.ps-contextual-toolbar button,
	.ps-contextual-toolbar .ps-color-box-btn,
	.ps-contextual-toolbar select {
		height: var(--ps-m-touch);
		min-width: var(--ps-m-touch);
		flex-shrink: 0;
		white-space: nowrap;
		padding-left: 12px;
		padding-right: 12px;
	}
	.ps-contextual-toolbar-scrollrow {
		display: flex;
		gap: var(--ps-m-gap);
		overflow-x: auto;
		width: 100%;
		padding-top: 6px;
		border-top: 1px solid #f0f0f0;
	}

	.ps-text-field-row { display: flex; align-items: center; gap: var(--ps-m-gap); height: var(--ps-m-touch); }
	.ps-text-field-row input { flex: 1 1 auto; height: 40px; }
	.ps-text-field-delete,
	.ps-uploaded-image-delete { width: var(--ps-m-touch); height: var(--ps-m-touch); }

	/* ---- More room for the actual card: the ruler isn't essential for
	   a quick phone edit, and the Safety Area/Bleed toggles were taking
	   a full row at full desktop size — both were pushing the actual
	   canvas down and making it feel cramped/zoomed-out before a
	   person even got to see their card. ---- */
	.ps-ruler-h, .ps-ruler-v { display: none; }
	.ps-badge { font-size: 11px; padding: 3px 8px; }

	/* Removed from mobile entirely — pinch-to-zoom is the mobile zoom
	   method, confirmed as sufficient. Still fully functional on
	   desktop; this only hides it on mobile. */
	#ps-zoom-bar { display: none; }

	/* ---- "More" menu ---- */
	#ps-float-more-menu {
		position: absolute;
		top: calc(100% + 6px);
		right: 0;
		background: #fff;
		border-radius: 12px;
		box-shadow: 0 2px 10px rgba(0,0,0,0.18);
		padding: 4px;
		min-width: 170px;
		z-index: 800;
	}
	#ps-float-more-menu button {
		display: flex;
		align-items: center;
		gap: 8px;
		width: 100%;
		height: 40px;
		padding: 0 10px;
		border: none;
		background: none;
		border-radius: 8px;
		font-size: 13px;
		color: #333 !important;
		white-space: nowrap;
	}
	#ps-float-more-menu button:active { background: #f0f0f0; }

	/* Tool sub-panels (Color/Adjust/Crop/Text Align/etc.) — previously
	   positioned a fixed distance below whatever button triggered them,
	   which put them off-screen or overlapping the sheet system once
	   that button lived inside a bottom sheet. Now stack as their own
	   proper bottom sheet instead, above the contextual toolbar. */
	.ps-image-sub-panel.ps-mobile-tool-sub-sheet,
	.ps-tool-sub-panel.ps-mobile-tool-sub-sheet {
		position: fixed !important;
		left: 0 !important; right: 0 !important; bottom: 0 !important;
		top: auto !important;
		width: auto;
		min-width: 0;
		max-height: 60vh;
		overflow-y: auto;
		border-radius: var(--ps-m-radius) var(--ps-m-radius) 0 0;
		border: none;
		box-shadow: 0 -4px 20px rgba(0,0,0,0.2);
		padding: 0 var(--ps-m-pad) calc(var(--ps-m-pad) + env(safe-area-inset-bottom, 0px));
	}
	.ps-image-sub-panel.ps-mobile-tool-sub-sheet .ps-mobile-sheet-header,
	.ps-tool-sub-panel.ps-mobile-tool-sub-sheet .ps-mobile-sheet-header {
		display: flex;
	}
	.ps-image-sub-panel.ps-mobile-tool-sub-sheet .ps-mobile-sheet-drag,
	.ps-tool-sub-panel.ps-mobile-tool-sub-sheet .ps-mobile-sheet-drag {
		display: block;
	}
	.ps-tool-sub-panel.ps-mobile-tool-sub-sheet label,
	.ps-image-sub-panel.ps-mobile-tool-sub-sheet label { font-size: 14px; }

	/* ============================================================
	   GALLERY PAGE (max-width: 600px) — this page never got the same
	   full-bleed treatment the Studio editor page already has, so the
	   whole page (not just the filter box) was constrained to whatever
	   width the theme's normal page template allows — on some themes,
	   as little as 50-60% of the actual screen.
	   ============================================================ */
	.ps-gallery {
		width: 100vw;
		margin-left: calc(-50vw + 50%);
		margin-right: calc(-50vw + 50%);
		padding-left: var(--ps-m-pad);
		padding-right: var(--ps-m-pad);
		box-sizing: border-box;
	}

	/* Filter as an on-demand drawer instead of an always-visible block
	   above the grid — on a phone, a permanently-shown search bar plus
	   checkboxes pushed every template down before anyone even started
	   browsing. */
	.ps-gallery-header { position: relative; }
	.ps-mobile-filter-toggle {
		display: flex;
		align-items: center;
		gap: 6px;
		height: var(--ps-m-touch);
		padding: 0 14px;
		border: 1px solid #ddd;
		border-radius: 999px;
		background: #fff;
		font-size: 13px;
		font-weight: 600;
		color: #333;
	}
	.ps-gallery-sidebar {
		position: fixed;
		left: 0; right: 0; bottom: 0;
		top: auto;
		width: auto;
		max-height: 75vh;
		overflow-y: auto;
		border-radius: var(--ps-m-radius) var(--ps-m-radius) 0 0;
		box-shadow: 0 -4px 20px rgba(0,0,0,0.2);
		transform: translateY(100%);
		transition: transform 0.22s ease;
		z-index: 600;
		padding: 0 var(--ps-m-pad) calc(var(--ps-m-pad) + env(safe-area-inset-bottom, 0px));
	}
	.ps-gallery-sidebar.ps-mobile-sheet-open { transform: translateY(0); }
	.ps-gallery-sidebar .ps-mobile-sheet-drag,
	.ps-gallery-sidebar .ps-mobile-sheet-header { display: flex; }
	.ps-gallery-sidebar .ps-mobile-sheet-drag { display: block; }
	/* The plain "Filter" heading is redundant once the drawer header
	   above it already shows the same title. */
	.ps-gallery-sidebar > h3 { display: none; }
}