.ppw-product-form {
	max-width: 600px;
	font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: 14px;
	padding: 24px;
	box-shadow: 0 4px 24px rgba(0,0,0,.06);
	margin-bottom: 24px;
}

.ppw-field { margin-bottom: 20px; }
.ppw-field label { display: block; font-weight: 600; margin-bottom: 8px; color: #1d2327; font-size: 14.5px; }
.ppw-field input[type="number"], .ppw-field input[type="file"] {
	width: 100%;
	padding: 11px 12px;
	box-sizing: border-box;
	border: 1.5px solid #e0e0e0;
	border-radius: 10px;
	font-size: 15px;
}

.ppw-option-group { display: flex; flex-wrap: wrap; gap: 10px; }
.ppw-option {
	border: 1.5px solid #e0e0e0;
	border-radius: 12px;
	padding: 10px 16px;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14.5px;
}
.ppw-option:hover { border-color: #2271b1; background: #f5f9fc; }
.ppw-option.has-image img { height: var(--ppw-img-size, 44px); width: var(--ppw-img-size, 44px); object-fit: cover; border-radius: 8px; }
.ppw-opt-price { color: #2271b1; font-size: 12.5px; }

.ppw-block-notice {
	background: #fdeaea;
	border: 1px solid #e0837f;
	border-radius: 10px;
	padding: 10px 14px;
	font-size: 13px;
	color: #8a1f1f;
	margin-top: 10px;
	font-weight: 600;
}

.ppw-min-order-notice {
	background: #fff8e5;
	border: 1px solid #f0c33c;
	border-radius: 10px;
	padding: 10px 14px;
	font-size: 13px;
	color: #6b5400;
	margin-bottom: 18px;
}

.ppw-file-status { font-size: 13px; color: #2271b1; min-height: 18px; margin-top: 6px; }

.ppw-preview-toggle-btn {
	border: 1.5px solid #2271b1;
	background: #fff;
	color: #2271b1;
	border-radius: 8px;
	padding: 6px 12px;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
}
.ppw-preview-toggle-btn:hover { background: #f0f7fc; }
.ppw-pdf-preview-mount:empty { display: none; }

.ppw-pdf-preview-wrap {
	margin-top: 12px;
	border: 1.5px solid #e0e0e0;
	border-radius: 12px;
	overflow: hidden;
	background: #f5f5f5;
}
.ppw-pdf-preview-toolbar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	background: #fff;
	border-bottom: 1px solid #e0e0e0;
	font-size: 13px;
}
.ppw-pdf-preview-toolbar button {
	border: 1px solid #d5d5d5;
	background: #fff;
	border-radius: 6px;
	width: 28px;
	height: 28px;
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
}
.ppw-preview-zoom-reset { width: auto !important; padding: 0 8px; }
.ppw-preview-page-indicator { color: #444; }
.ppw-preview-zoom-controls { margin-left: auto; display: flex; gap: 4px; }
.ppw-pdf-preview-canvas-wrap {
	max-height: 480px;
	max-width: 100%;
	overflow: auto;
	display: flex;
	justify-content: center;
	padding: 14px;
	box-sizing: border-box;
	min-width: 0;
}
.ppw-pdf-preview-frame {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	max-width: 100%;
	min-width: 0;
	position: relative;
}
.ppw-pdf-preview-frame.ppw-pdf-frame-active {
	background: #ddd;
	border-radius: 4px;
	padding: 12px;
}
.ppw-pdf-preview-canvas, .ppw-pdf-preview-canvas2 {
	box-shadow: 0 2px 10px rgba(0,0,0,0.15);
	max-width: 100%;
	max-height: 450px;
	min-width: 0;
	height: auto;
	flex: 1 1 0%;
	display: block;
}

/* ---- Phase 3: Binding / Hole-Punch overlay (cosmetic only) ---- */
.ppw-preview-binding-overlay {
	position: absolute;
	top: 4px;
	bottom: 4px;
	left: -10px;
	width: 16px;
	pointer-events: none;
	z-index: 2;
}
.ppw-preview-binding-overlay.ppw-binding-spread {
	left: 50%;
	transform: translateX(-50%);
}
.ppw-binding-spiral {
	background-image: repeating-linear-gradient(180deg, #888 0 4px, transparent 4px 14px);
	border-radius: 8px;
	opacity: 0.85;
}
.ppw-binding-holes {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
}
.ppw-binding-hole {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #fff;
	border: 1.5px solid #999;
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.35);
}
.ppw-binding-staple {
	top: 4px;
	bottom: auto;
	height: 20px;
	left: 4px;
}
.ppw-binding-staple.ppw-binding-spread { left: 50%; transform: translateX(-50%); }
.ppw-staple-icon { font-size: 15px; transform: rotate(90deg); display: inline-block; }

/* Custom uploaded overlay image — a small badge that sticks to the top-left
   corner (or the spine, in spread mode), instead of the full-height edge
   strip used for the auto-drawn spiral/holes graphics. */
.ppw-preview-binding-overlay.ppw-binding-custom-image {
	top: -8px;
	bottom: auto;
	left: -8px;
	width: 52px;
	height: 52px;
}
.ppw-preview-binding-overlay.ppw-binding-custom-image.ppw-binding-spread {
	left: 50%;
	top: -8px;
	transform: translateX(-50%);
}
.ppw-preview-binding-overlay.ppw-binding-custom-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 1px 3px rgba(0,0,0,0.3));
}

.ppw-add-status { font-size: 13px; color: #b32d2e; margin-top: 8px; }

.ppw-price-box {
	background: linear-gradient(135deg, #f0f6fb, #f7fafc);
	border: 1px solid #dbe8f1;
	border-radius: 12px;
	padding: 16px;
	margin: 20px 0;
	color: #1d2327;
}
.ppw-breakdown { font-size: 13px; color: #555; margin-bottom: 8px; }
.ppw-breakdown-line { padding: 2px 0; border-bottom: 1px dashed #dbe8f1; }
.ppw-breakdown-line:last-child { border-bottom: none; }
.ppw-total-line { font-size: 19px; font-weight: 600; text-align: center; padding-top: 8px; }

.ppw-add-to-cart-btn {
	width: 100%;
	padding: 14px;
	background: #2271b1;
	color: #fff;
	border: 0;
	border-radius: 10px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
}
.ppw-add-to-cart-btn:hover { background: #135e96; }
.ppw-add-to-cart-btn:disabled { opacity: .6; cursor: default; }

.ppw-calculate-btn {
	width: 100%;
	margin-top: 10px;
	padding: 12px;
	background: #2271b1;
	color: #fff;
	border: 0;
	border-radius: 10px;
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
}
.ppw-calculate-btn:hover { background: #135e96; }
.ppw-calculate-btn:disabled { opacity: .5; cursor: default; }
.ppw-expandable-section { margin-top: 6px; }

.ppw-bottom-message {
	margin-top: 16px;
	padding: 12px 14px;
	background: #f5f9fc;
	border: 1px dashed #c3d9e8;
	border-radius: 10px;
	font-size: 13px;
	color: #444;
	line-height: 1.5;
}

.ppw-top-message {
	background: #fff8e5;
	border: 1px solid #f0c33c;
	border-radius: 10px;
	padding: 10px 14px;
	font-size: 13px;
	color: #6b5400;
	margin-bottom: 18px;
	font-weight: 600;
}
.ppw-top-message-collapsible summary {
	cursor: pointer;
	list-style: none;
}
.ppw-top-message-collapsible summary::-webkit-details-marker { display: none; }
.ppw-top-message-collapsible summary::after { content: ' ▾'; }
.ppw-top-message-collapsible[open] summary::after { content: ' ▴'; }
.ppw-top-message-collapsible div { margin-top: 8px; font-weight: 400; }

.ppw-field select.ppw-priced-option {
	width: 100%;
	min-width: 210px;
	padding: 11px 36px 11px 12px !important;
	box-sizing: border-box;
	border: 1.5px solid #e0e0e0;
	border-radius: 10px;
	font-size: 15px;
	background-color: #fff !important;
	color: #222;
	cursor: pointer;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23555' d='M5.5 7.5l4.5 4.5 4.5-4.5z'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 10px center !important;
	background-size: 18px !important;
}
.ppw-field select.ppw-priced-option:focus {
	outline: none;
	border-color: #2271b1;
	box-shadow: 0 0 0 2px rgba(34,113,177,0.15);
}
.ppw-field select.ppw-priced-option::-ms-expand { display: none; }

.ppw-field textarea.ppw-instructions {
	width: 100%;
	padding: 8px 10px;
	box-sizing: border-box;
	border: 1.5px solid #e0e0e0;
	border-radius: 10px;
	font-size: 13.5px;
	font-family: inherit;
	resize: vertical;
	min-height: unset;
}

.ppw-multi-file-list { margin-top: 10px; }
.ppw-multi-file-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	border: 1.5px solid #e0e0e0;
	border-radius: 10px;
	padding: 8px 12px;
	margin-bottom: 6px;
	font-size: 13.5px;
}
.ppw-multi-file-row input[type="number"] {
	width: 160px;
	padding: 6px 8px;
	border: 1.5px solid #e0e0e0;
	border-radius: 8px;
}
.ppw-multi-remove {
	margin-left: auto;
	border: none;
	background: #dc2626;
	color: #fff;
	border-radius: 6px;
	width: 26px;
	height: 26px;
	cursor: pointer;
	font-size: 13px;
}
.ppw-multi-remove:hover { background: #b91c1c; }

.ppw-uploading-note { color: #2271b1; font-size: 13px; padding: 4px 0; }

.ppw-upload-more-btn { display: inline-block; }

.ppw-same-settings-toggle {
	padding: 10px 12px;
	background: #f5f9fc;
	border: 1px dashed #c3d9e8;
	border-radius: 10px;
	cursor: pointer;
}
.ppw-same-settings-toggle input { margin-right: 6px; }

.ppw-file-block-wrap {
	border: 1.5px solid #e0e0e0;
	border-radius: 12px;
	margin: 14px 0;
	overflow: hidden;
}
.ppw-file-block-wrap.ppw-file-block-expanded {
	border-color: #2271b1;
}
.ppw-file-block-header {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 10px 14px;
	background: #f5f9fc;
	font-size: 13.5px;
}
.ppw-file-block-name { font-weight: 600; }
.ppw-file-block-pages { color: #777; font-size: 12.5px; }
.ppw-file-block-manual-pages {
	width: 150px;
	padding: 5px 8px;
	border: 1.5px solid #e0e0e0;
	border-radius: 6px;
}
.ppw-file-block-actions { margin-left: auto; display: flex; gap: 6px; }
.ppw-change-setting-btn {
	font-size: 12.5px;
	padding: 5px 12px;
	border: 1.5px solid #7c3aed;
	background: #f5f0ff;
	color: #6d28d9;
	border-radius: 8px;
	font-weight: 600;
	cursor: pointer;
}
.ppw-change-setting-btn:hover { background: #ece1ff; }
.ppw-file-block-wrap.ppw-file-block-expanded .ppw-change-setting-btn {
	background: #7c3aed;
	color: #fff;
}
.ppw-remove-file-btn {
	border: none;
	background: #dc2626;
	color: #fff;
	border-radius: 6px;
	width: 28px;
	height: 28px;
	cursor: pointer;
	font-size: 13px;
}
.ppw-remove-file-btn:hover { background: #b91c1c; }
.ppw-file-block-wrap .ppw-options-block { padding: 14px; }

/* ---- Horizontal ("calculator") layout ---- */
/* !important + doubled-up selector: themes (WoodMart etc.) often set their
   own display/width rules on generic form/div elements with equal or higher
   specificity, which was silently overriding this layout. */
.ppw-product-form.ppw-layout-horizontal .ppw-dynamic-form,
.ppw-product-form.ppw-layout-horizontal .ppw-options-block {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 14px;
	align-items: flex-start;
	width: 100% !important;
}
.ppw-product-form.ppw-layout-horizontal .ppw-field {
	flex: 1 1 230px;
	min-width: 220px;
	width: auto !important;
}
.ppw-product-form.ppw-layout-horizontal .ppw-file-blocks,
.ppw-product-form.ppw-layout-horizontal .ppw-price-box,
.ppw-product-form.ppw-layout-horizontal .ppw-add-to-cart-btn,
.ppw-product-form.ppw-layout-horizontal .ppw-add-status,
.ppw-product-form.ppw-layout-horizontal .ppw-top-message,
.ppw-product-form.ppw-layout-horizontal .ppw-bottom-message,
.ppw-product-form.ppw-layout-horizontal .ppw-block-notice,
.ppw-product-form.ppw-layout-horizontal .ppw-min-order-notice,
.ppw-product-form.ppw-layout-horizontal .ppw-file-block-wrap {
	flex-basis: 100%;
	width: 100%;
}

/* ---- Split layout: options on the left, price/submit sticky on the right ---- */
.ppw-product-form.ppw-layout-split .ppw-dynamic-form {
	display: grid !important;
	grid-template-columns: 1fr 320px;
	gap: 24px;
	align-items: start;
}
/* The expandable-section wrapper (used by "collapsed/foldable" mode) would
   otherwise sit as one single grid item — display:contents makes its box
   disappear so its children slot into the grid columns below exactly as if
   they were direct children. The JS-controlled display:none for the
   collapsed state is an inline style, so it still wins over this and hides
   everything correctly when folded. */
.ppw-product-form.ppw-layout-split .ppw-expandable-section {
	display: contents;
}
.ppw-product-form.ppw-layout-split .ppw-field,
.ppw-product-form.ppw-layout-split .ppw-file-blocks {
	grid-column: 1;
}
.ppw-product-form.ppw-layout-split .ppw-top-message,
.ppw-product-form.ppw-layout-split .ppw-min-order-notice,
.ppw-product-form.ppw-layout-split .ppw-calculate-btn {
	grid-column: 1 / -1;
}
.ppw-product-form.ppw-layout-split .ppw-price-box,
.ppw-product-form.ppw-layout-split .ppw-add-to-cart-btn,
.ppw-product-form.ppw-layout-split .ppw-add-status,
.ppw-product-form.ppw-layout-split .ppw-bottom-message,
.ppw-product-form.ppw-layout-split .ppw-block-notice {
	grid-column: 2;
}
.ppw-product-form.ppw-layout-split .ppw-price-box {
	position: sticky;
	top: 16px;
}

/* ---- Mobile / responsive ---- */
@media (max-width: 640px) {
	.ppw-product-form { padding: 0 2px; }

	/* Horizontal ("calculator") layout only really works with room to breathe —
	   on phones it just falls back to the normal stacked layout so nothing
	   gets squeezed unreadably small. */
	.ppw-product-form.ppw-layout-horizontal .ppw-dynamic-form,
	.ppw-product-form.ppw-layout-horizontal .ppw-options-block {
		flex-direction: column !important;
	}
	.ppw-product-form.ppw-layout-horizontal .ppw-field { flex-basis: 100%; width: 100% !important; }

	/* Split layout: the 2-column grid becomes a normal single stacked column
	   on phones, price box moves back into the natural flow above the button
	   instead of staying pinned to a "sidebar" that no longer exists. */
	.ppw-product-form.ppw-layout-split .ppw-dynamic-form {
		grid-template-columns: 1fr !important;
	}
	.ppw-product-form.ppw-layout-split .ppw-price-box,
	.ppw-product-form.ppw-layout-split .ppw-add-to-cart-btn,
	.ppw-product-form.ppw-layout-split .ppw-add-status,
	.ppw-product-form.ppw-layout-split .ppw-bottom-message,
	.ppw-product-form.ppw-layout-split .ppw-block-notice {
		grid-column: 1;
	}
	.ppw-product-form.ppw-layout-split .ppw-price-box {
		position: static;
	}

	.ppw-option-group { gap: 8px; }
	.ppw-field label { font-size: 14px; }

	/* Preview toolbar: let it wrap onto two lines instead of squeezing/hiding controls */
	.ppw-pdf-preview-toolbar {
		flex-wrap: wrap;
		row-gap: 6px;
	}
	.ppw-preview-zoom-controls { margin-left: 0; width: 100%; justify-content: center; }
	.ppw-pdf-preview-canvas-wrap { max-height: 60vh; padding: 8px; }

	/* Double-Side spread: side-by-side pages get unreadably narrow on a phone,
	   so stack them instead — still both visible, just one above the other. */
	.ppw-pdf-preview-frame { flex-wrap: wrap; }
	.ppw-pdf-preview-canvas, .ppw-pdf-preview-canvas2 {
		flex-basis: 100%;
		max-height: 42vh;
	}
	.ppw-preview-binding-overlay.ppw-binding-spread {
		left: 0; right: 0; top: 50%; bottom: auto;
		width: auto; height: 12px;
		transform: translateY(-50%);
	}
	.ppw-binding-spiral.ppw-binding-spread {
		background-image: repeating-linear-gradient(90deg, #888 0 4px, transparent 4px 14px);
	}
	.ppw-binding-holes.ppw-binding-spread { flex-direction: row; }

	.ppw-file-block-header { gap: 6px; }
	.ppw-file-block-actions { width: 100%; margin-left: 0; justify-content: flex-end; }
	.ppw-multi-file-row { flex-direction: column; align-items: flex-start; }
	.ppw-multi-remove { margin-left: 0; align-self: flex-end; }

	.ppw-price-box { font-size: 13px; }
	.ppw-add-to-cart-btn { font-size: 15px; padding: 13px; }
}