/**
 * Bold Print Shop Toolkit - front end.
 * Inherits the theme's brand tokens when present, with its own fallbacks so
 * the plugin still looks right on any theme.
 */
.bpt-artwork,
.bpt-tiers,
.bpt-finishes,
.bpt-live,
.bpt-guidelines,
.bpt-mockup,
.bpt-gs {
	--bpt-primary: var(--bp-primary, #1e4290);
	--bpt-secondary: var(--bp-secondary, #3f7ad6);
	--bpt-accent: var(--bp-accent, #ffd400);
	--bpt-lime: var(--bp-lime, #b6ff3c);
	--bpt-ink: var(--bp-ink, #0b0b14);
	--bpt-line: var(--bp-line, 3px);
	--bpt-radius: var(--bp-radius, 18px);
	font-family: inherit;
}

/* ==========================================================================
   Artwork upload
   ========================================================================== */
.bpt-artwork {
	margin: 0 0 20px;
	clear: both;
}

.bpt-artwork__head {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 10px;
	flex-wrap: wrap;
}

.bpt-artwork__head strong {
	font-size: 1.05rem;
	text-transform: uppercase;
	letter-spacing: .01em;
}

.bpt-req {
	background: var(--bpt-primary);
	color: #fff;
	border-radius: 999px;
	padding: 3px 10px;
	font-size: .72rem;
	font-weight: 800;
	text-transform: uppercase;
}

.bpt-opt {
	color: #6b6b7b;
	font-size: .85rem;
	font-weight: 600;
}

.bpt-drop {
	display: flex;
	align-items: center;
	gap: 16px;
	border: var(--bpt-line) dashed var(--bpt-ink);
	border-radius: var(--bpt-radius);
	background: #fff;
	padding: 20px;
	cursor: pointer;
	transition: background .15s ease, transform .1s ease;
}

.bpt-drop:hover,
.bpt-drop:focus,
.bpt-drop.is-over {
	background: var(--bpt-accent);
	transform: translateY(-2px);
}

.bpt-drop__icon {
	font-size: 1.6rem;
	background: var(--bpt-ink);
	color: #fff;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.bpt-drop__text strong { display: block; font-size: 1rem; }
.bpt-drop__text small { color: #6b6b7b; font-weight: 600; }
.bpt-drop input[type="file"] { display: none; }

.bpt-artwork__status { margin-top: 12px; font-weight: 600; }
.bpt-artwork__status.is-busy { color: #6b6b7b; }
.bpt-artwork__status.is-error {
	background: #ffe1ea;
	border: var(--bpt-line) solid var(--bpt-ink);
	border-radius: 12px;
	padding: 12px 14px;
}

.bpt-card {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	border: var(--bpt-line) solid var(--bpt-ink);
	border-radius: var(--bpt-radius);
	padding: 12px;
	background: #fff;
	box-shadow: 4px 4px 0 var(--bpt-ink);
}

.bpt-card img {
	width: 84px;
	height: 84px;
	object-fit: contain;
	border-radius: 10px;
	background:
		linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%) 0 0/16px 16px,
		linear-gradient(45deg, #eee 25%, #fff 25%, #fff 75%, #eee 75%) 8px 8px/16px 16px;
	flex: 0 0 auto;
}

.bpt-card__meta { display: grid; gap: 3px; }
.bpt-card__meta strong { word-break: break-all; }
.bpt-card__meta span { color: #6b6b7b; font-size: .85rem; }
.bpt-card__note { margin: 6px 0 0; font-size: .88rem; font-weight: 600; }

.bpt-artwork__status.is-warn .bpt-card { background: #fff8e1; }
.bpt-artwork__status.is-warn .bpt-card__note { color: #8a5b00; }
.bpt-artwork__status.is-ok .bpt-card__note { color: #1c6b2b; }

.bpt-card__remove {
	justify-self: start;
	margin-top: 6px;
	background: none;
	border: 0;
	padding: 0;
	color: #b00034;
	font-weight: 800;
	text-decoration: underline;
	cursor: pointer;
	box-shadow: none;
	font-size: .85rem;
}

/* ==========================================================================
   Tier table
   ========================================================================== */
.bpt-tiers {
	border: var(--bpt-line) solid var(--bpt-ink);
	border-radius: var(--bpt-radius);
	overflow: hidden;
	margin: 0 0 18px;
	background: #fff;
}

.bpt-tiers__head {
	background: var(--bpt-ink);
	color: var(--bpt-accent);
	padding: 9px 14px;
	font-weight: 800;
	text-transform: uppercase;
	font-size: .82rem;
	letter-spacing: .06em;
}

.bpt-tiers__table { width: 100%; border-collapse: collapse; margin: 0; }
.bpt-tiers__table th,
.bpt-tiers__table td {
	padding: 9px 14px;
	text-align: left;
	border-bottom: 1px solid #e6e6ee;
	font-size: .95rem;
}
.bpt-tiers__table tr:last-child th,
.bpt-tiers__table tr:last-child td { border-bottom: 0; }
.bpt-tiers__table th { width: 90px; font-weight: 800; }
.bpt-tiers__table td span { color: #6b6b7b; font-size: .82rem; }
.bpt-tiers__save { text-align: right; color: #1c6b2b; font-weight: 800; font-size: .85rem; }
.bpt-tiers__table tr.is-active { background: var(--bpt-lime); }

/* ==========================================================================
   Finishes
   ========================================================================== */
.bpt-finishes { margin: 0 0 18px; }
.bpt-finishes__head {
	font-weight: 800;
	text-transform: uppercase;
	font-size: .82rem;
	letter-spacing: .06em;
	margin-bottom: 8px;
}
.bpt-finishes__list { display: flex; flex-wrap: wrap; gap: 8px; }

.bpt-finish {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: var(--bpt-line) solid var(--bpt-ink);
	border-radius: 999px;
	padding: 8px 15px;
	background: #fff;
	cursor: pointer;
	font-weight: 700;
	font-size: .9rem;
	user-select: none;
}
.bpt-finish:has( input:checked ) { background: var(--bpt-secondary); }
.bpt-finish input { accent-color: var(--bpt-ink); margin: 0; }

/* ==========================================================================
   Live price
   ========================================================================== */
.bpt-live {
	border: var(--bpt-line) solid var(--bpt-ink);
	border-radius: var(--bpt-radius);
	background: var(--bpt-accent);
	padding: 14px 16px;
	margin: 0 0 18px;
	box-shadow: 4px 4px 0 var(--bpt-ink);
}
.bpt-live__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.bpt-live__label { text-transform: uppercase; font-weight: 800; font-size: .82rem; letter-spacing: .06em; }
.bpt-live__total { font-size: 1.9rem; font-weight: 900; line-height: 1; }
.bpt-live__meta { font-size: .85rem; font-weight: 700; color: #4a4a30; margin-top: 4px; }

/* ==========================================================================
   Guidelines
   ========================================================================== */
.bpt-guidelines {
	border: var(--bpt-line) solid var(--bpt-ink);
	border-radius: var(--bpt-radius);
	background: #fff;
	margin: 0 0 18px;
	overflow: hidden;
}
.bpt-guidelines summary {
	cursor: pointer;
	padding: 12px 16px;
	font-weight: 800;
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	list-style: none;
}
.bpt-guidelines summary::-webkit-details-marker { display: none; }
.bpt-guidelines summary::before { content: "＋"; font-weight: 900; }
.bpt-guidelines[open] summary::before { content: "－"; }
.bpt-guidelines summary small { color: #6b6b7b; font-weight: 600; }
.bpt-guidelines ul { margin: 0; padding: 0 18px 16px 38px; display: grid; gap: 7px; }
.bpt-guidelines li { font-size: .92rem; }
.bpt-guidelines__tab { display: grid; gap: 8px; }

/* ==========================================================================
   Gang sheet builder
   ========================================================================== */
.bpt-gs {
	border: var(--bpt-line) solid var(--bpt-ink);
	border-radius: var(--bpt-radius);
	background: #fff;
	margin: 0 0 20px;
	overflow: hidden;
}

.bpt-gs__bar {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	padding: 12px 14px;
	background: var(--bpt-ink);
	color: #fff;
}
.bpt-gs__bar-left strong { display: block; text-transform: uppercase; letter-spacing: .02em; }
.bpt-gs__bar-left span { font-size: .85rem; color: #c9c9dc; }
.bpt-gs__bar-left span .woocommerce-Price-amount { color: var(--bpt-accent); font-weight: 800; }
.bpt-gs__bar-right { display: flex; gap: 8px; flex-wrap: wrap; }
.bpt-gs__bar-right .button { padding: 9px 16px; font-size: .85rem; box-shadow: none; }
.bpt-gs__add { position: relative; overflow: hidden; cursor: pointer; }
.bpt-gs__add input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.bpt-gs__body { display: grid; grid-template-columns: 1fr 250px; gap: 0; }

.bpt-gs__stage {
	position: relative;
	padding: 18px 18px 18px 46px;
	background:
		linear-gradient(45deg, #f3f3f7 25%, transparent 25%, transparent 75%, #f3f3f7 75%) 0 0/20px 20px,
		linear-gradient(45deg, #f3f3f7 25%, #fafafd 25%, #fafafd 75%, #f3f3f7 75%) 10px 10px/20px 20px;
	overflow: auto;
	max-height: 620px;
}

.bpt-gs__ruler { position: absolute; top: 18px; left: 10px; bottom: 18px; width: 30px; }
.bpt-gs__tick {
	position: absolute;
	left: 0;
	font-size: .7rem;
	font-weight: 800;
	color: #8a8aa0;
	transform: translateY(-50%);
}
.bpt-gs__tick::after {
	content: "";
	position: absolute;
	left: 100%;
	top: 50%;
	width: 8px;
	border-top: 2px solid #c9c9dc;
}

.bpt-gs__sheet {
	position: relative;
	background: #fff;
	border: var(--bpt-line) solid var(--bpt-ink);
	border-radius: 6px;
	min-height: 220px;
	touch-action: none;
}
.bpt-gs__sheet.is-over { background: #f2fff5; }

.bpt-gs__empty {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	margin: 0;
	color: #8a8aa0;
	font-weight: 700;
	text-align: center;
	padding: 20px;
	pointer-events: none;
}

.bpt-gs__item {
	position: absolute;
	cursor: grab;
	border: 2px solid transparent;
	border-radius: 4px;
}
.bpt-gs__item img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
.bpt-gs__item.is-selected { border-color: var(--bpt-primary); box-shadow: 0 0 0 3px rgba(255, 46, 147, .25); }
.bpt-gs__item.is-dragging { cursor: grabbing; opacity: .85; }

.bpt-gs__tag {
	position: absolute;
	bottom: 2px;
	left: 2px;
	background: var(--bpt-ink);
	color: #fff;
	font-size: .62rem;
	font-weight: 800;
	padding: 1px 5px;
	border-radius: 4px;
	pointer-events: none;
	white-space: nowrap;
}
.bpt-gs__item:not(.is-selected) .bpt-gs__tag { opacity: 0; }
.bpt-gs__item:hover .bpt-gs__tag { opacity: 1; }

.bpt-gs__side { border-left: var(--bpt-line) solid var(--bpt-ink); padding: 16px; background: #fffdf5; }
.bpt-gs__row { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; border-bottom: 1px solid #e6e6ee; font-size: .9rem; }
.bpt-gs__row span { color: #6b6b7b; font-weight: 600; }
.bpt-gs__row strong { font-weight: 800; }
.bpt-gs__row--total { border-bottom: 0; padding-top: 12px; }
.bpt-gs__row--total strong { font-size: 1.4rem; }
.bpt-gs__note { font-size: .78rem; color: #6b6b7b; margin: 8px 0 0; }

.bpt-gs__selected { margin-top: 16px; border-top: var(--bpt-line) solid var(--bpt-ink); padding-top: 14px; display: grid; gap: 9px; }
.bpt-gs__selected-head { font-weight: 800; text-transform: uppercase; font-size: .78rem; letter-spacing: .06em; }
.bpt-gs__selected label { display: grid; gap: 4px; font-size: .82rem; font-weight: 700; }
.bpt-gs__selected input { width: 100%; }
/* Labels here can be long ("Remove background"), so let them wrap inside the
   pill instead of overflowing the sidebar. */
.bpt-gs__selected .button {
	padding: 8px 14px;
	font-size: .8rem;
	box-shadow: none;
	width: 100%;
	box-sizing: border-box;
	white-space: normal;
	text-align: center;
	line-height: 1.25;
}

.bpt-gs__status { padding: 0 14px 12px; font-weight: 700; font-size: .9rem; }
.bpt-gs__status.is-error { color: #b00034; }
.bpt-gs__status.is-busy { color: #6b6b7b; }

@media (max-width: 860px) {
	.bpt-gs__body { grid-template-columns: 1fr; }
	.bpt-gs__side { border-left: 0; border-top: var(--bpt-line) solid var(--bpt-ink); }
	.bpt-gs__stage { padding-left: 40px; max-height: 460px; }
	.bpt-drop { flex-direction: column; text-align: center; }
}

/* ==========================================================================
   Full-width layout for the builders - they need more than the half-width
   summary column WooCommerce gives them
   ========================================================================== */
/* WooCommerce ships these with an #content in the selector, so match it. */
.bpt-wide.woocommerce #content div.product div.images,
.bpt-wide.woocommerce div.product div.images,
.bpt-wide.woocommerce-page #content div.product div.images,
.bpt-wide.woocommerce-page div.product div.images {
	width: 100%;
	max-width: 320px;
	float: none;
	margin-bottom: 22px;
}

.bpt-wide.woocommerce #content div.product div.summary,
.bpt-wide.woocommerce div.product div.summary,
.bpt-wide.woocommerce-page #content div.product div.summary,
.bpt-wide.woocommerce-page div.product div.summary {
	width: 100%;
	float: none;
	margin: 0;
	clear: both;
}

.bpt-has-gangsheet .bpt-gs__stage { min-height: 420px; }
.bpt-has-gangsheet .bpt-gs__sheet { min-height: 380px; }

/* ==========================================================================
   Buttons shared by the background remover and the die-cut builder
   ========================================================================== */
/* button.bpt-btn, not just .bpt-btn: hello-elementor's reset.css carries
   [type="button"] { background: transparent }, which is the same specificity
   and loads after this file, so a plain class selector loses to it. */
button.bpt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: var(--bpt-line) solid var(--bpt-ink);
	border-radius: 999px;
	background: var(--bpt-accent);
	color: var(--bpt-ink);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: .02em;
	padding: 11px 20px;
	cursor: pointer;
	box-shadow: 4px 4px 0 var(--bpt-ink);
	transition: transform .08s ease, box-shadow .08s ease;
	line-height: 1;
	font-size: .9rem;
}

/* Pin the background on every state - the parent theme restyles button:hover
   and button:focus, and we do not want a tool button changing colour on us. */
button.bpt-btn:hover,
button.bpt-btn:focus,
button.bpt-btn:active {
	background: var(--bpt-accent);
	color: var(--bpt-ink);
}

button.bpt-btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--bpt-ink); }
button.bpt-btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--bpt-ink); }
button.bpt-btn--ghost:hover,
button.bpt-btn--ghost:focus,
button.bpt-btn--ghost:active { background: #fff; }
button.bpt-btn:disabled { opacity: .55; cursor: progress; transform: none; box-shadow: 4px 4px 0 var(--bpt-ink); }
button.bpt-btn--sm { padding: 8px 14px; font-size: .78rem; box-shadow: 3px 3px 0 var(--bpt-ink); }
button.bpt-btn--ghost { background: #fff; }

/* ==========================================================================
   Artwork tools - background removal and halftone
   ========================================================================== */
.bpt-tools {
	display: grid;
	gap: 8px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 2px dashed #d9d9e3;
}

.bpt-tool {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.bpt-tool__slider {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: .75rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #6b6b7b;
}

.bpt-tool__slider input[type="range"] { width: 92px; accent-color: var(--bpt-primary); }

.bpt-tool__slider b {
	color: var(--bpt-ink);
	font-variant-numeric: tabular-nums;
	min-width: 3.4em;
}

.bpt-tool__mode {
	border: 2px solid var(--bpt-ink);
	border-radius: 999px;
	padding: 6px 10px;
	font-weight: 800;
	font-size: .76rem;
	background: #fff;
	text-transform: uppercase;
}

.bpt-tools__undo { justify-self: start; }

@media (max-width: 600px) {
	.bpt-tool { align-items: stretch; flex-direction: column; }
	.bpt-tool__slider { justify-content: space-between; }
	.bpt-tool__slider input[type="range"] { flex: 1 1 auto; width: auto; }
}

/* ==========================================================================
   Die-cut sticker builder
   ========================================================================== */
.bpt-sticker {
	--bpt-primary: var(--bp-primary, #1e4290);
	--bpt-secondary: var(--bp-secondary, #3f7ad6);
	--bpt-accent: var(--bp-accent, #ffd400);
	--bpt-ink: var(--bp-ink, #0b0b14);
	--bpt-line: var(--bp-line, 3px);
	--bpt-radius: var(--bp-radius, 18px);
	margin: 0 0 22px;
	clear: both;
	border: var(--bpt-line) solid var(--bpt-ink);
	border-radius: var(--bpt-radius);
	background: #fff;
	box-shadow: 5px 5px 0 var(--bpt-ink);
	overflow: hidden;
}

.bpt-sticker__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	background: var(--bpt-secondary);
	border-bottom: var(--bpt-line) solid var(--bpt-ink);
	padding: 11px 16px;
}

.bpt-sticker__head strong {
	font-size: 1.02rem;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: .02em;
}

.bpt-sticker__badge {
	background: var(--bpt-ink);
	color: #fff;
	border-radius: 999px;
	padding: 4px 12px;
	font-size: .72rem;
	font-weight: 800;
	text-transform: uppercase;
}

.bpt-sticker__intro {
	margin: 0;
	padding: 12px 16px 0;
	font-size: .88rem;
	line-height: 1.5;
	color: #4a4a58;
}

.bpt-sticker__controls {
	display: flex;
	align-items: flex-end;
	gap: 12px;
	flex-wrap: wrap;
	padding: 12px 16px 14px;
}

.bpt-field { display: grid; gap: 5px; }

.bpt-field > span {
	font-size: .72rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #6b6b7b;
}

.bpt-field select,
.bpt-field input {
	border: 2px solid var(--bpt-ink);
	border-radius: 10px;
	padding: 9px 11px;
	font-weight: 700;
	font-size: .92rem;
	background: #fff;
	min-width: 150px;
	max-width: 100%;
}

.bpt-sticker__result { padding: 0 16px 14px; font-weight: 700; font-size: .9rem; }
.bpt-sticker__result.is-error { color: #b00034; }
.bpt-sticker__result.is-busy { color: #6b6b7b; }

.bpt-proof {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	flex-wrap: wrap;
	background: #f6f6fa;
	border: 2px solid var(--bpt-ink);
	border-radius: 14px;
	padding: 14px;
}

.bpt-proof img {
	width: 220px;
	height: auto;
	max-width: 100%;
	border-radius: 10px;
	border: 2px solid var(--bpt-ink);
	flex: 0 0 auto;
}

.bpt-proof__meta { flex: 1 1 220px; }

.bpt-proof__meta strong {
	display: block;
	font-size: 1rem;
	text-transform: uppercase;
	margin-bottom: 5px;
}

.bpt-proof__meta p { margin: 0; font-size: .88rem; font-weight: 600; line-height: 1.5; color: #4a4a58; }

@media (max-width: 600px) {
	.bpt-sticker__controls { flex-direction: column; align-items: stretch; }
	.bpt-field select, .bpt-field input { min-width: 0; width: 100%; }
	.bpt-sticker__controls .bpt-btn { width: 100%; }
}

/* ==========================================================================
   Theme-proofing
   --------------------------------------------------------------------------
   Elementra (and several other WooCommerce themes) make the add-to-cart area
   a flex row. Our panels are hooked in there, so without this each one
   becomes a narrow flex column and the whole thing collapses into slivers.

   `flex` is simply ignored when the parent is not a flex container, so these
   rules are harmless on themes that do not do this. This stylesheet only
   loads on products where the print tools are switched on.
   ========================================================================== */
.bpt-artwork,
.bpt-sticker,
.bpt-gs,
.bpt-tiers,
.bpt-finishes,
.bpt-live,
.bpt-guidelines {
	flex: 1 0 100%;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.woocommerce div.product form.cart,
.woocommerce div.product .woocommerce-variation-add-to-cart,
.woocommerce-page div.product form.cart,
.woocommerce-page div.product .woocommerce-variation-add-to-cart {
	flex-wrap: wrap;
}

/* Long guideline text and file names must not force the row wider. */
.bpt-card,
.bpt-proof,
.bpt-tool {
	min-width: 0;
}

.bpt-card__meta { min-width: 0; }

/* ==========================================================================
   Live DPI feedback on the gang sheet
   --------------------------------------------------------------------------
   Effective DPI is the one number that decides whether a sheet prints sharp,
   so it is shown per design and as a worst-case for the whole sheet.
   ========================================================================== */
.bpt-gs__dpi {
	position: absolute;
	top: 4px;
	left: 4px;
	font-size: .62rem;
	font-weight: 900;
	letter-spacing: .02em;
	padding: 2px 6px;
	border-radius: 999px;
	background: var(--bpt-ink);
	color: #fff;
	pointer-events: none;
	white-space: nowrap;
}

.bpt-gs__dpi.is-good { background: #0f7a2e; }
.bpt-gs__dpi.is-warn { background: #a86400; }
.bpt-gs__dpi.is-bad  { background: #b00034; }

/* A design that will genuinely print soft gets an outline you cannot miss. */
.bpt-gs__item.is-lowdpi { outline: 3px dashed #b00034; outline-offset: 2px; }

.bpt-gs__dpimin.is-good { color: #0f7a2e; }
.bpt-gs__dpimin.is-warn { color: #a86400; }
.bpt-gs__dpimin.is-bad  { color: #b00034; }

/* ==========================================================================
   AI design generator
   ========================================================================== */
.bpt-ai {
	--bpt-primary: var(--bp-primary, #1e4290);
	--bpt-secondary: var(--bp-secondary, #3f7ad6);
	--bpt-accent: var(--bp-accent, #ffd400);
	--bpt-ink: var(--bp-ink, #0b0b14);
	--bpt-line: var(--bp-line, 3px);
	--bpt-radius: var(--bp-radius, 18px);
	border: var(--bpt-line) solid var(--bpt-ink);
	border-radius: var(--bpt-radius);
	background: #fff;
	box-shadow: 5px 5px 0 var(--bpt-ink);
	overflow: hidden;
	margin: 0 0 22px;
	clear: both;
	flex: 1 0 100%;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.bpt-ai__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	background: var(--bpt-primary);
	color: #fff;
	border-bottom: var(--bpt-line) solid var(--bpt-ink);
	padding: 11px 16px;
}

.bpt-ai__head strong {
	font-size: 1.02rem;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: .02em;
}

.bpt-ai__balance {
	background: var(--bpt-accent);
	color: var(--bpt-ink);
	border-radius: 999px;
	padding: 4px 12px;
	font-size: .74rem;
	font-weight: 900;
	text-transform: uppercase;
	white-space: nowrap;
}

.bpt-ai__intro {
	margin: 0;
	padding: 12px 16px 0;
	font-size: .88rem;
	line-height: 1.5;
	color: #4a4a58;
}

/* Shown before they type: what it costs, and where to get credits. */
.bpt-ai__note {
	margin: 10px 16px 0;
	padding: 9px 12px;
	background: #f3f5fb;
	border-left: 3px solid var(--bpt-primary, #1F4495);
	border-radius: 6px;
	font-size: .84rem;
	line-height: 1.5;
	color: #3a3a48;
}

.bpt-ai__note a { font-weight: 700; color: var(--bpt-primary, #1F4495); }

.bpt-ai__field { display: grid; gap: 5px; padding: 12px 16px 0; }

.bpt-ai__field > span {
	font-size: .72rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #6b6b7b;
}

.bpt-ai__field textarea,
.bpt-ai__field select {
	border: 2px solid var(--bpt-ink);
	border-radius: 10px;
	padding: 10px 12px;
	font-weight: 600;
	font-size: .95rem;
	font-family: inherit;
	background: #fff;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	resize: vertical;
}

.bpt-ai__row {
	display: flex;
	align-items: flex-end;
	gap: 12px;
	flex-wrap: wrap;
	padding: 0 16px 14px;
}

.bpt-ai__row .bpt-ai__field { padding: 12px 0 0; flex: 1 1 220px; }
.bpt-ai__row .bpt-btn { margin-bottom: 1px; }

.bpt-ai__status { padding: 0 16px 14px; font-weight: 700; font-size: .9rem; }
.bpt-ai__status.is-error { color: #b00034; }
.bpt-ai__status.is-busy { color: #6b6b7b; }
.bpt-ai__status a { font-weight: 800; text-decoration: underline; }

@media (max-width: 600px) {
	.bpt-ai__row { flex-direction: column; align-items: stretch; }
	.bpt-ai__row .bpt-btn { width: 100%; }
}

/* ---------------------------------------------------------------------------
   Live garment preview
   ------------------------------------------------------------------------ */

.bpt-mockup {
	margin: 0 0 22px;
	border: var(--bpt-line, 2px) solid var(--bpt-ink, #101114);
	border-radius: var(--bpt-radius, 14px);
	overflow: hidden;
	background: #fff;
}

.bpt-mockup__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 11px 16px;
	background: var(--bpt-primary, #1F4495);
	color: #fff;
}

.bpt-mockup__head strong {
	font-size: .95rem;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: .02em;
}

.bpt-mockup__badge {
	background: #fff;
	color: var(--bpt-ink, #101114);
	border-radius: 999px;
	padding: 4px 12px;
	font-size: .68rem;
	font-weight: 900;
	text-transform: uppercase;
	white-space: nowrap;
}

.bpt-mockup__stage {
	position: relative;
	background: #f4f5f8;
}

.bpt-mockup__shirt {
	display: block;
	width: 100%;
	height: auto;
}

/* The printable rectangle. The artwork is fitted inside it, never stretched. */
.bpt-mockup__area {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.bpt-mockup__art {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.bpt-mockup__empty {
	position: absolute;
	left: 50%;
	bottom: 12px;
	transform: translateX(-50%);
	margin: 0;
	padding: 6px 14px;
	background: rgba( 16, 17, 20, .78 );
	color: #fff;
	border-radius: 999px;
	font-size: .78rem;
	white-space: nowrap;
}

.bpt-mockup__note {
	margin: 0;
	padding: 10px 16px;
	border-top: 1px solid #e6e7ee;
	font-size: .8rem;
	color: #5c5c6b;
}

@media ( max-width: 480px ) {
	.bpt-mockup__empty { font-size: .72rem; white-space: normal; text-align: center; width: 84%; }
}

/* Placement controls: size slider, centre button, and the draggable design. */
.bpt-mockup__area { pointer-events: none; }

.bpt-mockup__art {
	pointer-events: auto;
	cursor: grab;
	touch-action: none;
	user-select: none;
	-webkit-user-drag: none;
}

.bpt-mockup__art:active { cursor: grabbing; }

.bpt-mockup__art:focus-visible {
	outline: 2px dashed var(--bpt-primary, #1F4495);
	outline-offset: 3px;
}

.bpt-mockup__controls {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	padding: 12px 16px;
	border-top: 1px solid #e6e7ee;
	background: #fafbfe;
}

.bpt-mockup__size {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 240px;
}

.bpt-mockup__size > span {
	font-size: .72rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #6b6b7b;
	white-space: nowrap;
}

.bpt-mockup__range { flex: 1 1 auto; accent-color: var(--bpt-primary, #1F4495); min-width: 90px; }

.bpt-mockup__out {
	font-weight: 800;
	font-size: .85rem;
	white-space: nowrap;
	min-width: 66px;
	text-align: right;
}

.bpt-mockup__centre {
	/* The theme paints buttons white on white, so state both. */
	background: #fff;
	color: var(--bpt-ink, #101114);
	border: 2px solid var(--bpt-ink, #101114);
	border-radius: 999px;
	padding: 6px 14px;
	font-size: .78rem;
	font-weight: 800;
	cursor: pointer;
}

.bpt-mockup__centre:hover { background: var(--bpt-primary, #1F4495); color: #fff; border-color: var(--bpt-primary, #1F4495); }

/* ---------------------------------------------------------------------------
   My designs (My Account)
   ------------------------------------------------------------------------ */

.bpt-library {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 260px, 1fr ) );
	gap: 16px;
	margin: 18px 0 0;
}

.bpt-library__item {
	border: 2px solid #101114;
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
	display: flex;
	flex-direction: column;
}

.bpt-library__shot {
	background:
		linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%) 0 0/18px 18px,
		linear-gradient(45deg, #eee 25%, #fff 25%, #fff 75%, #eee 75%) 9px 9px/18px 18px;
	display: grid;
	place-items: center;
	min-height: 190px;
	padding: 12px;
}

.bpt-library__shot img { max-width: 100%; max-height: 190px; height: auto; display: block; }

.bpt-library__meta {
	display: grid;
	gap: 6px;
	padding: 12px 14px 14px;
	border-top: 2px solid #101114;
}

.bpt-library__meta strong { font-size: .92rem; line-height: 1.35; }
.bpt-library__meta > span { font-size: .8rem; color: #6b6b7b; }
.bpt-library__note { margin: 2px 0 0; font-size: .82rem; color: #8a5b00; }

.bpt-library__go {
	justify-self: start;
	margin-top: 6px;
	display: inline-block;
	padding: 9px 16px;
	border-radius: 999px;
	background: #1F4495;
	color: #fff !important;
	border: 2px solid #1F4495;
	font-size: .82rem;
	font-weight: 800;
	text-decoration: none !important;
	text-align: center;
	line-height: 1.2;
}

.bpt-library__go:hover,
.bpt-library__go:focus {
	background: #16357A;
	border-color: #16357A;
	color: #fff !important;
}

/* An unlock is a purchase, so it should not look like the free download. */
.bpt-library__note + .bpt-library__go {
	background: #101114;
	border-color: #101114;
}