/* Product Customizer Studio — storefront builder (inline, in-content) */

/* Token fallbacks so elements rendered outside .pcs-builder (modals, toasts,
   the launcher) still resolve every var(). .pcs-builder redefines these. */
:root {
	--pcs-accent: #2563eb;
	--pcs-accent-ink: #ffffff;
	--pcs-bg: #ffffff;
	--pcs-surface: #ffffff;
	--pcs-sunken: #f3f4f6;
	--pcs-line: #e5e7eb;
	--pcs-line-2: #d5d8de;
	--pcs-ink: #1c1e21;
	--pcs-ink-soft: #606770;
	--pcs-radius: 10px;
	--pcs-shadow: 0 1px 2px rgba( 0, 0, 0, .05 ), 0 10px 30px rgba( 0, 0, 0, .07 );
}

/* ---------- launcher ---------- */
.pcs-launch,
.woocommerce .pcs-launch,
.woocommerce div.product form.cart .pcs-launch,
button.pcs-launch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	padding: 0.8em 1.9em;
	margin: 0 0 12px;
	min-width: 0;
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
	color: #fff;
	background: var(--pcs-accent, #2563eb);
	border: 0;
	border-radius: 8px;
	box-shadow: none;
	cursor: pointer;
	text-decoration: none;
	width: auto;
	max-width: 100%;
	height: auto;
	transition: filter .15s ease, transform .05s ease;
	-webkit-appearance: none;
	appearance: none;
}
.pcs-launch:hover, .woocommerce .pcs-launch:hover, button.pcs-launch:hover { color: #fff; filter: brightness( 1.07 ); box-shadow: none; }
.pcs-launch:active { transform: translateY( 1px ); }
.pcs-launch:focus-visible { outline: 2px solid var(--pcs-accent, #2563eb); outline-offset: 2px; }
.woocommerce div.product form.cart .pcs-launch,
form.cart .pcs-launch { display: flex; width: 100%; }

/* ============================================================================
   Isolation layer — stop the host theme / other plugins from cascading into
   the builder and "disturbing the view".

   Two lines of defence:
   1. At runtime the builder is lifted OUT of <form class="cart"> (see
      editor.js resolveMount), so high-specificity theme rules like
      `.woocommerce div.product form.cart button` can no longer reach it.
   2. The scoped rules below + the component rules in this file, which are all
      `.pcs-builder`-scoped and carry !important on the interactive primitives,
      so even a theme that puts !important on broad selectors
      (`.woocommerce button`, `.entry-summary input`, `body.woocommerce a` …)
      cannot restyle the builder's controls.
   ========================================================================== */
.pcs-builder {
	isolation: isolate;                 /* own stacking context — theme z-index can't punch through */
}
.pcs-builder,
.pcs-builder *,
.pcs-builder *::before,
.pcs-builder *::after {
	box-sizing: border-box !important;
	float: none !important;
	text-shadow: none !important;       /* canvas text uses its own shadow, not CSS */
}
/* Re-assert a known text baseline on the shell; component rules still win. */
.pcs-builder {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	word-spacing: normal;
	font-style: normal;
	color: var( --pcs-ink, #1c1e21 );
}
/* Blanket neutraliser for every control the theme targets by tag name. These
   are properties the builder never wants from a theme; component rules (higher
   specificity, also !important) still set the intentional look on top. */
.pcs-builder button,
.pcs-builder input,
.pcs-builder select,
.pcs-builder textarea,
.pcs-builder a,
.pcs-builder label {
	text-transform: none !important;
	letter-spacing: normal !important;
	word-spacing: normal !important;
	box-shadow: none !important;
	text-shadow: none !important;
	text-decoration: none !important;
	text-indent: 0 !important;
	min-width: 0 !important;
	max-width: none !important;
	outline-offset: 0 !important;
	filter: none !important;
}
/* Page builders / themes love to pad every <button> (Elementor's global kit
   ships `.elementor-kit-N button { padding: 19px 30px }`). On a 60px icon
   button or a square shape tile that crushes the content box to ~1px, so the
   tab icons look tiny and the shape previews vanish. Zero it here — every
   control that needs inner spacing sets its own padding below (higher
   specificity, so those still win). */
.pcs-builder button { padding: 0 !important; }
.pcs-builder select { background-image: none !important; }
/* The classic offender: `img { max-width: 100% }` / `canvas { max-width: 100% }`
   shrinks the Fabric stage and every thumbnail. */
.pcs-builder img,
.pcs-builder svg,
.pcs-builder canvas,
.pcs-builder video {
	max-width: none !important;
	max-height: none !important;
	min-width: 0 !important;
	min-height: 0 !important;
	box-shadow: none !important;
	border: 0 !important;
}
.pcs-builder ul,
.pcs-builder ol,
.pcs-builder li { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.pcs-builder p { margin: 0 !important; }
.pcs-builder hr { display: none !important; }
.pcs-builder ::placeholder { color: var( --pcs-ink-soft, #606770 ) !important; opacity: 1 !important; }
/* Kill the theme's focus glow but keep an accessible keyboard ring.
   `*:focus` (0,0,1,2) outranks a theme's `button:focus` / `input:focus`. */
.pcs-builder *:focus { outline: none !important; box-shadow: none !important; }
.pcs-builder *:focus-visible { outline: 2px solid var( --pcs-accent, #2563eb ) !important; outline-offset: 1px !important; }

/* ---------- mount + breakout ---------- */
.pcs-builder-mount:not(.is-active) { display: none; }
.pcs-builder-mount.is-active {
	display: block !important;
	margin: 24px 0;
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	float: none !important;
	position: static !important;
	overflow: visible !important;
	transform: none !important;
}
/* Full-width breakout: the negative left/right margins are measured and set
   inline by editor.js (Editor.applyWide) because a pure-CSS `calc(50% - 47vw)`
   is wrong whenever the mount's containing block isn't the viewport — e.g. a
   theme / page-builder template that wraps the product in a narrow column.
   The class is just a marker; header and footer stay exactly where they are. */
.pcs-builder-mount.is-active.pcs-wide {
	max-width: none !important;
}

/* ---------- builder shell ---------- */
.pcs-builder {
	--pcs-accent: #2563eb;
	--pcs-accent-ink: #ffffff;
	--pcs-bg: #ffffff;
	--pcs-surface: #ffffff;
	--pcs-sunken: #f3f4f6;
	--pcs-line: #e5e7eb;
	--pcs-line-2: #d5d8de;
	--pcs-ink: #1c1e21;
	--pcs-ink-soft: #606770;
	--pcs-radius: 10px;
	--pcs-shadow: 0 1px 2px rgba( 0, 0, 0, .05 ), 0 10px 30px rgba( 0, 0, 0, .07 );
	--pcs-h: min( 84vh, 900px );
	--pcs-panel-w: 304px;   /* every tool panel is exactly this wide */

	/* Structural props are !important so a page builder / theme (Elementor's
	   global flex/grid resets in particular) can't break the 3-pane layout. */
	display: flex !important;
	flex-direction: column !important;
	height: var( --pcs-h ) !important;
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 100% !important;
	/* The 3-pane -> stacked switch below keys off the builder's OWN width, not
	   the viewport, so it stays usable inside a narrow theme / page-builder
	   column (e.g. an Elementor Pro "Single Product" template, a sidebar
	   layout). See the @container blocks lower down. */
	container-type: inline-size !important;
	container-name: pcs !important;
	background: var( --pcs-bg );
	color: var( --pcs-ink );
	border: 1px solid var( --pcs-line );
	border-radius: 16px;
	overflow: hidden !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	box-shadow: 0 1px 3px rgba( 16, 24, 40, .06 ), 0 12px 40px -8px rgba( 16, 24, 40, .12 );
}
.pcs-builder .pcs-b-panel__body::-webkit-scrollbar,
.pcs-builder .pcs-b-stage::-webkit-scrollbar { width: 10px; height: 10px; }
.pcs-builder .pcs-b-panel__body::-webkit-scrollbar-thumb,
.pcs-builder .pcs-b-stage::-webkit-scrollbar-thumb { background: var( --pcs-line-2 ); border-radius: 6px; border: 2px solid var( --pcs-surface ); }
.pcs-builder .pcs-iconbtn,
.pcs-builder .pcs-btn,
.pcs-builder .pcs-tile,
.pcs-builder .pcs-chip,
.pcs-builder .pcs-b-view { transition: background .12s ease, border-color .12s ease, color .12s ease, transform .06s ease, box-shadow .12s ease; }
.pcs-builder .pcs-btn:active,
.pcs-builder .pcs-iconbtn:active { transform: translateY( 1px ) !important; }
.pcs-wide .pcs-builder { border-radius: 0; border-left: 0; border-right: 0; }
.pcs-builder * { box-sizing: border-box; }

.pcs-builder--full {
	position: fixed !important;
	/* `inset: 0` (top+bottom+left+right all 0) with auto height/width stretches
	   the box to the *visible* viewport — the area not covered by the mobile
	   browser's address bar. `100vh` is the LARGER viewport, so it used to push
	   the bottom bar under the address bar with no way to scroll to it. */
	inset: 0 !important;
	height: auto !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0;
	z-index: 99999 !important;
}

.pcs-builder__loading {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var( --pcs-ink-soft );
	gap: 10px;
}
.pcs-builder .pcs-spinner {
	width: 18px; height: 18px; border-radius: 50%;
	border: 2px solid var( --pcs-line-2 ); border-top-color: var( --pcs-accent );
	animation: pcs-spin .7s linear infinite;
}
@keyframes pcs-spin { to { transform: rotate( 360deg ); } }

/* ---------- top bar ---------- */
.pcs-builder .pcs-b-top {
	flex: 0 0 auto !important;
	display: flex !important;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	border-bottom: 1px solid var( --pcs-line );
	background: var( --pcs-surface );
}
.pcs-builder .pcs-b-top__title {
	font-weight: 700;
	font-size: 14px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 26ch;
}
.pcs-builder .pcs-b-views { display: flex !important; gap: 6px; margin: 0 auto; flex-wrap: wrap; }
.pcs-builder .pcs-b-view {
	display: flex !important;
	align-items: center !important;
	gap: 7px !important;
	padding: 5px 12px 5px 5px !important;
	border: 1px solid var( --pcs-line-2 ) !important;
	border-radius: 999px !important;
	background: var( --pcs-surface ) !important;
	color: var( --pcs-ink ) !important;
	font-size: 12.5px !important;
	font-weight: 500 !important;
	cursor: pointer;
	line-height: 1 !important;
}
.pcs-builder .pcs-b-view img {
	width: 26px !important; height: 26px !important; border-radius: 50% !important; object-fit: contain !important;
	background: var( --pcs-sunken ) !important; flex: 0 0 auto !important;
}
.pcs-builder .pcs-b-view.is-active { border-color: var( --pcs-accent ) !important; box-shadow: inset 0 0 0 1px var( --pcs-accent ) !important; color: var( --pcs-accent ) !important; }
.pcs-builder .pcs-b-top__tools { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }

/* ---------- generic buttons ---------- */
.pcs-builder .pcs-btn {
	text-transform: none !important; letter-spacing: normal !important; box-shadow: none !important; text-decoration: none !important; filter: none !important;
	display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important;
	height: 38px !important; padding: 0 16px !important;
	border: 1px solid var( --pcs-line-2 ) !important;
	border-radius: 9px !important;
	background: var( --pcs-surface ) !important;
	color: var( --pcs-ink ) !important;
	font-size: 13.5px !important; font-weight: 500 !important;
	cursor: pointer;
	white-space: nowrap !important;
}
.pcs-builder .pcs-btn:hover { background: var( --pcs-sunken ) !important; }
.pcs-builder .pcs-btn--primary { background: var( --pcs-accent ) !important; border-color: var( --pcs-accent ) !important; color: var( --pcs-accent-ink ) !important; }
.pcs-builder .pcs-btn--primary:hover { filter: brightness( 1.06 ) !important; background: var( --pcs-accent ) !important; }
.pcs-builder .pcs-btn--danger { color: #c62828 !important; }
.pcs-builder .pcs-btn--ghost { border-color: transparent !important; background: transparent !important; color: var( --pcs-ink-soft ) !important; }
.pcs-builder .pcs-btn--ghost:hover { background: var( --pcs-sunken ) !important; color: var( --pcs-ink ) !important; }
.pcs-builder .pcs-btn--block { width: 100% !important; }
.pcs-builder .pcs-btn:disabled { opacity: .5 !important; cursor: default; }

/* chip presets */
.pcs-builder .pcs-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.pcs-builder .pcs-chip {
	text-transform: none !important; letter-spacing: normal !important; box-shadow: none !important; text-decoration: none !important; filter: none !important;
	padding: 6px 12px !important; border: 1px solid var( --pcs-line-2 ) !important; border-radius: 999px !important;
	background: var( --pcs-surface ) !important; color: var( --pcs-ink ) !important; font-size: 12px !important; font-weight: 500 !important; cursor: pointer;
}
.pcs-builder .pcs-chip:hover { border-color: var( --pcs-accent ) !important; }
/* Active preset = an accent outline (not a solid fill), so it reads as
   "selected" without hiding the label. */
.pcs-builder .pcs-chip.is-on {
	background: var( --pcs-surface ) !important;
	border-color: var( --pcs-accent ) !important;
	box-shadow: inset 0 0 0 1px var( --pcs-accent ) !important;
	color: var( --pcs-accent ) !important;
	font-weight: 600 !important;
}

/* shape preview tiles */
.pcs-builder .pcs-tile--shape { background-image: none !important; }
/* Fixed px, not a percentage: a %-sized SVG in a grid cell collapses to ~0 when
   a theme/builder makes the tile's box indefinite (see the button-padding note
   above). Every other icon in the builder is sized in px for the same reason. */
.pcs-builder .pcs-tile--shape svg { width: 34px !important; height: 34px !important; }

/* quantity stepper */
.pcs-builder .pcs-qtyrow { display: flex !important; gap: 6px !important; align-items: stretch !important; }
.pcs-builder .pcs-qtyrow .pcs-btn {
	text-transform: none !important; letter-spacing: normal !important; box-shadow: none !important; text-decoration: none !important; filter: none !important; width: 44px !important; min-width: 44px !important; padding: 0 !important; font-size: 18px !important; }
.pcs-builder .pcs-qtyrow input {
	text-transform: none !important; letter-spacing: normal !important; box-shadow: none !important; text-decoration: none !important; filter: none !important; flex: 1 !important; min-width: 0 !important; text-align: center !important; height: 40px !important; border: 1px solid var( --pcs-line-2 ) !important; border-radius: 8px !important; font-size: 15px !important; }

/* size & quantity block (single ⇄ grid, with the "multiple sizes" checkbox) */
.pcs-builder .pcs-sizectl { display: block; }
.pcs-builder .pcs-sizeqty { display: flex; gap: 10px; align-items: flex-end; }
.pcs-builder .pcs-sizeqty > label { display: flex; flex-direction: column; gap: 5px; }
.pcs-builder .pcs-sizeqty > label:first-child { flex: 1 1 auto; min-width: 0; }
.pcs-builder .pcs-sizeqty > label:last-child { flex: 0 0 auto; }
.pcs-builder .pcs-sizeqty select { width: 100% !important; height: 40px !important; }
.pcs-builder .pcs-sizectl__total:empty { display: none; }
.pcs-builder .pcs-checkline {
	display: flex; align-items: center; gap: 8px;
	margin: 10px 0 2px;
	font-size: 12.5px; font-weight: 500; color: var( --pcs-ink );
	cursor: pointer; user-select: none;
}
.pcs-builder .pcs-checkline input {
	width: 17px !important; height: 17px !important; min-width: 17px !important;
	margin: 0 !important; padding: 0 !important;
	-webkit-appearance: auto !important; appearance: auto !important;
	accent-color: var( --pcs-accent ) !important;
	cursor: pointer;
}

/* saved designs list */
.pcs-builder .pcs-saved { margin-top: 14px; }
.pcs-builder .pcs-saved__row { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var( --pcs-line ); }
.pcs-builder .pcs-saved__row.is-current { background: color-mix( in srgb, var( --pcs-accent ) 6%, transparent ); border-radius: 8px; padding: 9px 8px; }
.pcs-builder .pcs-saved__row img { width: 44px; height: 44px; object-fit: contain; background: var( --pcs-sunken ); border-radius: 6px; flex: 0 0 auto; }
.pcs-builder .pcs-saved__meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pcs-builder .pcs-saved__meta strong { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcs-builder .pcs-saved__name {
	text-transform: none !important; letter-spacing: normal !important; box-shadow: none !important; text-decoration: none !important; filter: none !important;
	width: 100% !important; font-weight: 600 !important; font-size: 13px !important; color: var( --pcs-ink ) !important;
	border: 1px solid transparent !important; border-radius: 6px !important; padding: 3px 6px !important; margin: -3px -6px 0 !important;
	background: transparent !important; transition: border-color .12s, background .12s;
}
.pcs-builder .pcs-saved__name:hover { border-color: var( --pcs-line-2 ) !important; }
.pcs-builder .pcs-saved__name:focus { outline: none !important; border-color: var( --pcs-accent ) !important; background: var( --pcs-surface ) !important; }
.pcs-builder .pcs-saved__act { display: flex; gap: 4px; align-items: center; flex: 0 0 auto; }

/* upload tiles with a remove button */
.pcs-builder .pcs-tile--img { position: relative !important; background-size: contain !important; }
.pcs-builder .pcs-tile__x {
	position: absolute; top: -6px; right: -6px;
	width: 20px; height: 20px; line-height: 18px; text-align: center;
	border: 1px solid var( --pcs-line-2 ); border-radius: 50%;
	background: var( --pcs-surface ); color: var( --pcs-ink-soft );
	font-size: 14px; cursor: pointer; padding: 0;
}
.pcs-builder .pcs-tile__x:hover { background: #c62828; color: #fff; border-color: #c62828; }

.pcs-builder .pcs-fontsel option { font-size: 15px !important; padding: 4px !important; }

/* custom font picker */
.pcs-builder .pcs-fontpick { position: relative; }
.pcs-builder .pcs-fontpick__btn {
	text-transform: none !important; letter-spacing: normal !important; box-shadow: none !important; text-decoration: none !important; filter: none !important;
	width: 100% !important; height: 40px !important; display: flex !important; align-items: center !important; justify-content: space-between !important;
	padding: 0 12px !important; border: 1px solid var( --pcs-line-2 ) !important; border-radius: 8px !important;
	background: var( --pcs-surface ) !important; color: var( --pcs-ink ) !important; cursor: pointer; font-size: 15px !important;
}
.pcs-builder .pcs-fontpick__car { color: var( --pcs-ink-soft ); font-size: 11px; }
.pcs-builder .pcs-fontpick__pop {
	display: none; position: absolute; z-index: 20; left: 0; right: 0; top: calc( 100% + 4px );
	max-height: 280px; overflow: auto;
	background: var( --pcs-surface ); border: 1px solid var( --pcs-line-2 ); border-radius: 10px;
	box-shadow: var( --pcs-shadow ); padding: 6px;
}
.pcs-builder .pcs-fontpick__pop.is-open { display: block; }
.pcs-builder .pcs-fontpick__opt {
	display: block; width: 100%; text-align: left; padding: 8px 10px !important; border: 0; border-radius: 6px;
	background: none; color: var( --pcs-ink ); cursor: pointer; font-size: 18px; line-height: 1.2;
}
.pcs-builder .pcs-fontpick__opt:hover { background: var( --pcs-sunken ); }
.pcs-builder .pcs-fontpick__opt.is-on { background: var( --pcs-accent ); color: #fff; }

/* share modal */
.pcs-builder .pcs-sharebox { display: flex; gap: 8px; }
.pcs-builder .pcs-sharebox input { flex: 1; height: 40px; padding: 0 10px; border: 1px solid var( --pcs-line-2 ); border-radius: 8px; font-size: 13px; background: var( --pcs-sunken ); }

/* quote size grid */
.pcs-builder .pcs-sizegrid { display: grid; grid-template-columns: repeat( auto-fill, minmax( 84px, 1fr ) ); gap: 8px; }
.pcs-builder .pcs-sizecell { display: flex !important; flex-direction: column !important; gap: 3px !important; font-size: 11px !important; font-weight: 700 !important; color: var( --pcs-ink-soft ) !important; text-align: center !important; }
.pcs-builder .pcs-sizecell input {
	text-transform: none !important; letter-spacing: normal !important; box-shadow: none !important; text-decoration: none !important; filter: none !important; height: 36px !important; text-align: center !important; border: 1px solid var( --pcs-line-2 ) !important; border-radius: 8px !important; font-size: 15px !important; font-weight: 600 !important; }

.pcs-builder .pcs-objactions { display: flex; gap: 6px; margin: 18px 0 4px; border-top: 1px solid var( --pcs-line ); padding-top: 14px; }
.pcs-builder .pcs-objactions .pcs-btn { flex: 1 !important; height: 34px !important; padding: 0 8px !important; font-size: 12.5px !important; }

.pcs-builder .pcs-iconbtn {
	text-transform: none !important; letter-spacing: normal !important; box-shadow: none !important; text-decoration: none !important; filter: none !important;
	width: 36px !important; height: 36px !important;
	display: grid !important; place-items: center !important;
	border: 1px solid var( --pcs-line-2 ) !important;
	border-radius: 9px !important;
	background: var( --pcs-surface ) !important;
	color: var( --pcs-ink ) !important;
	cursor: pointer;
	padding: 0 !important;
}
.pcs-builder .pcs-iconbtn:hover { background: var( --pcs-sunken ) !important; }
.pcs-builder .pcs-iconbtn:disabled { opacity: .4 !important; cursor: default; }
.pcs-builder .pcs-iconbtn svg, .pcs-builder .pcs-b-rail svg, .pcs-builder .pcs-btn svg { width: 18px !important; height: 18px !important; display: block !important; }
.pcs-builder .pcs-iconbtn--sm { width: 30px !important; height: 30px !important; border-color: transparent !important; }
.pcs-builder .pcs-iconbtn--sm svg { width: 15px !important; height: 15px !important; }

/* ---- inline icons: immune to a theme's global SVG reset ----
   Every builder icon is an inline <svg> drawn with presentation attributes
   (fill="none" stroke="currentColor" on the <svg>). Presentation attributes
   sit at the BOTTOM of the cascade, so a theme rule as ordinary as
   `svg { fill: currentColor }` or `svg path { stroke: none }` wipes them out —
   closed glyphs (Bold) survive as a filled blob while every line icon
   (Italic, Underline, Align, undo/redo…) vanishes. Re-assert the paint here,
   !important, on the icon AND every node inside it. `.pcs-i` is set by
   editor.js on each icon; `.pcs-i--fill` marks the solid shape previews. */
.pcs-builder .pcs-i { width: 18px !important; height: 18px !important; display: inline-block !important; overflow: visible !important; color: inherit !important; background: none !important; }
.pcs-builder .pcs-i, .pcs-builder .pcs-i * {
	fill: none !important;
	stroke: currentColor !important;
	stroke-width: 1.8 !important;
	stroke-dasharray: none !important;
	stroke-opacity: 1 !important;
	fill-opacity: 1 !important;
	opacity: 1 !important;
	visibility: visible !important;
	vector-effect: none !important;
	clip-path: none !important;
}
.pcs-builder .pcs-i.pcs-i--fill, .pcs-builder .pcs-i.pcs-i--fill * {
	fill: var( --pcs-accent, #2563eb ) !important;
	stroke: none !important;
}

.pcs-builder .pcs-zoom { display: inline-flex; align-items: center; border: 1px solid var( --pcs-line-2 ); border-radius: 9px; overflow: hidden; }
.pcs-builder .pcs-zoom button { width: 34px; height: 36px; border: 0; background: var( --pcs-surface ); cursor: pointer; display: grid; place-items: center; }
.pcs-builder .pcs-zoom button:hover { background: var( --pcs-sunken ); }
.pcs-builder .pcs-zoom span { min-width: 46px; text-align: center; font-size: 12px; font-weight: 600; color: var( --pcs-ink-soft ); border-left: 1px solid var( --pcs-line ); border-right: 1px solid var( --pcs-line ); line-height: 36px; }

/* ---------- body: rail | panel | stage | props ---------- */
.pcs-builder .pcs-b-body { flex: 1 1 auto !important; display: flex !important; flex-direction: row !important; min-height: 0 !important; min-width: 0 !important; width: 100% !important; }

.pcs-builder .pcs-b-rail {
	flex: 0 0 78px !important;
	display: flex !important; flex-direction: column !important;
	padding: 8px 8px !important;
	gap: 4px !important;
	border-right: 1px solid var( --pcs-line ) !important;
	background: var( --pcs-surface ) !important;
	overflow: auto !important;
}
.pcs-builder .pcs-b-rail button {
	text-transform: none !important; letter-spacing: normal !important; box-shadow: none !important; text-decoration: none !important; filter: none !important;
	position: relative !important;
	width: 100% !important;
	padding: 6px 4px !important;
	min-height: 60px !important;
	display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
	gap: 5px !important;
	border: 0 !important;
	border-radius: 12px !important;
	background: transparent !important;
	color: var( --pcs-ink-soft ) !important;
	font-size: 10.5px !important; font-weight: 500 !important;
	cursor: pointer;
	transition: background .13s ease, color .13s ease !important;
}
.pcs-builder .pcs-b-rail button svg { transition: transform .13s ease !important; }
.pcs-builder .pcs-b-rail button:hover { color: var( --pcs-ink ) !important; background: var( --pcs-sunken ) !important; }
/* Active tab: an accent-tinted pill. Same (normal) weight as the others —
   colour + fill carry the state, no edge bar. */
.pcs-builder .pcs-b-rail button.is-active {
	color: var( --pcs-accent ) !important;
	background: var( --pcs-sunken ) !important;
	background: color-mix( in srgb, var( --pcs-accent ) 14%, var( --pcs-surface ) ) !important;
	font-weight: 500 !important;
}
.pcs-builder .pcs-b-rail button.is-active svg { transform: translateY( -1px ) scale( 1.06 ) !important; }

.pcs-builder .pcs-b-panel {
	/* Locked width so every tab's panel is identical (Layers used to stretch). */
	flex: 0 0 var( --pcs-panel-w ) !important;
	width: var( --pcs-panel-w ) !important;
	min-width: var( --pcs-panel-w ) !important;
	max-width: var( --pcs-panel-w ) !important;
	display: flex !important; flex-direction: column !important;
	min-height: 0 !important;
	border-right: 1px solid var( --pcs-line );
	background: var( --pcs-surface );
}
.pcs-builder .pcs-b-panel__body { min-width: 0 !important; overflow-x: hidden !important; }
/* Keep every panel row within the fixed width. */
.pcs-builder .pcs-b-panel__body > *,
.pcs-builder .pcs-field,
.pcs-builder .pcs-row { max-width: 100%; }
.pcs-builder .pcs-b-panel__head {
	flex: 0 0 auto !important;
	padding: 15px 16px 10px;
	font-size: 14px; font-weight: 700;
	display: flex !important; align-items: center; justify-content: space-between;
}
.pcs-builder .pcs-b-panel__body { flex: 1 1 auto !important; overflow: auto !important; padding: 0 16px 18px; }

.pcs-builder .pcs-b-stagewrap {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	background: var( --pcs-sunken );
	position: relative !important;
	overflow: hidden !important;
}
/* The stage is absolutely positioned so a zoomed-in (large) canvas can NEVER
   push the layout — it just scrolls inside this fixed box. */
.pcs-builder .pcs-b-stage {
	position: absolute !important;
	inset: 0 !important;
	display: flex !important;
	/* "safe" keeps the top/left reachable when the canvas is larger than the box
	   (plain center would push the overflow out of scroll range). */
	align-items: safe center;
	justify-content: safe center;
	overflow: auto !important;
	padding: 28px;
	background:
		radial-gradient( circle at 50% 35%, rgba( 255, 255, 255, .8 ), transparent 60% ),
		var( --pcs-sunken );
}
.pcs-builder .pcs-b-stage-inner { margin: auto; }
.pcs-builder .pcs-stage-area { position: relative; }
.pcs-builder .pcs-canvas-wrap { display: none; background: #fff; border-radius: 4px; box-shadow: var( --pcs-shadow ); }
.pcs-builder .pcs-canvas-wrap.is-active { display: block; }
/* Fabric must own every touch gesture on the canvas itself — otherwise the
   browser treats a drag as a page/stage scroll and objects can't be moved on
   phones (and the scroll fights Fabric, which feels laggy). The stage margins
   around the canvas still scroll natively when the view is zoomed in. */
.pcs-builder .canvas-container,
.pcs-builder canvas.lower-canvas,
.pcs-builder canvas.upper-canvas { touch-action: none !important; }

/* floating quick actions over the stage when something is selected */
.pcs-builder .pcs-b-quick {
	position: absolute !important; top: 14px !important; right: 14px !important;
	display: none !important;
	gap: 4px !important;
	padding: 4px !important;
	background: var( --pcs-surface ) !important;
	border: 1px solid var( --pcs-line-2 ) !important;
	border-radius: 10px !important;
	box-shadow: var( --pcs-shadow ) !important;
}
.pcs-builder.has-sel .pcs-b-quick { display: flex !important; }

/* ---------- fields ---------- */
.pcs-builder .pcs-field { margin: 14px 0 !important; }
.pcs-builder .pcs-field > .pcs-lab { display: block !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .04em !important; text-transform: uppercase !important; color: var( --pcs-ink-soft ) !important; margin-bottom: 7px !important; }
.pcs-builder .pcs-field input[type=text],
.pcs-builder .pcs-field input[type=search],
.pcs-builder .pcs-field input[type=number],
.pcs-builder .pcs-field input[type=email],
.pcs-builder .pcs-field select,
.pcs-builder .pcs-field textarea,
.pcs-builder .pcs-b-panel__body > input,
.pcs-builder .pcs-b-panel__body > select {
	text-transform: none !important; letter-spacing: normal !important; box-shadow: none !important; text-decoration: none !important; filter: none !important;
	width: 100% !important;
	height: 38px !important;
	padding: 0 10px !important;
	border: 1px solid var( --pcs-line-2 ) !important;
	border-radius: 8px !important;
	background: var( --pcs-surface ) !important;
	color: var( --pcs-ink ) !important;
	font-size: 13.5px !important;
}
.pcs-builder .pcs-field textarea { height: auto !important; padding: 8px 10px !important; resize: vertical !important; }
.pcs-builder .pcs-field input:focus, .pcs-builder .pcs-field select:focus, .pcs-builder .pcs-field textarea:focus { outline: 2px solid var( --pcs-accent ) !important; outline-offset: 0 !important; border-color: var( --pcs-accent ) !important; }
.pcs-builder .pcs-field input[type=color] { width: 100% !important; height: 40px !important; padding: 3px !important; border-radius: 8px !important; border: 1px solid var( --pcs-line-2 ) !important; background: none !important; }
.pcs-builder .pcs-field input[type=range] { height: auto !important; padding: 0 !important; border: 0 !important; background: none !important; }
.pcs-builder .pcs-b-stage-inner { display: flex; align-items: safe center; justify-content: safe center; }
.pcs-builder .pcs-row { display: flex; gap: 10px; }
.pcs-builder .pcs-row > * { flex: 1; }
.pcs-builder .pcs-hint { font-size: 12px; color: var( --pcs-ink-soft ); margin: 8px 0; }
.pcs-builder .pcs-sub { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var( --pcs-ink-soft ); margin: 20px 0 8px; }

/* range with value bubble */
.pcs-builder .pcs-range { display: flex !important; align-items: center !important; gap: 10px !important; }
.pcs-builder .pcs-range input[type=range] { flex: 1 !important; accent-color: var( --pcs-accent ) !important; }
.pcs-builder .pcs-range output { min-width: 40px !important; text-align: right !important; font-size: 12px !important; font-variant-numeric: tabular-nums !important; color: var( --pcs-ink-soft ) !important; }

/* segmented control */
.pcs-builder .pcs-seg { display: flex !important; border: 1px solid var( --pcs-line-2 ) !important; border-radius: 8px !important; overflow: hidden !important; }
.pcs-builder .pcs-seg button {
	text-transform: none !important; letter-spacing: normal !important; box-shadow: none !important; text-decoration: none !important; filter: none !important; flex: 1 !important; height: 36px !important; padding: 0 6px !important; border: 0 !important; border-left: 1px solid var( --pcs-line ) !important; background: var( --pcs-surface ) !important; color: var( --pcs-ink ) !important; cursor: pointer; font-weight: 500 !important; display: grid !important; place-items: center !important; }
.pcs-builder .pcs-seg button:first-child { border-left: 0 !important; }
.pcs-builder .pcs-seg button.is-on { background: var( --pcs-accent ) !important; color: #fff !important; }
.pcs-builder .pcs-seg button svg { width: 16px !important; height: 16px !important; }

/* swatches */
.pcs-builder .pcs-swatches { display: flex; flex-wrap: wrap; gap: 9px; }
.pcs-builder .pcs-swatch {
	text-transform: none !important; letter-spacing: normal !important; box-shadow: none !important; text-decoration: none !important; filter: none !important;
	position: relative !important; width: 32px !important; height: 32px !important; border-radius: 9px !important;
	border: 2px solid #fff !important; box-shadow: 0 0 0 1px var( --pcs-line-2 ) !important;
	cursor: pointer; transition: transform .08s ease, box-shadow .12s ease;
}
.pcs-builder .pcs-swatch:hover { transform: translateY( -1px ) !important; }
.pcs-builder .pcs-swatch.is-on { box-shadow: 0 0 0 2px var( --pcs-accent ) !important; }
.pcs-builder .pcs-swatch.is-on::after {
	content: ""; position: absolute !important; inset: 0 !important; margin: auto !important;
	width: 10px !important; height: 6px !important; border-left: 2px solid #fff !important; border-bottom: 2px solid #fff !important;
	transform: rotate( -45deg ) translateY( -1px ) !important;
	filter: drop-shadow( 0 0 1px rgba( 0, 0, 0, .5 ) ) !important;
}

/* asset / clipart grid */
.pcs-builder .pcs-grid { display: grid; grid-template-columns: repeat( 3, 1fr ); gap: 8px; margin-top: 10px; }
.pcs-builder .pcs-grid--4 { grid-template-columns: repeat( 4, 1fr ); }
.pcs-builder .pcs-tile {
	text-transform: none !important; letter-spacing: normal !important; box-shadow: none !important; text-decoration: none !important; filter: none !important;
	aspect-ratio: 1 / 1 !important;
	padding: 0 !important;   /* a page builder's <button> padding would crush the tile's content box */
	border: 1px solid var( --pcs-line ) !important;
	border-radius: 10px !important;
	/* NOT the `background` shorthand — that would !important-override the inline
	   background-image the JS sets on each image / clipart tile. */
	background-color: var( --pcs-surface ) !important;
	background-position: center !important;
	background-size: 64% !important;
	background-repeat: no-repeat !important;
	cursor: pointer;
	display: grid !important; place-items: center !important;
	font-size: 22px !important; color: var( --pcs-ink ) !important;
	transition: border-color .12s ease, transform .05s ease;
}
.pcs-builder .pcs-tile:hover { border-color: var( --pcs-accent ) !important; }
.pcs-builder .pcs-tile:active { transform: scale( .97 ) !important; }

/* dropzone */
.pcs-builder .pcs-drop {
	border: 2px dashed var( --pcs-line-2 ) !important;
	border-radius: 12px !important;
	padding: 22px 14px !important;
	text-align: center !important;
	color: var( --pcs-ink-soft ) !important;
	cursor: pointer;
	font-size: 13px !important;
}
.pcs-builder .pcs-drop:hover, .pcs-builder .pcs-drop.is-over { border-color: var( --pcs-accent ) !important; color: var( --pcs-accent ) !important; background: color-mix( in srgb, var( --pcs-accent ) 6%, transparent ) !important; }
.pcs-builder .pcs-drop svg { width: 26px !important; height: 26px !important; margin-bottom: 6px !important; }
.pcs-builder .pcs-drop__spin { display: none; width: 22px; height: 22px; margin: 0 auto 8px; border-radius: 50%; border: 3px solid var( --pcs-line-2 ); border-top-color: var( --pcs-accent ); animation: pcs-spin .7s linear infinite; }
.pcs-builder .pcs-drop.is-busy { pointer-events: none !important; opacity: .8 !important; border-color: var( --pcs-accent ) !important; }
.pcs-builder .pcs-drop.is-busy svg, .pcs-builder .pcs-drop.is-busy .pcs-drop__label { display: none !important; }
.pcs-builder .pcs-drop.is-busy .pcs-drop__spin { display: block !important; }
.pcs-builder .pcs-drop.is-busy::after { content: "Uploading…"; display: block !important; font-size: 12px !important; color: var( --pcs-ink-soft ) !important; }

/* layers */
.pcs-builder .pcs-layer {
	text-transform: none !important; letter-spacing: normal !important; box-shadow: none !important; text-decoration: none !important; filter: none !important;
	display: flex !important; align-items: center !important; gap: 4px !important;
	padding: 7px 8px !important;
	border: 1px solid var( --pcs-line ) !important;
	border-radius: 9px !important;
	margin-bottom: 7px !important;
	background: var( --pcs-surface ) !important;
	cursor: pointer;
}
.pcs-builder .pcs-layer:hover { border-color: var( --pcs-line-2 ) !important; }
.pcs-builder .pcs-layer.is-sel { border-color: var( --pcs-accent ) !important; box-shadow: inset 0 0 0 1px var( --pcs-accent ) !important; }
.pcs-builder .pcs-layer__name { flex: 1 1 auto; border: 0; background: none; font-size: 12.5px; color: var( --pcs-ink ); min-width: 0; }
.pcs-builder .pcs-layer__type { flex: 0 0 auto; opacity: .6; }

/* ---------- bottom bar ---------- */
.pcs-builder .pcs-b-bottom {
	flex: 0 0 auto !important;
	display: flex !important; align-items: center; gap: 16px;
	padding: 12px 16px;
	border-top: 1px solid var( --pcs-line );
	background: var( --pcs-surface );
}
.pcs-builder .pcs-b-price { position: relative; }
.pcs-builder .pcs-b-price__amount { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.pcs-builder .pcs-b-price__label { display: block; font-size: 11px; font-weight: 600; color: var( --pcs-ink-soft ); }
.pcs-builder .pcs-b-price__each { font-size: 11px; font-weight: 600; color: var( --pcs-ink-soft ); margin-top: 1px; }
.pcs-builder .pcs-b-price__detail-tot { border-top: 1px solid rgba( 255, 255, 255, .18 ); margin-top: 4px; padding-top: 4px !important; font-weight: 700; }
.pcs-builder .pcs-b-price__detail {
	display: none;
	position: absolute; bottom: 130%; left: 0;
	min-width: 240px;
	background: var( --pcs-ink ); color: #fff;
	border-radius: 10px; padding: 10px 12px;
	font-size: 12px;
	box-shadow: var( --pcs-shadow );
	z-index: 5;
}
.pcs-builder .pcs-b-price:hover .pcs-b-price__detail { display: block; }
.pcs-builder .pcs-b-price__detail div { display: flex; justify-content: space-between; gap: 20px; padding: 2px 0; }
.pcs-builder .pcs-b-quote-note { font-size: 15px; font-weight: 700; color: var( --pcs-ink-soft ); }
.pcs-builder .pcs-b-cta { margin-left: auto !important; display: flex !important; gap: 8px !important; flex-wrap: wrap !important; }

/* ---------- modal + toast ---------- */
.pcs-builder .pcs-modal { position: fixed; inset: 0; background: rgba( 17, 19, 22, .5 ); display: flex; align-items: center; justify-content: center; z-index: 100000; padding: 16px; }
.pcs-builder .pcs-modal__box { background: #fff !important; color: #1c1e21 !important; border-radius: 14px !important; width: min( 460px, 100% ) !important; max-height: 88vh !important; overflow: auto !important; padding: 20px !important; box-shadow: 0 20px 60px rgba( 0, 0, 0, .3 ) !important; }
.pcs-builder .pcs-modal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; font-weight: 700; font-size: 16px; }
.pcs-builder .pcs-quoteform { display: flex; flex-direction: column; gap: 10px; }
.pcs-builder .pcs-designs__row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var( --pcs-line ); }
.pcs-builder .pcs-designs__row img { width: 46px; height: 46px; object-fit: contain; background: var( --pcs-sunken ); border-radius: 6px; }
.pcs-builder .pcs-designs__row span { flex: 1; font-size: 13px; }

.pcs-builder .pcs-toast {
	position: fixed !important; left: 50% !important; bottom: 24px !important; transform: translate( -50%, 16px ) !important;
	background: #1c1e21 !important; color: #fff !important;
	padding: 10px 18px !important; border-radius: 10px !important; font-size: 13.5px !important; font-weight: 500 !important;
	opacity: 0 !important; transition: opacity .22s ease, transform .22s ease;
	z-index: 100001 !important;
	box-shadow: 0 10px 30px rgba( 0, 0, 0, .25 ) !important;
}
.pcs-builder .pcs-toast.is-in { opacity: 1 !important; transform: translate( -50%, 0 ) !important; }
.pcs-builder .pcs-toast--err { background: #c62828 !important; }

/* ============================================================================
   Responsive — laptop (default 3-pane) ▸ tablet (stacked) ▸ phone (compact).
   ========================================================================== */

/* Narrower laptops: slightly slimmer (still identical across tabs). */
@media ( max-width: 1200px ) {
	.pcs-builder { --pcs-panel-w: clamp( 250px, 25vw, 304px ); }
}

@media ( max-width: 960px ) {
	.pcs-builder { --pcs-h: min( 88vh, 780px ); }
}

/* Builder narrower than ~960px (its OWN width, not the viewport): stack stage
   over panel, rail becomes a bottom strip. Keyed to @container so it also fires
   when a theme / page builder drops the builder into a narrow column. */
@container pcs ( max-width: 960px ) {
	.pcs-builder .pcs-b-body { flex-direction: column !important; min-height: 0 !important; overflow: hidden !important; }
	/* stage + panel share the body height; each scrolls inside its own box. */
	.pcs-builder .pcs-b-stagewrap { order: 1 !important; flex: 1 1 52% !important; min-height: 0 !important; }
	.pcs-builder .pcs-b-stage { padding: 16px; }
	.pcs-builder .pcs-b-panel {
		order: 2 !important; flex: 1 1 48% !important;
		width: auto !important; min-width: 0 !important; max-width: none !important;
		min-height: 0 !important;
		border-right: 0; border-top: 1px solid var( --pcs-line );
	}
	.pcs-builder .pcs-b-panel__body { padding-bottom: 14px; }
	.pcs-builder .pcs-b-rail {
		order: 3 !important;
		flex: 0 0 auto !important;
		flex-direction: row !important;
		gap: 4px !important;
		padding: 6px !important;
		border-right: 0 !important; border-top: 1px solid var( --pcs-line ) !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch;
	}
	.pcs-builder .pcs-b-rail button {
		width: auto !important;
		flex: 1 1 0 !important;
		min-width: 66px !important; min-height: 52px !important;
		border-radius: 10px !important;
	}
	.pcs-builder .pcs-b-top { flex-wrap: wrap; row-gap: 8px; }
	.pcs-builder .pcs-b-top__title { max-width: 100%; order: 1; }
	.pcs-builder .pcs-b-top__tools { order: 2; margin-left: auto; }
	.pcs-builder .pcs-b-views { order: 3; width: 100%; margin: 0; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
	.pcs-builder .pcs-b-view { flex: 0 0 auto; }
	.pcs-builder .pcs-b-bottom { flex-wrap: wrap; row-gap: 10px; }
	.pcs-builder .pcs-b-price { width: 100%; }
	.pcs-builder .pcs-b-cta { width: 100% !important; margin-left: 0 !important; }
	.pcs-builder .pcs-b-cta .pcs-btn { flex: 1 1 auto !important; }
}

@media ( max-width: 600px ) {
	.pcs-builder { --pcs-h: 86vh; min-height: 480px; border-radius: 12px; }
	/* Full-screen fills the visible viewport via `inset: 0` (see .pcs-builder--full
	   above) — never a fixed vh height and never the 480px floor, either of which
	   can hide the bottom bar behind the phone's address bar with no way to
	   scroll to it. */
	.pcs-builder--full { min-height: 0 !important; max-height: none !important; }
}

/* Builder narrower than ~600px: full-screen on the phone (editor.js forces it),
   with a slim chrome so the canvas + options area get most of the height. */
@container pcs ( max-width: 600px ) {
	/* compact top bar — title + tools share one row (title truncates), views
	   wrap to a second row. */
	.pcs-builder .pcs-b-top { padding: 5px 10px; gap: 8px; row-gap: 3px; }
	.pcs-builder .pcs-b-top__title { font-size: 13px; flex: 1 1 0; min-width: 0; max-width: none; }
	.pcs-builder .pcs-b-top__tools { gap: 2px; flex: 0 0 auto; }
	.pcs-builder .pcs-b-views { padding: 0; }
	.pcs-builder .pcs-b-view { padding: 3px 10px 3px 3px !important; font-size: 12px !important; }
	.pcs-builder .pcs-b-view img { width: 22px !important; height: 22px !important; }
	/* Full-screen is automatic on a phone, so the manual toggle just confuses. */
	.pcs-builder--full .pcs-b-top__tools .pcs-iconbtn--full { display: none !important; }

	.pcs-builder .pcs-b-stagewrap { flex: 1 1 52% !important; min-height: 160px; }
	/* No native touch-scroll on the phone stage — the canvas fits at 100% and
	   Fabric owns the gesture (drag an object to move it, two fingers to zoom,
	   drag empty space to pan). Native scroll here just fought Fabric. */
	.pcs-builder .pcs-b-stage { padding: 6px; touch-action: none; overscroll-behavior: contain; }
	.pcs-builder .pcs-b-panel { flex: 1 1 48% !important; }
	.pcs-builder .pcs-b-panel__head { padding: 9px 14px 6px; font-size: 13px; }
	.pcs-builder .pcs-b-panel__body { padding: 0 14px 12px; }
	.pcs-builder .pcs-b-panel__body .pcs-field { margin: 9px 0 !important; }
	.pcs-builder .pcs-b-panel__body .pcs-field > .pcs-lab { margin-bottom: 5px !important; }
	.pcs-builder .pcs-b-panel__body .pcs-field input[type=text],
	.pcs-builder .pcs-b-panel__body .pcs-field input[type=number],
	.pcs-builder .pcs-b-panel__body .pcs-field select { height: 38px !important; }

	/* bottom bar: price line, then primary full-width, secondary as a slim row */
	.pcs-builder .pcs-b-bottom { flex-direction: column; align-items: stretch; gap: 6px; padding: 6px 10px 8px; }
	/* Price line: label + amount on one row with a real gap and a clear
	   size/weight hierarchy (they were running together on the phone). */
	.pcs-builder .pcs-b-price { width: 100%; display: block; }
	.pcs-builder .pcs-b-price > div { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 8px; row-gap: 2px; }
	.pcs-builder .pcs-b-price__label { display: inline; font-size: 11px; font-weight: 600; color: var( --pcs-ink-soft ); }
	.pcs-builder .pcs-b-price__amount { font-size: 19px; font-weight: 800; }
	.pcs-builder .pcs-b-price__each { flex-basis: 100%; }
	.pcs-builder .pcs-b-cta {
		width: 100% !important; margin-left: 0 !important;
		display: flex !important; flex-wrap: wrap !important; gap: 6px !important; align-items: center;
	}
	.pcs-builder .pcs-b-cta .pcs-btn--primary { order: -1 !important; flex: 1 1 100% !important; height: 42px !important; min-height: 42px !important; font-size: 15px !important; }
	/* Secondary buttons: equal width, shorter, so the row costs less height. */
	.pcs-builder .pcs-b-cta .pcs-btn--icontext { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; height: 34px !important; min-height: 34px !important; padding: 0 !important; gap: 0 !important; }
	.pcs-builder .pcs-b-cta .pcs-btn--icontext .pcs-btn__label { display: none !important; }
	.pcs-builder .pcs-b-cta .pcs-btn--ghost { flex: 1 1 0 !important; height: 34px !important; min-height: 34px !important; font-size: 13px !important; }

	/* Stage quick-actions: on a phone the reorder / duplicate buttons live in the
	   Layers tab — leave just a bare Delete icon over the canvas, no popup box. */
	.pcs-builder .pcs-b-quick {
		top: 8px !important; right: 8px !important;
		padding: 0 !important; gap: 0 !important;
		background: none !important; border: 0 !important; box-shadow: none !important;
	}
	.pcs-builder .pcs-b-quick .pcs-iconbtn:not( .pcs-iconbtn--trash ) { display: none !important; }
	.pcs-builder .pcs-b-quick .pcs-iconbtn--trash {
		width: 40px !important; height: 40px !important;
		background: var( --pcs-surface ) !important;
		border: 1px solid var( --pcs-line-2 ) !important;
		box-shadow: var( --pcs-shadow ) !important;
		color: #c62828 !important;
	}

	.pcs-builder .pcs-b-rail { padding: 4px !important; }
	.pcs-builder .pcs-b-rail button { min-width: 54px !important; min-height: 44px !important; font-size: 9.5px !important; gap: 2px !important; padding: 4px 3px !important; }
	.pcs-builder .pcs-b-rail button svg { width: 18px !important; height: 18px !important; }
	.pcs-builder .pcs-iconbtn { width: 34px !important; height: 34px !important; }
	.pcs-builder .pcs-iconbtn svg { width: 16px !important; height: 16px !important; }
	.pcs-builder .pcs-zoom button { width: 30px !important; height: 32px !important; }
	.pcs-builder .pcs-zoom span { min-width: 40px !important; line-height: 32px !important; font-size: 11px !important; }
	.pcs-builder .pcs-sizeqty { flex-direction: column; align-items: stretch; }
	.pcs-builder .pcs-sizeqty > label:last-child { align-self: flex-start; }
	.pcs-builder .pcs-modal { padding: 0 !important; align-items: flex-end !important; }
	.pcs-builder .pcs-modal__box { width: 100% !important; max-width: 100% !important; max-height: 92vh !important; border-radius: 16px 16px 0 0 !important; }
}

/* Very small builders. */
@container pcs ( max-width: 380px ) {
	.pcs-builder .pcs-b-views { gap: 4px; }
	.pcs-builder .pcs-b-view { padding: 4px 9px 4px 4px; font-size: 11.5px; }
	.pcs-builder .pcs-b-rail button { min-width: 54px !important; }
	.pcs-builder .pcs-swatch { width: 30px !important; height: 30px !important; }
}

/* Safety net for browsers with no container-query support (pre-2023): fall back
   to viewport width for the stage/panel/rail stack so the layout still works. */
@supports not ( container-type: inline-size ) {
	@media ( max-width: 960px ) {
		.pcs-builder .pcs-b-body { flex-direction: column !important; min-height: 0 !important; overflow: hidden !important; }
		.pcs-builder .pcs-b-stagewrap { order: 1 !important; flex: 1 1 52% !important; min-height: 0 !important; }
		.pcs-builder .pcs-b-panel {
			order: 2 !important; flex: 1 1 48% !important;
			width: auto !important; min-width: 0 !important; max-width: none !important;
			min-height: 0 !important; border-right: 0; border-top: 1px solid var( --pcs-line );
		}
		.pcs-builder .pcs-b-rail {
			order: 3 !important; flex: 0 0 auto !important; flex-direction: row !important;
			gap: 4px !important; padding: 6px !important;
			border-right: 0 !important; border-top: 1px solid var( --pcs-line ) !important;
			overflow-x: auto !important;
		}
		.pcs-builder .pcs-b-rail button { width: auto !important; flex: 1 1 0 !important; min-width: 66px !important; min-height: 52px !important; }
		.pcs-builder .pcs-b-cta { width: 100% !important; margin-left: 0 !important; }
	}
}

/* Coarse pointer (touch): roomier hit areas regardless of width. */
@media ( pointer: coarse ) {
	.pcs-builder .pcs-btn { min-height: 40px !important; }
	.pcs-builder .pcs-iconbtn { min-width: 38px !important; min-height: 38px !important; }
	.pcs-builder .pcs-layer { padding: 10px !important; }
}

/* ---------- dark mode (only if the theme opts in) ---------- */
@media ( prefers-color-scheme: dark ) {
	.pcs-builder[data-theme="auto"] {
		--pcs-bg: #17191c; --pcs-surface: #1e2125; --pcs-sunken: #131417;
		--pcs-line: #2b2f35; --pcs-line-2: #3a3f47;
		--pcs-ink: #e8eaed; --pcs-ink-soft: #9aa0a6;
	}
	.pcs-builder[data-theme="auto"] .pcs-canvas-wrap { background: #fff; }
}