/* Printdura – FPD Theme
 * Loaded by the Printdura Customizations plugin on product pages.
 * Scoped to .fpd-container and FPD's own --fpd-* variables.
 */

.fpd-container {
	--pd-orange: var(--pd-site-accent, #f15a24);
	--pd-orange-hover: #d94c1a;
	--pd-ink: #201515;
	--pd-muted: #6b625e;
	--pd-cream: #fbf9f6;
	--pd-mobile-shell: #fefdf9; /* iPhone status-area surface */
	--pd-line: var(--pd-designer-border, #ece7e2);
	--pd-line-strong: #d9cfc7;
	--pd-surface: #f4f0ec;      /* hover, sub-tab track, secondary buttons */
	--pd-orange-tint: #fdeee8;  /* selected / highlighted backgrounds */
	--pd-danger: #c62828;
	--pd-warn-bg: #fff4e5;
	--pd-warn-line: #f5c98b;
	--pd-warn-ink: #6b3d00;
	--pd-focus: 0 0 0 3px rgba(241, 90, 36, .15);

	--fpd-secondary-color: var(--pd-orange);
	--fpd-secondary-fg-color: #fff;
	--fpd-btn-primary-color: var(--pd-orange);
	--fpd-btn-primary-text-color: #fff;
	--fpd-actions-bar-bg-color: #fff;
	--fpd-mainbar-nav-color: var(--pd-ink);
	--fpd-module-secondary-color: var(--pd-surface); /* light surface: module tabs, upload zone, category tiles */
	--fpd-module-secondary-text-color: var(--pd-ink);
	--fpd-canvas-bg: var(--pd-cream);
	--fpd-border-radius: var(--pd-designer-radius, 10px);
	--fpd-border-color: var(--pd-line);
}

/* The phone's status area and Safari's lower chrome are lighter than the
   canvas. Match FPD's mobile bars to that surrounding shell. */
.fpd-container.fpd-layout-small {
	--fpd-actions-bar-bg-color: var(--pd-mobile-shell);
}
.fpd-container.fpd-layout-small fpd-actions-bar,
.fpd-container.fpd-sidebar.fpd-layout-small fpd-main-bar > .fpd-navigation {
	background: var(--pd-mobile-shell);
}
/* FPD expands this shared main bar behind every mobile tab. Its vendor
   background is white, so tinting only the navigation leaves open panels
   looking like a separate screen. */
.fpd-container.fpd-sidebar.fpd-layout-small > fpd-main-bar,
.fpd-container.fpd-sidebar.fpd-layout-small > fpd-main-bar > .fpd-module-content,
.fpd-container.fpd-sidebar.fpd-layout-small > fpd-main-bar > .fpd-secondary-content {
	background: var(--pd-mobile-shell);
}
/* The fullscreen sheet sits outside .fpd-container, so it does not inherit
   the panel color above. This is the white strip below the iPhone status bar. */
@media (max-width: 782px) {
	.fpd-modal-product-designer.fpd-fullscreen > .fpd-modal-inner {
		background: #fefdf9;
	}
}
/* Product options and the Saved form draw their own opaque white surfaces. */
.fpd-container.fpd-layout-small .pd-pick,
.fpd-container.fpd-layout-small fpd-module-save-load .fpd-save-design {
	background: var(--pd-mobile-shell);
}
.fpd-container.fpd-sidebar.fpd-layout-small fpd-main-bar > .fpd-navigation {
	border-top-color: var(--pd-line);
}
body.fpd-modal-mode-active,
html:has(body.fpd-modal-mode-active) {
	background-color: #fefdf9;
}

/* ---------- Top bar: light, matches the storefront ---------- */
.fpd-container fpd-actions-bar {
	background: var(--fpd-actions-bar-bg-color);
	color: var(--pd-ink);
	border-bottom: 1px solid var(--pd-line);
	font-size: 13px;
}
.fpd-container fpd-actions-bar .fpd-btn,
.fpd-container fpd-actions-bar fpd-actions-menu,
.fpd-container fpd-actions-bar [class^="fpd-icon"],
.fpd-container fpd-actions-bar [class*=" fpd-icon"] {
	color: var(--pd-ink);
}
.fpd-container fpd-actions-bar .fpd-uncollapsed-menu > .fpd-btn,
.fpd-container fpd-actions-bar [data-pos="modal"] > .fpd-close:not(.fpd-done) {
	min-width: 36px;
	min-height: 36px;
	border-radius: 8px;
	transition: background-color .15s ease;
}
.fpd-container fpd-actions-bar [data-pos="modal"] > .fpd-close:not(.fpd-done) {
	width: 36px;
	height: 36px;
	padding: 0;
	margin-left: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	background: transparent;
}
.fpd-container fpd-actions-bar .fpd-uncollapsed-menu > .fpd-btn:hover,
.fpd-container fpd-actions-bar [data-pos="modal"] > .fpd-close:not(.fpd-done):hover {
	background: var(--pd-surface);
}

/* Done: the primary action – solid orange and always labeled */
.fpd-container .fpd-done {
	background: var(--pd-orange) !important;
	color: #fff !important;
	min-height: 36px;
	padding: 0 13px;
	border-radius: 9px;
	font-size: 14px;
	font-weight: 600;
	gap: 6px;
	display: inline-flex !important;
	align-items: center;
	line-height: 1;
}
.fpd-container .fpd-done:hover {
	background: var(--pd-orange-hover) !important;
}
.fpd-container .fpd-done .fpd-label,
.fpd-container .fpd-done .fpd-total-price,
.fpd-container .fpd-done i {
	color: #fff !important;
	display: inline !important;
}
.fpd-container .fpd-done .fpd-total-price {
	font-weight: 500;
	opacity: .9;
}
.fpd-container .fpd-done .fpd-total-price::before {
	content: "·";
	margin-right: 6px;
}

/* ---------- Side nav ---------- */
.fpd-container fpd-main-bar .fpd-navigation {
	border-right: 1px solid var(--pd-line);
}
.fpd-container fpd-main-bar .fpd-nav-item {
	border-radius: var(--fpd-border-radius);
	margin: 4px 6px;
	color: var(--pd-muted);
	transition: background-color .15s ease, color .15s ease;
}
@media (hover: hover) {
	.fpd-container fpd-main-bar .fpd-nav-item:not(.fpd-active):hover {
		color: var(--pd-ink);
		background: var(--pd-surface);
	}
}
.fpd-container fpd-main-bar .fpd-nav-item.fpd-active {
	color: var(--pd-orange);
	background: var(--pd-orange-tint);
}
.fpd-container fpd-main-bar .fpd-nav-item .fpd-label {
	font-size: 12px;
	font-weight: 500;
}

/* ---------- Buttons inside panels: sentence case, site sizing ---------- */
.fpd-container fpd-main-bar .fpd-btn,
.fpd-container fpd-module-uploads .fpd-upload-image .fpd-btn {
	text-transform: none;
	letter-spacing: 0;
	font-size: 13px;
	font-weight: 600;
	min-height: 38px;
	padding: 0 16px;
	border-radius: var(--fpd-border-radius);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--pd-orange);
	color: #fff;
}
.fpd-container fpd-main-bar .fpd-btn:hover {
	background: var(--pd-orange-hover);
}

/* Inputs in panels (save title, search) */
.fpd-container fpd-main-bar input[type="text"],
.fpd-container fpd-main-bar input[type="search"] {
	min-height: 44px;
	border: 1px solid var(--pd-line);
	border-radius: var(--fpd-border-radius);
	padding: 0 12px;
	font-size: 15px;
	box-shadow: none;
}
.fpd-container fpd-main-bar input[type="text"]:focus,
.fpd-container fpd-main-bar input[type="search"]:focus {
	outline: none;
	border-color: var(--pd-orange);
	box-shadow: var(--pd-focus);
}

/* Keyboard focus ring for everything made focusable by the UX snippet */
.fpd-container [tabindex="0"]:focus-visible,
.fpd-container .fpd-btn:focus-visible {
	outline: 2px solid var(--pd-orange);
	outline-offset: 2px;
}

/* ---------- Empty-canvas prompt + resolution notice (added by the UX JS snippet) ---------- */
.fpd-container .pd-fpd-empty {
	position: absolute;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	z-index: 5;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: max-content;
	max-width: calc(100% - 32px);
	pointer-events: none;
}
.fpd-container .pd-fpd-empty[hidden],
.fpd-container .pd-fpd-notice[hidden] {
	display: none;
}
.fpd-container .pd-fpd-empty__btn {
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 22px;
	border: 0;
	border-radius: 999px;
	background: var(--pd-orange);
	color: #fff;
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(32, 21, 21, .18);
	transition: background-color .15s ease, transform .15s ease;
}
.fpd-container .pd-fpd-empty__btn:hover {
	background: var(--pd-orange-hover);
	transform: translateY(-1px);
}
.fpd-container .pd-fpd-empty__btn:focus-visible {
	outline: 2px solid var(--pd-ink);
	outline-offset: 3px;
}
.fpd-container .pd-fpd-empty__hint {
	margin: 0;
	padding: 4px 10px;
	border-radius: 8px;
	background: rgba(255, 255, 255, .92);
	color: var(--pd-muted);
	font-size: 12px;
	line-height: 1.4;
	text-align: center;
	white-space: normal;
}
.fpd-container .pd-fpd-empty__hint:empty {
	display: none;
}
.fpd-container .pd-fpd-notice {
	position: absolute;
	left: 50%;
	top: 6px;
	transform: translateX(-50%);
	z-index: 6;
	width: max-content;
	max-width: min(420px, calc(100% - 24px));
	padding: 10px 14px;
	border-radius: var(--fpd-border-radius);
	background: var(--pd-warn-bg);
	border: 1px solid var(--pd-warn-line);
	color: var(--pd-warn-ink);
	font-size: 13px;
	line-height: 1.45;
	white-space: normal;
	box-shadow: 0 4px 14px rgba(32, 21, 21, .12);
	display: flex;
	align-items: flex-start;
	gap: 10px;
}
.fpd-container .pd-fpd-notice__text { flex: 1 1 auto; }
.fpd-container .pd-fpd-notice__close {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin: -2px -4px 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--pd-warn-ink);
	font: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 20px;
	cursor: pointer;
}
.fpd-container .pd-fpd-notice__close:hover { background: rgba(120, 72, 0, .1); }
.fpd-container .pd-fpd-notice__close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* ---------- Shared panel styles (Images, Pixabay, QR code, Designs) ---------- */
/* One look for every FPD panel: same search field, tabs and square tiles as the Saved tab. */

/* Sub-tabs (Upload / Pixabay / QR code): segmented control */
.fpd-container .fpd-module-tabs {
	gap: 3px;
	margin: 10px 16px 4px;
	padding: 3px;
	border-radius: 10px;
	background: var(--pd-surface);
}
.fpd-container .fpd-module-tabs > div {
	min-height: 34px;
	border-radius: 8px;
	color: var(--pd-muted);
	background: transparent;
	transition: background-color .15s ease, color .15s ease;
}
.fpd-container .fpd-module-tabs > div.fpd-active {
	background: #fff;
	color: var(--pd-orange);
	box-shadow: 0 1px 3px rgba(32, 21, 21, .12);
}

/* Search field (Designs, Pixabay) with optional back button for design categories */
.fpd-container .fpd-head {
	padding: 12px 16px 4px;
}
.fpd-container .fpd-input-back-search {
	display: flex;
	align-items: center;
	gap: 8px;
}
.fpd-container .fpd-input-back-search .fpd-back {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	min-height: 44px;
	padding: 0;
	border-radius: var(--fpd-border-radius);
	background: var(--pd-surface);
	color: var(--pd-ink);
	align-items: center;
	justify-content: center;
}
.fpd-container .fpd-input-search {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}
.fpd-container .fpd-input-search input[type="text"] {
	width: 100%;
	min-height: 44px;
	padding: 0 12px 0 40px !important; /* WPCode 5878 forces 10px !important on every text input site-wide */
	border: 1px solid var(--pd-line);
	border-radius: var(--fpd-border-radius);
	background: #fff;
	color: var(--pd-ink);
	font-size: 15px;
	box-shadow: none;
}
.fpd-container .fpd-input-search input[type="text"]:focus {
	outline: none;
	border-color: var(--pd-orange);
	box-shadow: var(--pd-focus);
}
.fpd-container .fpd-input-search .fpd-icon-magnify {
	position: absolute;
	left: 13px;
	top: 50%;
	width: 16px;
	height: 16px;
	transform: translateY(-50%);
	background: var(--pd-muted);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
	pointer-events: none;
}
.fpd-container .fpd-input-search .fpd-icon-magnify::before {
	content: none;
}

/* Tile grids: two per row, square cards */
.fpd-container fpd-module-uploads .fpd-grid,
.fpd-container fpd-module-pixabay-images .fpd-grid,
.fpd-container fpd-module-designs .fpd-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: auto !important; /* FPD fixes rows at 100px */
	gap: 12px;
	align-items: start;
	padding: 12px 16px 16px;
}
/* FPD's gallery rules can reapply a smaller gap after the shared grid rule. */
.fpd-container fpd-module-uploads .fpd-photo-grid {
	gap: 12px !important;
}
.fpd-container fpd-module-uploads .fpd-grid > .fpd-item,
.fpd-container fpd-module-pixabay-images .fpd-grid > .fpd-item,
.fpd-container fpd-module-designs .fpd-grid > .fpd-item {
	position: relative;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: 6px;
	text-align: left;
	background: none;
	border: 0;
	cursor: pointer;
}
.fpd-container fpd-module-uploads .fpd-grid > .fpd-item > picture,
.fpd-container fpd-module-pixabay-images .fpd-grid > .fpd-item > picture,
.fpd-container fpd-module-designs .fpd-grid > .fpd-item > picture {
	display: block;
	width: 100%;
	max-width: 112px;
	height: auto;
	aspect-ratio: 1 / 1;
	margin: 0 auto;
	border: 1px solid var(--pd-line);
	border-radius: var(--fpd-border-radius);
	background-color: var(--pd-cream);
	background-position: center;
	background-repeat: no-repeat;
	transition: border-color .15s ease, box-shadow .15s ease;
}
/* Photo cells fill their grid columns; the previous 112px cap created the
   large apparent gap on both desktop and mobile. */
.fpd-container fpd-module-uploads .fpd-photo-grid > .fpd-item > picture {
	box-sizing: border-box;
	max-width: none;
	margin: 0;
}
/* Photos fill their tile; designs and clipart are shown whole with breathing room */
.fpd-container fpd-module-uploads .fpd-grid > .fpd-item > picture,
.fpd-container fpd-module-pixabay-images .fpd-grid > .fpd-item > picture {
	background-size: cover;
}
.fpd-container fpd-module-designs .fpd-grid > .fpd-item > picture {
	padding: 12%;
	background-size: contain;
	background-origin: content-box;
	background-color: #fff;
}
.fpd-container fpd-module-uploads .fpd-grid > .fpd-item:hover > picture,
.fpd-container fpd-module-pixabay-images .fpd-grid > .fpd-item:hover > picture,
.fpd-container fpd-module-designs .fpd-grid > .fpd-item:hover > picture,
.fpd-container fpd-module-uploads .fpd-grid > .fpd-item:focus-visible > picture,
.fpd-container fpd-module-pixabay-images .fpd-grid > .fpd-item:focus-visible > picture,
.fpd-container fpd-module-designs .fpd-grid > .fpd-item:focus-visible > picture {
	border-color: var(--pd-orange);
	box-shadow: 0 0 0 3px rgba(241, 90, 36, .12);
}
/* Design names (from FPD's design titles); photos have no visible name */
.fpd-container fpd-module-designs .fpd-grid > .fpd-item[data-title]::after {
	content: attr(data-title);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	padding: 0 2px;
	color: var(--pd-ink);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.35;
	word-break: break-word;
}
/* Design categories: same tile, name always visible */
.fpd-container fpd-module-designs .fpd-grid > .fpd-category {
	color: var(--pd-ink);
	font-size: 13px;
	font-weight: 600;
}
/* QR code form */
.fpd-container fpd-module-qr-code > div {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
}
.fpd-container fpd-module-qr-code input[type="text"] {
	width: 100%;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--pd-line);
	border-radius: var(--fpd-border-radius);
	font-size: 15px;
	box-shadow: none;
}
.fpd-container fpd-module-qr-code input[type="text"]:focus {
	outline: none;
	border-color: var(--pd-orange);
	box-shadow: var(--pd-focus);
}
.fpd-container fpd-module-qr-code .fpd-qr-code-colors {
	display: flex;
	gap: 8px;
}
.fpd-container fpd-module-qr-code .fpd-qr-code-colors > div {
	width: 44px;
	height: 44px;
	border: 1px solid var(--pd-line);
	border-radius: var(--fpd-border-radius);
	cursor: pointer;
}
.fpd-container fpd-module-qr-code .fpd-btn {
	width: 100%;
	min-height: 44px;
	border-radius: var(--fpd-border-radius);
	text-transform: none;
	font-size: 15px;
	font-weight: 600;
	background: var(--pd-orange);
	color: #fff;
	justify-content: center;
}

/* Native flex children must shrink beside the navigation rail. */
.fpd-container.fpd-sidebar > fpd-main-bar > .fpd-module-content {
	min-width: 0;
}

/* ---------- Saved designs panel ---------- */
/* Keep the save action beside its context, followed by the saved library.
 * One scroll container prevents a tall empty grid and a clipped fixed footer. */
.fpd-container fpd-module-save-load {
	overflow-y: auto;
	overflow-x: hidden;
}
.fpd-container fpd-module-save-load > div {
	display: flex;
	flex-direction: column;
	height: auto;
	min-height: 0;
	min-width: 0;
	width: 100%;
	box-sizing: border-box;
}
.fpd-container fpd-module-save-load .fpd-saved-designs {
	order: 2;
	flex: 0 0 auto;
	min-height: 0;
	min-width: 0;
	width: 100%;
	height: auto;
	overflow: visible;
	box-sizing: border-box;
	padding: 16px;
}
.fpd-container fpd-module-save-load .fpd-save-design {
	order: 1;
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
	width: 100%;
	box-sizing: border-box;
	padding: 12px 16px 16px;
	border-top: 0;
	border-bottom: 1px solid var(--pd-line);
	background: #fff;
}
.fpd-container fpd-module-save-load .fpd-save-design input[type="text"],
.fpd-container fpd-module-save-load .fpd-save-design .fpd-btn {
	box-sizing: border-box;
	min-width: 0;
	max-width: 100%;
	width: 100%;
	margin: 0;
}

/* Grid: two designs per row */
.fpd-container fpd-module-save-load .fpd-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: auto !important; /* FPD fixes rows at 100px, which overlapped the tiles */
	gap: 16px 12px;
	align-items: start;
}
.fpd-container fpd-module-save-load .fpd-grid > .fpd-item {
	position: relative;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: 6px;
	text-align: left;
	cursor: pointer;
	background: none;
	border: 0;
}
/* Thumbnail: FPD saves square previews, so show them square and whole */
.fpd-container fpd-module-save-load .fpd-grid > .fpd-item picture {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	margin: 0;
	border: 1px solid var(--pd-line);
	border-radius: var(--fpd-border-radius);
	background-color: var(--pd-cream);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.fpd-container fpd-module-save-load .fpd-grid > .fpd-item:hover picture,
.fpd-container fpd-module-save-load .fpd-grid > .fpd-item:focus-visible picture {
	border-color: var(--pd-orange);
	box-shadow: 0 0 0 3px rgba(241, 90, 36, .12);
}
/* Name under each design, from the title the customer typed */
.fpd-container fpd-module-save-load .fpd-grid > .fpd-item::after {
	content: attr(data-title);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	padding: 0 2px;
	color: var(--pd-ink);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.35;
	word-break: break-word;
}
.fpd-container fpd-module-save-load .fpd-grid > .fpd-item[data-title=""]::after,
.fpd-container fpd-module-save-load .fpd-grid > .fpd-item:not([data-title])::after {
	content: "Untitled design";
	color: var(--pd-muted);
	font-weight: 400;
}
/* Delete: small round button on the thumbnail corner */
.fpd-container fpd-module-save-load .fpd-grid > .fpd-item .fpd-delete {
	position: absolute;
	top: 6px;
	right: 6px;
	z-index: 1;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, .95);
	color: var(--pd-ink);
	font-size: 14px;
	box-shadow: 0 1px 4px rgba(32, 21, 21, .18);
	opacity: 1;
	transition: background-color .15s ease, color .15s ease;
}
.fpd-container fpd-module-save-load .fpd-grid > .fpd-item .fpd-delete:hover {
	background: var(--pd-danger);
	color: #fff;
}
/* Empty state */
.fpd-container fpd-module-save-load .fpd-grid:empty {
	display: block;
}
.fpd-container fpd-module-save-load .fpd-grid:empty::before {
	content: "No saved designs yet. Give your design a name below and tap Save design to keep it for later.";
	display: block;
	padding: 32px 12px;
	color: var(--pd-muted);
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
}

/* ---------- "You're saving" preview (added by the UX JS snippet) ---------- */
.fpd-container .pd-save-preview {
	box-sizing: border-box;
	min-width: 0;
	width: 100%;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px;
	border: 1px solid var(--pd-line);
	border-radius: 12px;
	background: var(--pd-cream);
}
.fpd-container .pd-save-preview__thumb {
	flex: 0 0 72px;
	width: 72px;
	height: 72px;
	padding: 4px;
	border-radius: 8px;
	background: #fff;
	border: 1px solid var(--pd-line);
	overflow: hidden;
}
.fpd-container .pd-save-preview__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.fpd-container .pd-save-preview__text {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	min-width: 0;
	gap: 2px;
	line-height: 1.3;
}
.fpd-container .pd-save-preview__label {
	color: var(--pd-muted);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .02em;
	text-transform: uppercase;
}
.fpd-container .pd-save-preview__name {
	color: var(--pd-ink);
	font-size: 14px;
	font-weight: 600;
	white-space: normal;
	overflow-wrap: anywhere;
}
.fpd-container .pd-save-preview__meta {
	color: var(--pd-muted);
	font-size: 13px;
}
.fpd-container .pd-save-preview__meta:empty {
	display: none;
}

/* ---------- Save pop-up (top-bar save icon) ---------- */
/* FPD's WordPress add-on only fills the side panel's list, so the pop-up is a focused "Save your design" dialog. */
.fpd-container.pd-save-modal .fpd-modal-inner {
	width: min(420px, calc(100% - 32px));
	max-width: 420px;
	height: auto;
	max-height: calc(100% - 32px);
	padding: 20px;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 20px 50px rgba(32, 21, 21, .25);
}
.fpd-container.pd-save-modal .fpd-modal-close {
	top: 12px;
	right: 12px;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--pd-ink);
	cursor: pointer;
}
.fpd-container.pd-save-modal .fpd-modal-close:hover {
	background: var(--pd-surface);
}
.fpd-container.pd-save-modal .fpd-modal-content {
	padding: 0;
	overflow: visible;
	text-align: left;
}
.fpd-container.pd-save-modal fpd-module-save-load .fpd-saved-designs {
	display: none;
}
.fpd-container.pd-save-modal fpd-module-save-load .fpd-save-design {
	padding: 0;
	border-top: 0;
	gap: 12px;
}
.fpd-container.pd-save-modal fpd-module-save-load .fpd-save-design::before {
	content: "Save your design";
	padding-right: 40px;
	color: var(--pd-ink);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
}
.fpd-container.pd-save-modal fpd-module-save-load .fpd-save-design .fpd-btn {
	text-transform: none;
	letter-spacing: 0;
	font-size: 15px;
	font-weight: 600;
	min-height: 44px;
	border-radius: var(--fpd-border-radius);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--pd-orange);
	color: #fff;
}
.fpd-container.pd-save-modal fpd-module-save-load .fpd-save-design .fpd-btn:hover {
	background: var(--pd-orange-hover);
}
.fpd-container.pd-save-modal fpd-module-save-load .fpd-save-design input[type="text"] {
	min-height: 44px;
	border: 1px solid var(--pd-line);
	border-radius: var(--fpd-border-radius);
	padding: 0 12px;
	font-size: 15px;
	box-shadow: none;
}
.fpd-container.pd-save-modal fpd-module-save-load .fpd-save-design input[type="text"]:focus {
	outline: none;
	border-color: var(--pd-orange);
	box-shadow: var(--pd-focus);
}

/* ---------- Small layout (FPD adds .fpd-layout-small by container width) ---------- */
/* FPD absolutely-positions the centre toolbar, so on phones it slid under the File menu.
   Put every slot back into normal flex flow instead. */
.fpd-container.fpd-layout-small fpd-actions-bar {
	gap: 0;
	padding: 0 4px;
}
.fpd-container.fpd-layout-small fpd-actions-bar > div {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}
.fpd-container.fpd-layout-small fpd-actions-bar > [data-pos="center"] {
	flex: 1 1 auto;
	justify-content: center;
}
.fpd-container.fpd-layout-small fpd-actions-bar fpd-actions-menu > div {
	position: static;
	transform: none;
}
/* Empty "More" slot */
.fpd-container.fpd-layout-small fpd-actions-bar > [data-pos="right"]:has(.fpd-uncollapsed-menu:empty) {
	display: none;
}
.fpd-container.fpd-layout-small fpd-actions-bar .fpd-uncollapsed-menu > .fpd-btn,
.fpd-container.fpd-layout-small fpd-actions-bar [data-pos="modal"] > .fpd-close:not(.fpd-done) {
	min-width: 38px;
	min-height: 44px;
	padding: 0 8px;
	margin: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
/* Download is already in the File menu – drop the duplicate to make room */
.fpd-container.fpd-layout-small fpd-actions-bar > [data-pos="center"] .fpd-btn[data-action="download"] {
	display: none;
}
.fpd-container.fpd-layout-small fpd-actions-bar .fpd-dropdown-btn {
	min-height: 44px;
	padding: 0 8px;
	margin: 0;
	display: inline-flex;
	align-items: center;
}
.fpd-container.fpd-layout-small fpd-actions-bar > [data-pos="modal"] {
	padding: 0;
	gap: 2px;
}
.fpd-container.fpd-layout-small fpd-actions-bar [data-pos="modal"] > .fpd-btn.fpd-done {
	padding: 0 12px;
	min-height: 36px;
	font-size: 15px;
	gap: 4px;
}
.fpd-container.fpd-layout-small fpd-actions-bar [data-pos="modal"] > .fpd-btn.fpd-done .fpd-total-price {
	font-size: 14px;
}
/* FPD hides the "Done" word on phones; bring it back while there is room */
.fpd-container.fpd-layout-small fpd-actions-bar [data-pos="modal"] > .fpd-btn.fpd-done .fpd-label {
	display: inline !important;
}
.fpd-container.fpd-layout-small fpd-actions-bar [data-pos="modal"] > .fpd-btn.fpd-done i {
	display: none !important;
}
.fpd-container.fpd-layout-small fpd-main-bar .fpd-nav-item {
	margin: 4px 2px;
}
@media (max-width: 359px) {
	.fpd-container.fpd-layout-small fpd-actions-bar [data-pos="modal"] > .fpd-btn.fpd-done .fpd-label,
	.fpd-container.fpd-layout-small .fpd-done .fpd-total-price::before {
		display: none !important;
	}
}

/* ---------- Photo/text editing toolbar (FPD appends <fpd-element-toolbar> to <body>) ---------- */
/* Phones: share the width evenly so every tool (incl. Remove) is visible without sideways scrolling. */
fpd-element-toolbar.fpd-layout-small .fpd-tools-nav > .fpd-primary-tools:empty,
fpd-element-toolbar.fpd-layout-small .fpd-tools-nav > .fpd-primary-tools:not(:has(> div:not(.fpd-hidden))) {
	display: none;
}
fpd-element-toolbar.fpd-layout-small .fpd-tools-nav {
	flex: 1 1 100%;
	width: 100%;
}
fpd-element-toolbar.fpd-layout-small .fpd-tools-nav > .fpd-secondary-tools {
	flex: 1 1 auto;
	min-width: 0;
}
fpd-element-toolbar.fpd-layout-small .fpd-tools-nav > div > div:not(.fpd-hidden) {
	flex: 1 1 0;
	min-width: 0;
	padding: 0 2px;
}
fpd-element-toolbar.fpd-layout-small .fpd-tools-nav .fpd-label {
	max-width: 100%;
	white-space: normal;
	line-height: 1.15;
	text-align: center;
}

/* ---------- Logged-in admins: keep the designer below the WordPress admin bar ---------- */
body.admin-bar .fpd-modal-product-designer.fpd-fullscreen {
	top: 32px !important;
	bottom: 0 !important;
	height: auto !important;
}
@media screen and (max-width: 782px) {
	body.admin-bar .fpd-modal-product-designer.fpd-fullscreen {
		top: 46px !important;
	}
}