/* ==========================================================================
   PC Builder — per-component card layout (thumbnail / qty / price / edit /
   delete row, plus a large icon tile to open the picker).
   ========================================================================== */

.pcb-builder,
.pcb-builder *,
.pcb-builder *::before,
.pcb-builder *::after {
	box-sizing: border-box;
}
.pcb-builder {
	--pcb-accent: #4f46e5;
	--pcb-accent-light: #eef2ff;
	--pcb-text: #1f2937;
	--pcb-text-muted: #6b7280;
	--pcb-border: #e2e2e2;
	--pcb-bg: #ffffff;
	--pcb-bg-subtle: #f9fafb;
	--pcb-danger: #dc2626;
	--pcb-danger-bg: #fef2f2;
	--pcb-success: #15803d;
	max-width: 640px;
	width: 100%;
	margin: 0 auto;
	font-family: inherit;
	color: var(--pcb-text);
}
.pcb-builder img {
	max-width: 100%;
	display: block;
}

/* ---- Groups -------------------------------------------------------- */
.pcb-group {
	margin-top: 30px;
}
.pcb-group:first-of-type {
	margin-top: 8px;
}
.pcb-group-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}
.pcb-group-title {
	margin: 0;
	font-size: 1.05em;
	font-weight: 700;
	letter-spacing: -0.01em;
}
.pcb-group-progress {
	font-size: 0.8em;
	color: var(--pcb-text-muted);
	font-weight: 600;
	background: var(--pcb-bg-subtle);
	border-radius: 999px;
	padding: 3px 10px;
}

/* ---- Per-component card -------------------------------------------- */
.pcb-slot-card {
	border: 1px solid var(--pcb-border);
	border-radius: 12px;
	background: var(--pcb-bg);
	padding: 18px 16px;
	margin-bottom: 18px;
}
.pcb-slot-title {
	font-size: 1.15em;
	font-weight: 700;
	margin-bottom: 6px;
}
.pcb-slot-name {
	font-size: 1em;
	color: var(--pcb-text);
	margin-bottom: 14px;
}
.pcb-slot-empty-note {
	font-size: 0.9em;
	color: var(--pcb-text-muted);
	margin-bottom: 10px;
}

/* Selected item row: thumb / qty / price / edit / delete */
.pcb-slot-row {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}
.pcb-row-thumb {
	width: 64px;
	height: 64px;
	flex-shrink: 0;
	object-fit: contain;
	border: 1px solid var(--pcb-border);
	border-radius: 8px;
	background: #fff;
	padding: 4px;
}
.pcb-row-qty {
	width: 46px;
	flex-shrink: 0;
	text-align: center;
	padding: 10px 4px;
	border: 1px solid var(--pcb-border);
	border-radius: 8px;
	font-size: 0.95em;
	color: var(--pcb-text);
	-moz-appearance: textfield;
	appearance: textfield;
}
.pcb-row-qty::-webkit-outer-spin-button,
.pcb-row-qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.pcb-row-price {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 1.05em;
	color: var(--pcb-text);
	overflow-wrap: break-word;
}
.pcb-row-btn {
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--pcb-border);
	border-radius: 8px;
	background: var(--pcb-bg);
	cursor: pointer;
	color: var(--pcb-text);
}
.pcb-row-edit:hover {
	border-color: var(--pcb-accent);
	color: var(--pcb-accent);
}
.pcb-row-delete {
	border-color: #fecaca;
	color: var(--pcb-danger);
	background: var(--pcb-danger-bg);
}
.pcb-row-delete:hover {
	background: #fee2e2;
	border-color: var(--pcb-danger);
}

/* Big icon tile that opens the picker */
.pcb-slot-tile {
	width: 92px;
	height: 92px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--pcb-border);
	border-radius: 10px;
	background: var(--pcb-bg-subtle);
	cursor: pointer;
	padding: 14px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pcb-slot-tile:hover {
	border-color: var(--pcb-accent);
}
.pcb-slot-tile.pcb-open {
	border-color: var(--pcb-accent);
	box-shadow: 0 0 0 3px var(--pcb-accent-light);
}
.pcb-slot-tile.pcb-disabled {
	cursor: not-allowed;
	opacity: 0.5;
}
.pcb-slot-tile-icon {
	width: 100%;
	height: 100%;
	display: flex;
}
.pcb-slot-tile-icon svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: var(--pcb-text);
	stroke-width: 1.4;
}

/* ---- Selection modal (large product browser) ------------------------- */
body.pcb-modal-lock {
	overflow: hidden;
}
.pcb-modal-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(17, 24, 39, 0.55);
	padding: 24px;
	align-items: center;
	justify-content: center;
}
.pcb-modal-overlay.open {
	display: flex;
}
.pcb-modal {
	background: var(--pcb-bg);
	border-radius: 16px;
	width: 100%;
	max-width: 760px;
	max-height: 88vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
}
.pcb-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 22px;
	border-bottom: 1px solid var(--pcb-border);
	flex-shrink: 0;
}
.pcb-modal-title {
	margin: 0;
	font-size: 1.15em;
	font-weight: 700;
}
.pcb-modal-close {
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: var(--pcb-bg-subtle);
	border-radius: 50%;
	cursor: pointer;
	color: var(--pcb-text-muted);
}
.pcb-modal-close:hover {
	background: var(--pcb-danger-bg);
	color: var(--pcb-danger);
}
.pcb-modal-controls {
	display: flex;
	gap: 10px;
	padding: 16px 22px;
	border-bottom: 1px solid var(--pcb-border);
	flex-shrink: 0;
}
.pcb-modal-search {
	flex: 1;
	min-width: 0;
	padding: 10px 14px;
	border: 1px solid var(--pcb-border);
	border-radius: 8px;
	font-size: 0.95em;
}
.pcb-modal-search:focus {
	border-color: var(--pcb-accent);
	outline: none;
}
.pcb-modal-sort {
	flex-shrink: 0;
	width: 190px;
	padding: 10px 12px;
	border: 1px solid var(--pcb-border);
	border-radius: 8px;
	font-size: 0.9em;
	background: var(--pcb-bg);
	color: var(--pcb-text);
}
.pcb-modal-list {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 4px 22px;
}
.pcb-modal-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex-wrap: wrap;
	padding: 14px 22px;
	border-top: 1px solid var(--pcb-border);
	flex-shrink: 0;
}
.pcb-page-btn {
	min-width: 34px;
	height: 34px;
	padding: 0 8px;
	border: 1px solid var(--pcb-border);
	border-radius: 8px;
	background: var(--pcb-bg);
	color: var(--pcb-text);
	cursor: pointer;
	font-size: 0.9em;
}
.pcb-page-btn:hover {
	border-color: var(--pcb-accent);
}
.pcb-page-btn.pcb-page-active {
	background: var(--pcb-accent);
	border-color: var(--pcb-accent);
	color: #fff;
	font-weight: 700;
}

/* Product row within the modal */
.pcb-product-card {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 18px 0;
	border-bottom: 1px solid var(--pcb-border);
}
.pcb-modal-list .pcb-product-card:last-child {
	border-bottom: none;
}
.pcb-product-card.pcb-card-selected {
	background: var(--pcb-accent-light);
	margin: 0 -22px;
	padding: 18px 22px;
	border-radius: 10px;
	border-bottom-color: transparent;
}
.pcb-product-card.pcb-card-disabled {
	opacity: 0.55;
}
.pcb-card-img {
	width: 96px;
	height: 96px;
	flex-shrink: 0;
	object-fit: contain;
	border: 1px solid var(--pcb-border);
	border-radius: 8px;
	background: #fff;
	padding: 6px;
}
.pcb-card-info {
	flex: 1;
	min-width: 0;
}
.pcb-card-name {
	font-size: 1.02em;
	font-weight: 600;
	overflow-wrap: break-word;
	margin-bottom: 4px;
}
.pcb-card-stock {
	font-size: 0.85em;
	color: var(--pcb-success);
	font-weight: 600;
}
.pcb-card-note {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.85em;
	color: #b45309;
	margin-top: 4px;
}
.pcb-card-note::before {
	content: "⚠";
	flex-shrink: 0;
}
.pcb-card-right {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-shrink: 0;
}
.pcb-card-price {
	font-size: 1.08em;
	font-weight: 700;
	color: var(--pcb-text);
	white-space: nowrap;
}
.pcb-card-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}
.pcb-card-qty {
	width: 46px;
	padding: 9px 4px;
	text-align: center;
	border: 1px solid var(--pcb-border);
	border-radius: 8px;
	font-size: 0.92em;
	-moz-appearance: textfield;
	appearance: textfield;
}
.pcb-card-qty::-webkit-outer-spin-button,
.pcb-card-qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.pcb-card-select {
	padding: 10px 20px;
	border: none;
	border-radius: 8px;
	background: #15806f;
	color: #fff;
	font-weight: 700;
	font-size: 0.92em;
	cursor: pointer;
	white-space: nowrap;
}
.pcb-card-select:hover:not(:disabled) {
	background: #0f6b5c;
}
.pcb-card-select:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
.pcb-card-select.pcb-card-select-active {
	background: var(--pcb-text-muted);
}
.pcb-no-results {
	padding: 30px 16px;
	color: var(--pcb-text-muted);
	font-size: 0.92em;
	text-align: center;
}

/* ---- Summary card ------------------------------------------------------- */
.pcb-summary {
	margin-top: 8px;
	background: var(--pcb-bg-subtle);
	border: 1px solid var(--pcb-border);
	border-radius: 12px;
	padding: 18px;
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.pcb-total {
	font-size: 1.25em;
	font-weight: 800;
	letter-spacing: -0.01em;
}
.pcb-add-to-cart {
	padding: 12px 26px;
	background: var(--pcb-accent);
	color: #fff;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	font-size: 0.98em;
	font-weight: 700;
	transition: background 0.15s ease, transform 0.05s ease;
}
.pcb-add-to-cart:hover:not(:disabled) {
	background: #4338ca;
}
.pcb-add-to-cart:active:not(:disabled) {
	transform: translateY(1px);
}
.pcb-add-to-cart:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}
.pcb-status {
	flex-basis: 100%;
	font-size: 0.9em;
	font-weight: 600;
}
.pcb-status-warning {
	color: #b45309;
}
.pcb-status-success {
	color: var(--pcb-success);
}

/* ---- Secondary action bar (Remove all / Share / Print / PDF) --------- */
.pcb-action-bar {
	flex-basis: 100%;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	margin-top: 4px;
}
.pcb-action-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 8px;
	border: 1px solid var(--pcb-border);
	border-radius: 8px;
	background: var(--pcb-bg);
	color: var(--pcb-text);
	font-size: 0.82em;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.pcb-action-btn svg {
	flex-shrink: 0;
}
.pcb-action-btn:hover:not(:disabled) {
	border-color: var(--pcb-accent);
	color: var(--pcb-accent);
}
.pcb-action-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
#pcb-remove-all:hover:not(:disabled) {
	border-color: var(--pcb-danger);
	color: var(--pcb-danger);
}

/* ---- Print / PDF summary ---------------------------------------------
   Invisible in the normal page flow; only made visible by the @media print
   rule below (for the Print button) or rendered off-screen and captured
   with html2canvas (for the PDF button) — see pc-builder.js. */
.pcb-print-summary {
	position: absolute;
	left: -9999px;
	top: 0;
	width: 720px;
	background: #fff;
	color: #111;
	font-family: Arial, sans-serif;
	padding: 32px;
}
.pcb-print-header {
	display: flex;
	align-items: center;
	gap: 14px;
	border-bottom: 2px solid #111;
	padding-bottom: 14px;
	margin-bottom: 18px;
}
.pcb-print-logo {
	max-height: 48px;
	max-width: 160px;
	object-fit: contain;
}
.pcb-print-store-name {
	font-size: 1.3em;
	font-weight: 800;
}
.pcb-print-meta {
	margin-left: auto;
	text-align: right;
	font-size: 0.85em;
	color: #555;
}
.pcb-print-title {
	font-size: 1.1em;
	font-weight: 700;
	margin-bottom: 14px;
}
.pcb-print-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 18px;
}
.pcb-print-table th,
.pcb-print-table td {
	border-bottom: 1px solid #ddd;
	padding: 10px 8px;
	text-align: left;
	font-size: 0.92em;
	vertical-align: top;
}
.pcb-print-table th {
	background: #f3f4f6;
	font-weight: 700;
}
.pcb-print-category {
	color: #666;
	font-size: 0.85em;
}
.pcb-print-total-row td {
	border-top: 2px solid #111;
	border-bottom: none;
	font-weight: 800;
	font-size: 1.05em;
	padding-top: 14px;
}
.pcb-print-footnote {
	font-size: 0.78em;
	color: #888;
	margin-top: 24px;
}

@media print {
	body * {
		visibility: hidden;
	}
	.pcb-print-summary,
	.pcb-print-summary * {
		visibility: visible;
	}
	.pcb-print-summary {
		position: static;
		left: 0;
		width: 100%;
		padding: 0;
	}
}

/* ==========================================================================
   Mobile refinements — the card layout above is already single-column and
   fits narrow screens by default; these just tighten spacing so it feels
   native on small phones (tested at 320 / 375 / 390 / 430px).
   ========================================================================== */
@media (max-width: 480px) {
	.pcb-builder {
		padding: 0 2px;
	}
	.pcb-slot-card {
		padding: 14px 12px;
	}
	.pcb-row-thumb {
		width: 52px;
		height: 52px;
	}
	.pcb-row-qty {
		width: 40px;
		padding: 8px 2px;
	}
	.pcb-row-price {
		font-size: 0.95em;
	}
	.pcb-row-btn {
		width: 32px;
		height: 32px;
	}
	.pcb-slot-tile {
		width: 76px;
		height: 76px;
		padding: 12px;
	}
	.pcb-summary {
		padding: 14px;
		gap: 10px;
	}
	.pcb-add-to-cart {
		width: 100%;
		padding: 13px 16px;
	}
	.pcb-action-bar {
		grid-template-columns: repeat(2, 1fr);
	}
	.pcb-action-btn {
		font-size: 0.8em;
		padding: 11px 6px;
	}

	/* Modal: full-height sheet instead of a floating dialog, and the
	   controls/product-row stack vertically so nothing needs horizontal
	   scrolling to reach the price, qty box, or Select button. */
	.pcb-modal-overlay {
		padding: 0;
		align-items: flex-end;
	}
	.pcb-modal {
		max-width: 100%;
		max-height: 92vh;
		max-height: 92dvh; /* dvh tracks the visible area when the mobile keyboard opens */
		width: 100%;
		border-radius: 16px 16px 0 0;
	}
	.pcb-modal-header {
		padding: 14px 16px;
	}
	.pcb-modal-controls {
		flex-direction: column;
		padding: 12px 16px;
	}
	.pcb-modal-sort {
		width: 100%;
	}
	.pcb-modal-list {
		padding: 4px 16px;
	}
	.pcb-modal-pagination {
		padding: 12px 16px;
	}

	/* Compact HORIZONTAL cards on mobile — image stays small and to the
	   left (same shape as desktop), so 2-3 products are visible at once
	   instead of one giant image dominating the screen. This replaces an
	   earlier version that switched to a full-width stacked image here;
	   that was the actual cause of the "one product fills the screen"
	   complaint, not the image file itself. */
	.pcb-product-card {
		display: grid;
		grid-template-columns: 64px minmax(0, 1fr);
		column-gap: 10px;
		row-gap: 6px;
		align-items: start;
		padding: 12px 0;
	}
	.pcb-product-card.pcb-card-selected {
		margin: 0 -12px;
		padding: 12px;
	}
	.pcb-card-img {
		grid-column: 1;
		grid-row: 1 / span 2;
		width: 64px;
		height: 64px;
		padding: 4px;
	}
	.pcb-card-info {
		grid-column: 2;
		grid-row: 1;
		min-width: 0;
	}
	.pcb-card-name {
		font-size: 0.92em;
		line-height: 1.3;
		margin-bottom: 3px;
		/* Clamp to 2 lines so every row stays a predictable, compact height. */
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.pcb-card-stock,
	.pcb-card-note {
		font-size: 0.78em;
	}
	/* Price on the left, qty + Select on the right; wraps onto two lines
	   instead of overflowing if the screen is too narrow for both. */
	.pcb-card-right {
		grid-column: 2;
		grid-row: 2;
		min-width: 0;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 6px 8px;
	}
	.pcb-card-price {
		font-size: 0.95em;
		white-space: normal;
	}
	.pcb-card-actions {
		gap: 6px;
	}
	.pcb-card-qty {
		width: 38px;
		padding: 6px 2px;
		font-size: 0.85em;
	}
	.pcb-card-select {
		padding: 7px 12px;
		font-size: 0.82em;
	}
}

/* A second, tighter tier for very narrow phones (320-359px) so the card
   still reads comfortably without the image eating too much width. */
@media (max-width: 359px) {
	.pcb-product-card {
		grid-template-columns: 54px minmax(0, 1fr);
	}
	.pcb-card-img {
		width: 54px;
		height: 54px;
	}
	.pcb-card-name {
		font-size: 0.88em;
	}
}

/* ==========================================================================
   Icon / control visibility hardening (v1.1.2)
   The edit, delete and close icons were drawn with stroke="currentColor", so a
   theme rule that sets a light text colour on <button> (e.g. white) made them
   vanish into their light backgrounds. The icon shapes now carry their own
   explicit colours, scoped to this plugin, so they stay visible regardless of
   the theme's button colour. Also adds the − / + quantity buttons.
   ========================================================================== */

/* Edit / delete icons (selected-component card) */
.pcb-builder .pcb-row-btn svg {
	display: block;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	opacity: 1;
	visibility: visible;
	overflow: visible;
}
.pcb-builder button.pcb-row-edit {
	color: #1f2937 !important;
}
.pcb-builder button.pcb-row-edit svg path {
	stroke: #1f2937 !important;
	fill: none !important;
}
.pcb-builder button.pcb-row-edit:hover,
.pcb-builder button.pcb-row-edit:focus-visible {
	color: #4f46e5 !important;
	background: #eef2ff !important;
}
.pcb-builder button.pcb-row-edit:hover svg path,
.pcb-builder button.pcb-row-edit:focus-visible svg path {
	stroke: #4f46e5 !important;
}
.pcb-builder button.pcb-row-delete {
	color: #dc2626 !important;
}
.pcb-builder button.pcb-row-delete svg path {
	stroke: #dc2626 !important;
	fill: none !important;
}
.pcb-builder button.pcb-row-delete:hover,
.pcb-builder button.pcb-row-delete:focus-visible {
	color: #b91c1c !important;
	background: #fee2e2 !important;
}
.pcb-builder button.pcb-row-delete:hover svg path,
.pcb-builder button.pcb-row-delete:focus-visible svg path {
	stroke: #b91c1c !important;
}

/* Close (X) icon in the selection popup — dark glyph on a clearly visible chip */
.pcb-builder button.pcb-modal-close {
	color: #111827 !important;
	background: #e5e7eb !important;
}
.pcb-builder .pcb-modal-close svg {
	display: block;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	opacity: 1;
	visibility: visible;
}
.pcb-builder .pcb-modal-close svg path {
	stroke: #111827 !important;
	stroke-width: 2.4;
	fill: none !important;
}
.pcb-builder button.pcb-modal-close:hover,
.pcb-builder button.pcb-modal-close:focus-visible {
	color: #b91c1c !important;
	background: #fee2e2 !important;
}
.pcb-builder button.pcb-modal-close:hover svg path,
.pcb-builder button.pcb-modal-close:focus-visible svg path {
	stroke: #b91c1c !important;
}

/* Quantity control in the selection popup: [ − ] [ 1 ] [ + ] */
.pcb-builder .pcb-card-stepper {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}
.pcb-builder button.pcb-card-qty-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 36px;
	padding: 0;
	flex-shrink: 0;
	border: 1.5px solid #6b7280;
	border-radius: 8px;
	background: #ffffff !important;
	color: #111827 !important;
	cursor: pointer;
	line-height: 1;
}
.pcb-builder button.pcb-card-qty-btn svg {
	display: block;
	width: 14px;
	height: 14px;
	opacity: 1;
	visibility: visible;
}
.pcb-builder button.pcb-card-qty-btn svg path {
	stroke: #111827 !important;
	stroke-width: 2.6;
	fill: none !important;
}
.pcb-builder button.pcb-card-qty-btn:hover:not(:disabled),
.pcb-builder button.pcb-card-qty-btn:focus-visible {
	border-color: #15806f;
	background: #ecfdf5 !important;
}
.pcb-builder button.pcb-card-qty-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}
.pcb-builder input.pcb-card-qty {
	color: #111827 !important;
	-webkit-text-fill-color: #111827;
	background: #ffffff;
	font-weight: 600;
	opacity: 1;
}

@media (max-width: 480px) {
	.pcb-builder .pcb-card-stepper {
		gap: 3px;
	}
	.pcb-builder button.pcb-card-qty-btn {
		width: 28px;
		height: 32px;
	}
	.pcb-builder input.pcb-card-qty {
		width: 34px;
	}
}

/* ==========================================================================
   Sticky summary bar (v1.2.0): total + Add to Cart, with Download PDF
   directly underneath. `position: sticky` keeps it in normal flow (so it never
   covers builder content) and pins it while the builder is on screen.
   --pcb-sticky-top is set by pc-builder.js so the bar sits BELOW a fixed theme
   header / WP admin bar instead of hiding behind it (0px when there is none).
   ========================================================================== */
.pcb-sticky-bar {
	position: sticky;
	top: var(--pcb-sticky-top, 0px);
	z-index: 40;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 10px 12px;
	background: #ffffff;
	border: 1px solid var(--pcb-border);
	border-radius: 12px;
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
}
.pcb-sticky-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.pcb-sticky-bar .pcb-total {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 1.1em;
	overflow-wrap: anywhere;
}
.pcb-sticky-bar .pcb-add-to-cart {
	flex: 0 0 auto;
	width: auto;
	padding: 11px 20px;
	white-space: nowrap;
}
.pcb-builder button.pcb-pdf-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 10px 14px;
	border: none;
	border-radius: 10px;
	background: #15803d !important;
	color: #ffffff !important;
	font-size: 0.95em;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s ease;
}
.pcb-builder button.pcb-pdf-btn:hover:not(:disabled) {
	background: #166534 !important;
}
.pcb-builder button.pcb-pdf-btn:disabled {
	opacity: 0.65;
	cursor: not-allowed;
}
.pcb-sticky-bar .pcb-status {
	flex-basis: auto;
	margin: 0;
	font-size: 0.8em;
	max-height: 4.2em;
	overflow-y: auto;
}
.pcb-sticky-bar .pcb-status:empty {
	display: none;
}
/* The bar is now the first <div> in the builder, so the old
   ".pcb-group:first-of-type" top-spacing rule no longer matches the first group. */
.pcb-builder .pcb-sticky-bar + .pcb-group {
	margin-top: 14px;
}
/* The bottom card now only holds "Remove all". */
.pcb-summary .pcb-action-bar {
	grid-template-columns: 1fr;
	margin-top: 0;
}
/* Used by pc-builder.js only when a theme wrapper breaks position: sticky. */
.pcb-sticky-bar.pcb-bar-fixed {
	position: fixed;
}
@media (max-width: 480px) {
	.pcb-sticky-bar {
		padding: 8px 10px;
		gap: 6px;
	}
	.pcb-sticky-bar .pcb-add-to-cart {
		width: auto;
		padding: 12px 14px;
	}
	.pcb-builder button.pcb-pdf-btn {
		padding: 11px 12px;
	}
}