/**
 * Howell Design Editor — shell.
 *
 * Howell's own visual identity, deliberately. The LAYOUT follows the conventions a print-design
 * editor has to follow (tool rail, contextual panel, centre canvas, guides, zoom) because those
 * are how the job is done; the palette, iconography and type are ours, because this ships to
 * competitors of the sites we studied.
 */

/* 🚨 `max-width` still constrains a position:fixed element — `inset:0` sets left/right, but a
   max-width from the host theme wins over the resulting width. The theme caps prose children at a
   42rem reading measure, which pinned the whole editor to 672px with the storefront visible
   beside it. The editor must be immune to whatever container it is dropped into. */
.hpe,
#hpp-editor.hpe {
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* A full-screen editor with the shop's header behind it is two interfaces at once. */
body.hpe-open { overflow: hidden; }

body.hpe-open > header,
body.hpe-open > footer,
body.hpe-open .wp-site-blocks > header,
body.hpe-open .wp-site-blocks > footer { display: none; }

.hpe {
	--hpe-bg: #f4f6f9;
	--hpe-chrome: #ffffff;
	--hpe-line: #d8e3f0;
	--hpe-ink: #10233d;
	--hpe-muted: #5a6b80;
	--hpe-brand: #0c48a8;
	--hpe-rail: 84px;
	--hpe-panel: 288px;

	position: fixed;
	inset: 0;
	display: flex;
	flex-direction: column;
	background: var(--hpe-bg);
	color: var(--hpe-ink);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	z-index: 999;
}

/* ---------------------------------------------------------------- top bar */

.hpe-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	height: 56px;
	padding: 0 16px;
	background: var(--hpe-chrome);
	border-bottom: 1px solid var(--hpe-line);
	flex: 0 0 auto;
}

.hpe-product { font-weight: 700; font-size: 15px; }

.hpe-top-mid { display: flex; gap: 4px; }

.hpe-top-right { display: flex; align-items: center; gap: 12px; }

.hpe-price { font-weight: 700; font-size: 15px; }

.hpe-icon {
	width: 34px; height: 34px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid transparent;
	border-radius: 8px;
	background: transparent;
	color: var(--hpe-ink);
	font-size: 17px;
	cursor: pointer;
}

.hpe-icon:hover:not([disabled]) { background: #eef3f9; }
.hpe-icon[disabled] { opacity: 0.35; cursor: default; }

.hpe-ghost {
	border: 1px solid var(--hpe-line);
	background: #fff;
	color: var(--hpe-ink);
	border-radius: 8px;
	padding: 8px 14px;
	font-size: 14px;
	cursor: pointer;
}

.hpe-ghost:hover { border-color: var(--hpe-brand); }

.hpe-next {
	border: 0;
	border-radius: 8px;
	padding: 9px 22px;
	background: var(--hpe-brand);
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
}

/* ---------------------------------------------------------------- body */

.hpe-body { flex: 1 1 auto; display: flex; min-height: 0; }

/* ---- tool rail ---- */

.hpe-rail {
	flex: 0 0 var(--hpe-rail);
	background: var(--hpe-chrome);
	border-right: 1px solid var(--hpe-line);
	padding: 8px 0;
	overflow-y: auto;
}

.hpe-tool {
	width: 100%;
	border: 0;
	background: transparent;
	padding: 10px 4px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	cursor: pointer;
	color: var(--hpe-muted);
	font-size: 11px;
	line-height: 1.2;
	text-align: center;
}

.hpe-tool svg {
	width: 22px; height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.hpe-tool:hover { color: var(--hpe-ink); background: #f6f9fc; }

.hpe-tool.is-active { color: var(--hpe-brand); background: #eaf2fb; }

/* ---- contextual panel ---- */

.hpe-panel {
	flex: 0 0 var(--hpe-panel);
	background: var(--hpe-chrome);
	border-right: 1px solid var(--hpe-line);
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.hpe-panel[hidden] { display: none; }

.hpe-panel-head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 14px 16px;
	border-bottom: 1px solid var(--hpe-line);
}

.hpe-panel-head h2 { margin: 0; font-size: 16px; }

.hpe-panel-body { padding: 16px; overflow-y: auto; }

.hpe-soon { color: var(--hpe-muted); font-size: 14px; margin: 0; }

/* ---- stage ---- */

.hpe-stage {
	flex: 1 1 auto;
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.hpe-chips {
	position: absolute;
	top: 12px; right: 16px;
	display: flex; gap: 8px;
	z-index: 2;
}

.hpe-chip {
	border: 1px solid var(--hpe-line);
	background: #fff;
	border-radius: 999px;
	padding: 5px 13px;
	font-size: 12px;
	color: var(--hpe-muted);
	cursor: pointer;
}

/* An overlay that is ON is stated positively — the chip is the legend for the guide colour. */
.hpe-chip.is-on { color: var(--hpe-ink); border-color: var(--hpe-brand); background: #eaf2fb; }

.hpe-viewport {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: auto;
	min-height: 0;
	padding: 48px;
}

.hpe-canvaswrap { position: relative; }

.hpe-canvas {
	display: block;
	background: #fff;
	box-shadow: 0 2px 14px rgba(16, 35, 61, 0.14);
	/* Handles on a full-bleed element sit outside the viewBox; an SVG clips to it by default and
	   they became unclickable. Artwork is clipped by its own group instead. */
	overflow: visible;
}

/* ---- print guides ----
   Weights are in screen px via vector-effect so they stay hairline at every zoom — a guide that
   thickens as you zoom in stops being a guide and starts hiding the artwork under it. */

.hpe-guides * { vector-effect: non-scaling-stroke; }

/* The halo sits under every guide so the line reads on artwork of any colour. */
.hpe-g-halo  { stroke: rgba(255, 255, 255, 0.9); stroke-width: 3.5; }

.hpe-g-bleed { stroke: #6b7c93; stroke-width: 1; stroke-dasharray: 2 3; }

.hpe-g-trim  { stroke: var(--hpe-brand); stroke-width: 1.5; }

.hpe-g-safe  { stroke: #1f9d55; stroke-width: 1; stroke-dasharray: 5 4; }

/* ---- rulers ---- */

.hpe-ruler {
	position: absolute;
	color: var(--hpe-muted);
	font-size: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.hpe-ruler-w {
	left: 0; bottom: -30px; height: 20px;
	border-top: 1px solid var(--hpe-line);
}

.hpe-ruler-h {
	top: 0; left: -46px; width: 20px;
	border-right: 1px solid var(--hpe-line);
	writing-mode: vertical-rl;
}

/* ---- zoom ---- */

.hpe-zoom {
	position: absolute;
	bottom: 14px; left: 50%;
	transform: translateX(-50%);
	display: flex; align-items: center; gap: 6px;
	background: #fff;
	border: 1px solid var(--hpe-line);
	border-radius: 999px;
	padding: 5px 8px;
	box-shadow: 0 2px 10px rgba(16, 35, 61, 0.1);
	z-index: 2;
}

.hpe-zoomval { font-size: 13px; min-width: 46px; text-align: center; }

.hpe-fit { padding: 5px 12px; font-size: 13px; }

.hpe-error { padding: 24px; color: #8a1c13; }

/* ---------------------------------------------------------------- small screens */

@media (max-width: 780px) {
	.hpe { --hpe-rail: 68px; --hpe-panel: 100%; }

	.hpe-panel {
		position: absolute;
		inset: 56px 0 0 var(--hpe-rail);
		z-index: 3;
	}

	.hpe-viewport { padding: 28px; }

	.hpe-tool span { font-size: 10px; }
}

/* ---------------------------------------------------------------- selection + transform */

.hpe-canvas [data-el] { cursor: move; }

.hpe-selbox {
	stroke: var(--hpe-brand);
	stroke-width: 1.5;
	stroke-dasharray: 4 3;
	vector-effect: non-scaling-stroke;
}

.hpe-handle {
	fill: #fff;
	stroke: var(--hpe-brand);
	stroke-width: 1.5;
	vector-effect: non-scaling-stroke;
}

.hpe-rotline {
	stroke: var(--hpe-brand);
	stroke-width: 1.5;
	vector-effect: non-scaling-stroke;
}

/* Cursors name the axis each handle moves, so the affordance is readable before the drag. */
[data-handle="nw"], [data-handle="se"] { cursor: nwse-resize; }
[data-handle="ne"], [data-handle="sw"] { cursor: nesw-resize; }
[data-handle="n"],  [data-handle="s"]  { cursor: ns-resize; }
[data-handle="e"],  [data-handle="w"]  { cursor: ew-resize; }
[data-handle="rotate"] { cursor: grab; }

/* Snap lines are magenta because every other guide on this canvas is blue or green — a snap
   indicator that shares a colour with the safe area reads as the safe area moving. */
.hpe-snapline {
	stroke: #d6199b;
	stroke-width: 1;
	stroke-dasharray: 3 3;
	vector-effect: non-scaling-stroke;
}

.hpe-selinfo {
	position: absolute;
	bottom: 14px; left: 16px;
	display: flex; gap: 14px;
	background: #fff;
	border: 1px solid var(--hpe-line);
	border-radius: 8px;
	padding: 6px 12px;
	font-size: 12px;
	color: var(--hpe-muted);
	font-variant-numeric: tabular-nums;
	z-index: 2;
}

.hpe-selinfo[hidden] { display: none; }

.hpe-selinfo span:first-child { color: var(--hpe-ink); font-weight: 700; text-transform: capitalize; }

/* ---------------------------------------------------------------- tool panels */

.hpe-f { display: block; margin-bottom: 16px; }
.hpe-f > span { display: block; font-size: 12px; font-weight: 700; margin-bottom: 6px; }

.hpe-input {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--hpe-line);
	border-radius: 8px;
	padding: 8px 10px;
	font: inherit;
	font-size: 14px;
	background: #fff;
	color: var(--hpe-ink);
}

textarea.hpe-input { resize: vertical; }

.hpe-primary {
	border: 0;
	border-radius: 8px;
	background: var(--hpe-brand);
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	padding: 10px 16px;
	cursor: pointer;
}

.hpe-block { display: block; width: 100%; box-sizing: border-box; margin-bottom: 10px; }

.hpe-seg { display: flex; border: 1px solid var(--hpe-line); border-radius: 8px; overflow: hidden; }

.hpe-seg button {
	flex: 1;
	border: 0;
	background: #fff;
	padding: 8px 4px;
	font-size: 13px;
	text-transform: capitalize;
	cursor: pointer;
	color: var(--hpe-muted);
}

.hpe-seg button.is-on { background: var(--hpe-brand); color: #fff; }

/* ---- swatches ---- */

.hpe-swatches { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }

.hpe-swatch {
	aspect-ratio: 1;
	border: 1px solid var(--hpe-line);
	border-radius: 6px;
	cursor: pointer;
	padding: 0;
}

.hpe-swatch.is-on { outline: 2px solid var(--hpe-brand); outline-offset: 1px; }

/* ---- uploads ---- */

.hpe-file { width: 100%; font-size: 13px; margin-bottom: 14px; }

.hpe-up {
	border: 1px solid var(--hpe-line);
	border-radius: 8px;
	padding: 10px;
	margin-bottom: 10px;
	display: flex;
	flex-direction: column;
	gap: 7px;
}

/* A failed check is stated on the card itself, not hidden behind a tooltip. */
.hpe-up.is-bad { border-color: #e6b0aa; background: #fdf6f5; }

.hpe-up img { width: 100%; height: 110px; object-fit: contain; background: #f4f6f9; border-radius: 6px; }

.hpe-upname { font-size: 13px; font-weight: 700; word-break: break-all; }

.hpe-finding { font-size: 12px; line-height: 1.35; }
.hpe-finding.is-fail { color: #8a1c13; font-weight: 700; }
.hpe-finding.is-warn { color: #8a5a00; }
.hpe-finding.is-info { color: var(--hpe-muted); }

/* ---- layers ---- */

.hpe-layer {
	display: flex; align-items: center; gap: 6px;
	padding: 7px 8px;
	border: 1px solid var(--hpe-line);
	border-radius: 8px;
	margin-bottom: 6px;
	cursor: pointer;
	font-size: 13px;
}

.hpe-layer > span:first-child { flex: 1; text-transform: capitalize; }
.hpe-layer.is-on { border-color: var(--hpe-brand); background: #eaf2fb; }
.hpe-layer .hpe-icon { width: 26px; height: 26px; font-size: 14px; }

/* ---------------------------------------------------------------- product options drawer */

/* The canvas stays visible behind the scrim — the whole point of these controls is watching
   the design adapt to them. */
.hpe-scrim {
	position: absolute;
	inset: 56px 0 0 0;
	background: rgba(16, 35, 61, 0.45);
	z-index: 5;
}

.hpe-drawer {
	position: absolute;
	top: 56px; right: 0; bottom: 0;
	width: min(420px, 92vw);
	background: var(--hpe-chrome);
	border-left: 1px solid var(--hpe-line);
	display: flex;
	flex-direction: column;
	z-index: 6;
	box-shadow: -8px 0 28px rgba(16, 35, 61, 0.16);
}

.hpe-drawer-head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 16px 18px;
	border-bottom: 1px solid var(--hpe-line);
}

.hpe-drawer-head h2 { margin: 0; font-size: 20px; }

.hpe-drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 18px; }

.hpe-drawer-foot { padding: 14px 18px; border-top: 1px solid var(--hpe-line); }

.hpe-drawer-price {
	display: flex; align-items: baseline; gap: 8px;
	margin: 6px 0 20px;
}

.hpe-drawer-price strong { font-size: 24px; }
.hpe-drawer-price span { font-size: 13px; color: var(--hpe-muted); }

.hpe-optgroup {
	font-size: 13px;
	font-weight: 700;
	margin: 22px 0 10px;
	text-transform: none;
}

.hpe-optgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.hpe-opt {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	border: 1px solid var(--hpe-line);
	border-radius: 10px;
	background: #fff;
	padding: 12px 14px;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	color: var(--hpe-ink);
	cursor: pointer;
	text-align: left;
}

.hpe-opt small { font-weight: 400; font-size: 12px; color: var(--hpe-muted); }

.hpe-opt.is-on {
	border-color: var(--hpe-brand);
	background: #eaf2fb;
	box-shadow: inset 0 0 0 1px var(--hpe-brand);
}

/* Unavailable is shown, not hidden: the customer can see what the shop does, and why this one
   is not offered right now. */
.hpe-opt.is-off {
	background: #f4f6f9;
	color: #9aa7b6;
	cursor: not-allowed;
	border-style: dashed;
}

.hpe-opt.is-off .hpe-shapeicon { stroke: #b6c0cc; }

.hpe-shapeicon {
	width: 40px; height: 30px;
	fill: none;
	stroke: var(--hpe-ink);
	stroke-width: 2;
}

.hpe-opt.is-on .hpe-shapeicon { stroke: var(--hpe-brand); }

.hpe-next[disabled] { opacity: 0.45; cursor: default; }

@media (max-width: 780px) {
	.hpe-drawer { width: 100%; }
}

.hpe-pricenote { margin-top: 12px; line-height: 1.45; }

/* ---------------------------------------------------------------- review + approve */

.hpe-scrim-full { inset: 0; z-index: 8; }

.hpe-review {
	position: absolute;
	inset: 0;
	z-index: 9;
	display: grid;
	grid-template-columns: 1fr min(440px, 42vw);
	/* ⚠️ Without an explicit row track the grid row sizes to its CONTENT, so the stage grew past
	   the modal and pushed the side toggle off screen. minmax(0,1fr) bounds it to the container
	   and lets the children actually shrink. */
	grid-template-rows: minmax(0, 1fr);
	background: var(--hpe-chrome);
}

.hpe-review-stage {
	background: #eef1f5;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	padding: 32px;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
}

.hpe-review-hint { margin: 0; font-size: 13px; color: var(--hpe-muted); }

.hpe-review-mount {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 0;
	overflow: hidden;
}

/* The product reads as a physical object: correct silhouette, a shadow that follows the cut, and
   a slight lift. For flat stock that is everything a rotation would tell you.
   ⚠️ The cloned SVG has its width/height stripped so it can scale — which means it collapses to
   nothing unless BOTH it and its wrapper are given a concrete box. preserveAspectRatio then
   letterboxes the artwork inside that box at its true proportions. */
.hpe-preview {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
}

.hpe-preview-svg {
	position: relative;
	display: block;
	max-width: 100%;
	max-height: 100%;
	filter: drop-shadow(0 10px 22px rgba(16, 35, 61, 0.22));
}

.hpe-preview-shadow { display: none; }

.hpe-review-sides { max-width: 220px; }

.hpe-review-panel { display: flex; flex-direction: column; border-left: 1px solid var(--hpe-line); min-height: 0; }

.hpe-review-head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 18px 20px; border-bottom: 1px solid var(--hpe-line);
}

.hpe-review-head h2 { margin: 0; font-size: 22px; }

.hpe-review-body { flex: 1 1 auto; overflow-y: auto; padding: 20px; }

.hpe-checklist { margin: 14px 0 0; padding-left: 1.1em; }
.hpe-checklist li { margin-bottom: 9px; font-size: 15px; }

.hpe-review-foot { padding: 16px 20px; border-top: 1px solid var(--hpe-line); }

.hpe-approve {
	display: flex; align-items: flex-start; gap: 10px;
	margin-bottom: 14px; font-size: 15px; cursor: pointer;
}

.hpe-approve input { margin-top: 3px; width: 18px; height: 18px; }

.hpe-review-error { margin: 0 0 12px; }

@media (max-width: 900px) {
	.hpe-review { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
	.hpe-review-panel { border-left: 0; border-top: 1px solid var(--hpe-line); max-height: 58vh; }
	.hpe-preview-svg { max-height: 34vh; }
}

/* A link styled as a button still needs to look clickable as a block.
   ⚠️ border-box, or the padding is ADDED to a 100%-wide block and it overflows its panel. */
.hpe-linkbtn {
	display: block;
	box-sizing: border-box;
	text-align: center;
	text-decoration: none;
	margin-top: 6px;
}

/* Front/Back switch in the top bar. Only rendered on a two-sided job. */
.hpe-sideswitch {
	display: inline-flex;
	margin-right: 10px;
	border: 1px solid #d7dbe0;
	border-radius: 4px;
	overflow: hidden;
}

.hpe-sideswitch button {
	appearance: none;
	border: 0;
	background: #fff;
	color: #33383d;
	font: inherit;
	font-size: .85rem;
	font-weight: 600;
	padding: 6px 14px;
	cursor: pointer;
	line-height: 1.2;
}

.hpe-sideswitch button + button { border-left: 1px solid #d7dbe0; }

.hpe-sideswitch button.is-on {
	background: #0b5c8a;
	color: #fff;
}

.hpe-sideswitch button:disabled { opacity: .45; cursor: not-allowed; }