/* Label designer — only the rules that cannot be inline: the hover reveals on
   the drag handles, and the 1100px stack. Everything else is inline, exactly
   as in the approved design. */

.lbe-wiz-page [data-print-area] span[title] {
	opacity: 0.85;
	transition: opacity 150ms ease;
}

.lbe-wiz-page [data-print-area] span[title]:hover {
	opacity: 1;
}

.lbe-wiz-page [data-print-area] [role="img"] > span[role="button"] {
	opacity: 0;
	transition: opacity 150ms ease;
}

.lbe-wiz-page [data-print-area] [role="img"]:hover > span[role="button"] {
	opacity: 1;
}

.lbe-wiz-page label[style*="dashed"]:hover {
	border-color: var(--color-accent) !important;
}

.lbe-wiz-page [data-open-proof]:hover,
.lbe-wiz-page [data-send]:hover {
	background: var(--color-accent-300) !important;
}

.lbe-wiz-page [data-clear-logo]:hover,
.lbe-wiz-page [data-download-proof]:hover,
.lbe-wiz-page [data-download-logo]:hover,
.lbe-wiz-page [data-eyedropper]:hover {
	border-color: var(--color-accent) !important;
}

.lbe-wiz-page [data-close-proof]:hover {
	background: var(--color-neutral-200) !important;
}

.lbe-wiz-page .input {
	font-family: var(--font-body);
}

@media (max-width: 1100px) {
	.lbe-san-page [data-m="labelwrap"] {
		padding-left: 0 !important;
		align-items: center !important;
	}

	/* Both designers kept their 32px desktop side padding on phones/tablets,
	   which shrank the bottle/tube and label. */
	.lbe-wiz-page #lbe-wizard,
	.lbe-wiz-page #lbe-sanitizer {
		padding: 20px 16px !important;
		gap: 24px !important;
	}

	.lbe-wiz-page [data-m="proofbar"] {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 14px !important;
		padding: 16px 18px !important;
	}

	.lbe-wiz-page [data-m="labelpane"] {
		padding: 22px 16px 26px !important;
		gap: 22px !important;
	}

	.lbe-wiz-page [data-m="labelbox"] {
		width: 100% !important;
	}

	.lbe-wiz-page [data-m="modal"] {
		padding: 22px 18px 24px !important;
	}

	.lbe-wiz-page [data-m="mgrid"] {
		grid-template-columns: 1fr !important;
	}

	.lbe-wiz-page [data-m="nosticky"] {
		position: static !important;
	}
}

/* --- Small phones: 390px and down ---------------------------------------- */
@media (max-width: 430px) {
	[data-page].lbe-wiz-page,
	.lbe-wiz-page #lbe-wizard,
	.lbe-wiz-page #lbe-sanitizer {
		padding-left: 14px !important;
		padding-right: 14px !important;
	}

	.lbe-wiz-page [data-m="proofbar"] {
		padding: 16px 14px !important;
	}

	.lbe-wiz-page [data-m="labelpane"] {
		padding: 16px 12px 20px !important;
		gap: 18px !important;
	}

	/* The label stays big enough to drag on: no side gutters from the dieline. */
	.lbe-wiz-page [data-m="labelbox"] {
		width: 100% !important;
	}

	.lbe-wiz-page [data-m="modal"] {
		padding: 18px 14px 20px !important;
		border-radius: var(--radius-lg) !important;
	}

	.lbe-wiz-page [data-proof-modal] {
		padding: 14px 10px !important;
	}

	/* Every tap target clears 44px. */
	.lbe-wiz-page button,
	.lbe-wiz-page .btn,
	.lbe-wiz-page input,
	.lbe-wiz-page select,
	.lbe-wiz-page textarea {
		min-height: 44px;
	}

	.lbe-wiz-page [data-line-colors] button,
	.lbe-wiz-page [data-font-cats] button,
	.lbe-wiz-page [data-undo],
	.lbe-wiz-page [data-clear-rule],
	.lbe-wiz-page [data-copy-specs] {
		min-height: 0;
	}

	/* Colour dots get a little bigger so a thumb can hit them. */
	.lbe-wiz-page [data-line-colors] button[aria-label] {
		width: 26px !important;
		height: 26px !important;
	}

	.lbe-wiz-page [data-qty] {
		width: 100% !important;
	}

	.lbe-wiz-page [data-send] {
		width: 100%;
	}

	/* Two- and three-across grids inside the panel go single file. */
	.lbe-wiz-page [data-rules] {
		grid-template-columns: 1fr 1fr !important;
	}

	.lbe-wiz-page [data-fonts] {
		max-height: 260px !important;
	}
}

/* Phones: show the label as big as the screen allows (it was ~half width,
   which made text tiny and hard to grab). */
@media (max-width: 700px) {
	.lbe-wiz-page div:has(> [data-m="labelbox"]) {
		grid-template-columns: 1fr !important;
		column-gap: 0 !important;
	}
	.lbe-wiz-page div:has(> [data-m="labelbox"]) > div:empty {
		display: none !important;
	}
	.lbe-wiz-page [data-m="labelbox"] {
		width: 100% !important;
		max-width: 420px;
	}
	.lbe-wiz-page [data-m="labelpane"] {
		padding-left: 8px !important;
		padding-right: 8px !important;
	}
}
.lbe-hint-touch { display: none; }
@media (pointer: coarse) {
	.lbe-hint-desk { display: none; }
	.lbe-hint-touch { display: inline; }
}

/* ---------------------------------------------------------------------------
   Phones: app-style designer. The label stays pinned at the top of the
   screen while you scroll through the steps below it, so you always see what
   you're changing (like the big t-shirt designers). Edit tools pop up at the
   bottom. Space-wasting extras (tube drawing, captions) are hidden here.
   ------------------------------------------------------------------------ */
@media (max-width: 700px) {
	.lbe-wiz-page #lbe-wizard [data-screen-label="Live preview"],
	.lbe-wiz-page #lbe-sanitizer [data-screen-label="Live preview"] {
		position: sticky !important;
		top: var(--lbe-sticky-top, 0px) !important;
		z-index: 30;
		gap: 0 !important;
		background: var(--color-bg, #faf7f2);
		padding-bottom: 6px;
		box-shadow: 0 10px 14px -12px rgba(0, 0, 0, 0.35);
	}
	.lbe-wiz-page [data-screen-label="Live preview"] > p,
	.lbe-wiz-page [data-m="labelpane"] > div[style*="aspect-ratio: 2.75"],
	.lbe-wiz-page [data-m="labelpane"] > span,
	.lbe-wiz-page div:has(> [data-m="labelbox"]) > span {
		display: none !important;
	}
	.lbe-wiz-page [data-m="labelpane"] {
		padding: 8px !important;
		gap: 8px !important;
		border-radius: 14px !important;
	}
	/* Fit the label in ~42% of the screen height, whatever the phone. */
	.lbe-wiz-page [data-m="labelbox"] {
		width: min(100%, calc(42vh * 1.75 / 2)) !important;
		margin: 0 auto !important;
	}
}

/* ---------------------------------------------------------------------------
   Phones: step tabs at the bottom (wizard-tabs.js). Only the chosen step
   shows under the pinned label.
   ------------------------------------------------------------------------ */
[data-lbe-tabbar] { display: none; }
@media (max-width: 700px) {
	html.lbe-tabbed [data-screen-label="Controls"] > [data-tab]:not(.is-on) {
		display: none !important;
	}
	html.lbe-tabbed [data-screen-label="Controls"] {
		gap: 22px !important;
		min-height: 52vh;
	}
	html.lbe-tabbed body {
		padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
	}
	html.lbe-tabbed [data-lbe-tabbar] {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2147482000;
		background: #fff;
		border-top: 1px solid #e6e1d8;
		box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.08);
		padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
	}
	html.lbe-tabbed.lbe-editing [data-lbe-tabbar] { display: none; }
	[data-lbe-tabbar] button {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 3px;
		border: 0;
		background: none;
		padding: 6px 0 4px;
		border-radius: 12px;
		color: #6b6459;
		font: 700 11.5px/1 var(--font-body, sans-serif);
		touch-action: manipulation;
	}
	[data-lbe-tabbar] button .ic { font-size: 19px; line-height: 1; }
	[data-lbe-tabbar] button.is-on { color: #1a4e7e; background: #eef3f9; }
	[data-lbe-tabbar] button .ok {
		position: absolute;
		top: 2px;
		right: 18%;
		color: #2e7d3a;
		font-size: 12px;
		font-weight: 800;
	}
	.lbe-tab-next {
		margin-top: 6px;
		align-self: stretch;
		border: 0;
		border-radius: 999px;
		background: #1a4e7e;
		color: #fff;
		font: 800 15px/1 var(--font-body, sans-serif);
		padding: 15px;
	}
}
@media (min-width: 701px) {
	.lbe-tab-next { display: none; }
}

/* Phones, round 2: give the controls room under the pinned label. */
@media (max-width: 700px) {
	.lbe-wiz-page [data-m="labelbox"] {
		width: min(100%, calc(44vh * 0.875)) !important;
		width: min(100%, calc(44svh * 0.875)) !important;
	}
	html.lbe-typing .lbe-wiz-page [data-m="labelbox"],
	html.lbe-typing [data-m="labelbox"] {
		width: min(100%, calc(27vh * 0.875)) !important;
		width: min(100%, calc(27svh * 0.875)) !important;
	}
	/* "Starting from design" bar: one slim row instead of a big box. */
	.lbe-wiz-page [data-bg-banner]:not([hidden]) {
		flex-wrap: nowrap !important;
		gap: 8px !important;
		padding: 6px 10px !important;
		justify-content: space-between !important;
	}
	.lbe-wiz-page [data-bg-banner] [data-bg-label] {
		font-size: 12px !important;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		min-width: 0;
		flex: 1 1 auto;
	}
	.lbe-wiz-page [data-bg-banner] button {
		font-size: 11.5px !important;
		white-space: nowrap;
		flex: 0 0 auto;
		padding: 3px 8px !important;
	}
	html.lbe-tabbed [data-lbe-tabbar] {
		grid-auto-columns: minmax(0, 1fr);
	}
	[data-lbe-tabbar] button { font-size: 11px; gap: 2px; padding: 5px 0 3px; }
	[data-lbe-tabbar] button .ic { display: flex; height: 22px; align-items: center; }
}
@media (max-width: 700px) {
	.lbe-wiz-page [data-bg-banner] [data-clear-bg] { font-size: 0 !important; }
	.lbe-wiz-page [data-bg-banner] [data-clear-bg]::after { content: 'Remove'; font-size: 11.5px; }
}
@media (max-width: 700px) {
	/* When the phone scrolls a field into view for typing, keep it below the pinned label. */
	html.lbe-tabbed [data-screen-label="Controls"] input,
	html.lbe-tabbed [data-screen-label="Controls"] textarea,
	html.lbe-tabbed [data-screen-label="Controls"] select {
		scroll-margin-top: calc(var(--lbe-sticky-top, 0px) + 36vh);
		scroll-margin-bottom: 90px;
	}
}

/* ---------------------------------------------------------------------------
   Phones, designer pages: app-style slim top bar + label gets the room.
   (Rest of the site keeps the normal header.)
   ------------------------------------------------------------------------ */
.lbe-call-mini { display: none; }
@media (max-width: 700px) {
	body.tpl-tpl-design-a-label .lbe-announce,
	body.tpl-tpl-design-a-label-sanitizer .lbe-announce,
	body.tpl-tpl-design-a-label .lbe-navrow,
	body.tpl-tpl-design-a-label-sanitizer .lbe-navrow {
		display: none !important;
	}
	body.tpl-tpl-design-a-label .lbe-header-top,
	body.tpl-tpl-design-a-label-sanitizer .lbe-header-top {
		padding-top: 6px !important;
		padding-bottom: 6px !important;
		min-height: 0 !important;
	}
	body.tpl-tpl-design-a-label .lbe-brandmark,
	body.tpl-tpl-design-a-label-sanitizer .lbe-brandmark {
		width: 96px !important;
		height: auto !important;
	}
	body.tpl-tpl-design-a-label .lbe-call-mini,
	body.tpl-tpl-design-a-label-sanitizer .lbe-call-mini {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		font-weight: 800;
		font-size: 14px;
		color: #1a4e7e;
		text-decoration: none;
		padding: 6px 10px;
		border-radius: 999px;
		border: 1.5px solid #cfd9e6;
	}
	body.tpl-tpl-design-a-label .lbe-header-actions,
	body.tpl-tpl-design-a-label-sanitizer .lbe-header-actions {
		gap: 8px !important;
	}

	/* No card around the label: it sits edge to edge. */
	.lbe-wiz-page [data-m="labelpane"] {
		position: relative;
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		padding: 4px 0 !important;
		gap: 0 !important;
	}

	/* Design name / lock: a small chip on the label's corner, not its own row. */
	.lbe-wiz-page [data-m="labelpane"] [data-bg-banner]:not([hidden]) {
		position: absolute !important;
		top: 10px;
		left: 50%;
		transform: translateX(-50%);
		z-index: 6;
		width: auto !important;
		max-width: 96%;
		padding: 3px 4px 3px 10px !important;
		gap: 6px !important;
		border-radius: 999px !important;
		background: rgba(255, 246, 232, 0.94) !important;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	}
	.lbe-wiz-page [data-bg-banner] [data-bg-label] {
		font-size: 11px !important;
		max-width: 110px;
	}
	.lbe-wiz-page [data-bg-banner] button {
		font-size: 11px !important;
		padding: 3px 7px !important;
	}
	.lbe-wiz-page [data-bg-banner] [data-clear-bg]::after { font-size: 11px; }
}