/*
 * Boreal Customizer - front-end styles.
 *
 * Design fonts are NOT declared here: they belong to the design template and
 * are printed inline with the customizer (see boreal_customizer_font_face_css).
 */

/* Product page: launch button and full-screen overlay */

.bc-launch {
	/*
	 * The one button that has to be found. Full width rather than shrink to
	 * its label: on a 375px phone "Customize" was about 150px wide.
	 *
	 * Steel on a flat area with Ink on top, which is what the brand sheet
	 * prescribes for this pairing (5.4:1). Steel is a surface color, never a
	 * small one, and a full-width button is a surface.
	 */
	display: block;
	width: 100%;
	max-width: 420px;
	min-height: 56px;
	padding: 16px 28px;
	/*
	 * Steel with Ink, 5.4:1, the pairing the brand sheet prescribes for this
	 * flat area.
	 *
	 * Navy with white was tried first and reverted: it scores 10.4:1, but
	 * Sarah found it harder to spot, and she is right. The page is black,
	 * white and grey, so a dark button joins that family, while steel is the
	 * only real color on screen. Luminance contrast and standing out are not
	 * the same thing. White text is what forced navy, so the text stays Ink
	 * and the button earns its presence from size, caps and full width.
	 */
	background: #89A9BA;
	/* White at Sarah's explicit request, twice over. 2.5:1 on this steel. */
	color: #ffffff;
	border: 0;
	border-radius: 8px;
	font-size: 17px;
	font-weight: 700;
	/* Caps need tracking or they read as a block. Same 0.08em as the panel titles. */
	text-transform: uppercase;
	letter-spacing: 0.08em;
	cursor: pointer;
}

.bc-launch:hover {
	opacity: 0.85;
}

.bc-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: #fbfbfb;
	overflow-y: auto;
	/* Reserve the scrollbar's width so Stage.fit() measures one number. */
	scrollbar-gutter: stable;
	overscroll-behavior: contain;
}

.bc-overlay[hidden] {
	display: none;
}

body.bc-overlay-open {
	overflow: hidden;
}

.bc-overlay-inner {
	position: relative;
	max-width: 1100px;
	margin: 0 auto;
	padding: 56px 24px 48px;
}

.bc-close {
	position: absolute;
	top: 12px;
	right: 16px;
	width: 40px;
	height: 40px;
	border: 1px solid #dcdcdc;
	border-radius: 50%;
	background: #fff;
	font-size: 24px;
	line-height: 1;
	color: #444;
	cursor: pointer;
}

.bc-close:hover {
	border-color: #1a1a1a;
}

.boreal-customizer {
	display: flex;
	gap: 32px;
	flex-wrap: wrap;
	align-items: flex-start;
	/*
	 * The page's own face, Poppins, as the brand sheet asks for body text and
	 * buttons. It used to be the phone's system font, so the editor read in San
	 * Francisco on an iPhone, Roboto on Android and Arial on a PC, never in the
	 * shop's typeface (Sarah, 2026-10-06).
	 */
	font-family: inherit;
	color: #1a1a1a;
}

/*
 * Form controls do not inherit a font: each browser puts its own on them, so
 * every button was Arial or the system face whatever the page said. The
 * design-font tiles and the text fields set theirs inline, which still wins.
 */
.bc-launch,
.bc-close,
.boreal-customizer button,
.boreal-customizer input,
.boreal-customizer select,
.boreal-customizer textarea,
.bc-guidelines button {
	font-family: inherit;
}

.bc-stage {
	/* Anchors the floating element toolbar. */
	position: relative;
	border: 1px solid #e6e6e6;
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	line-height: 0;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.06 );
}

/* History bar */

.bc-history {
	display: flex;
	gap: 6px;
	align-items: center;
	justify-content: flex-end;
	margin-bottom: 10px;
}

.bc-history button {
	height: 34px;
	min-width: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 10px;
	border: 1px solid #dcdcdc;
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
	font-size: 13px;
	color: #444;
	transition: border-color 0.1s ease, background 0.1s ease;
}

.bc-history button svg {
	width: 16px;
	height: 16px;
	fill: #444;
}

.bc-history button:hover:not( :disabled ) {
	border-color: #1a1a1a;
	background: #f5f5f5;
}

.bc-history button:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* The display above would otherwise beat the hidden attribute. */
.bc-history button[hidden] {
	display: none;
}

/*
 * 3D preview stays dark, open or closed: it has to stand out for the
 * customer, Sarah's call of 2026-10-22. The mug appearing below is what says
 * it is open.
 */
.bc-history #bc-mug-toggle {
	border-color: #244357;
	background: #244357;
	color: #fff;
	font-weight: 600;
}

.bc-history #bc-mug-toggle:hover:not( :disabled ) {
	border-color: #1b3444;
	background: #1b3444;
}

.bc-canvas {
	display: block;
	/* Safety net if Stage.fit() has not run yet. */
	max-width: 100%;
}

.bc-panel {
	flex: 1;
	min-width: 260px;
	max-width: 340px;
}

.bc-section + .bc-section {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid #ececec;
}

.bc-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
}

.bc-panel-title {
	font-size: 13px;
	/*
	 * 400, not 600: the theme sets these <h3> in Anton, which exists in one
	 * weight only. Asking for more made every browser thicken the letters
	 * itself, a smeared fake bold that closed up the R and the B.
	 */
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0 0 12px;
	color: #666;
}

.bc-count {
	font-size: 12px;
	color: #999;
}

/* Color swatches */

.bc-colors {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.bc-color {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 2px solid #dcdcdc;
	cursor: pointer;
	padding: 0;
	transition: transform 0.1s ease, border-color 0.1s ease;
}

.bc-color:hover {
	transform: scale( 1.08 );
}

.bc-color.is-active {
	border-color: #1a1a1a;
	box-shadow: inset 0 0 0 2px #fff;
}

/* Tiles (backgrounds, effects) */

.bc-tiles {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.bc-tile {
	width: 54px;
	height: 62px;
	padding: 0;
	border: 2px solid #dcdcdc;
	border-radius: 8px;
	overflow: hidden;
	cursor: pointer;
	background: #1a1a1a;
	line-height: 0;
	transition: transform 0.1s ease, border-color 0.1s ease;
}

.bc-tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* A plain-color background, which is its own thumbnail. */
.bc-tile-color {
	display: block;
	width: 100%;
	height: 100%;
}

.bc-tile:hover {
	transform: scale( 1.06 );
}

.bc-tile.is-active {
	border-color: #1a1a1a;
	box-shadow: 0 0 0 2px #fff inset;
}

/* Buttons */

.bc-button {
	display: block;
	width: 100%;
	padding: 12px 16px;
	background: #1a1a1a;
	color: #fff;
	border: 0;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.bc-button:hover:not( :disabled ) {
	opacity: 0.85;
}

.bc-button:disabled {
	background: #c9c9c9;
	cursor: not-allowed;
}

.bc-button-ghost {
	background: #fff;
	color: #1a1a1a;
	border: 1px solid #1a1a1a;
}

.bc-button-ghost:disabled {
	background: #fff;
	color: #bbb;
	border-color: #dcdcdc;
}

/* Checkout block */

.bc-checkout .bc-button {
	margin-top: 12px;
}

.bc-select {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #dcdcdc;
	border-radius: 8px;
	background: #fff;
	font-size: 14px;
	color: #1a1a1a;
	box-sizing: border-box;
}

.bc-status {
	margin: 10px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: #666;
	min-height: 1em;
}

.bc-status.is-error {
	color: #b3261e;
}

/* Element toolbar (floats over the canvas) */

.bc-toolbar {
	position: absolute;
	/*
	 * Spans the stage rather than sitting at left:50% with a shift: an
	 * absolutely positioned box anchored at the midpoint only has the right
	 * half to lay out in, so once the tabs were allowed to wrap they broke
	 * onto three rows inside 175px. Full width, contents centred.
	 */
	left: 0;
	right: 0;
	bottom: 14px;
	padding: 0 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	z-index: 5;
	/* The bar spans the canvas now, so only its controls may take a tap. */
	pointer-events: none;
}

.bc-tool-tabs,
.bc-tool-panel {
	pointer-events: auto;
}

.bc-toolbar[hidden] {
	display: none;
}

.bc-tool-tabs {
	display: flex;
	gap: 2px;
	padding: 4px;
	border-radius: 12px;
	background: rgba( 255, 255, 255, 0.92 );
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.18 );
	backdrop-filter: blur( 6px );
}

.bc-tool-tabs button {
	padding: 8px 16px;
	border: 0;
	border-radius: 9px;
	background: transparent;
	font-size: 13px;
	font-weight: 500;
	color: #333;
	cursor: pointer;
}

.bc-tool-tabs button:hover {
	background: #f0f0f0;
}

.bc-tool-tabs button.is-active {
	background: #1a1a1a;
	color: #fff;
}

.bc-tool-panels {
	display: flex;
	justify-content: center;
}

.bc-tool-panel {
	display: none;
	align-items: center;
	gap: 6px;
	padding: 8px 10px;
	border-radius: 12px;
	background: rgba( 255, 255, 255, 0.96 );
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.18 );
}

.bc-tool-panel.is-open {
	display: flex;
}

.bc-tool-panel button {
	min-width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 10px;
	border: 1px solid #dcdcdc;
	border-radius: 8px;
	background: #fff;
	font-size: 14px;
	color: #333;
	cursor: pointer;
}

.bc-tool-panel button:hover {
	border-color: #1a1a1a;
	background: #f5f5f5;
}

.bc-tool-panel button svg {
	width: 16px;
	height: 16px;
	fill: #444;
}

.bc-tool-hint {
	font-size: 11px;
	color: #999;
	padding-left: 4px;
	white-space: nowrap;
}

/* Text controls */

.bc-texts {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.bc-input {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #dcdcdc;
	border-radius: 8px;
	font-size: 14px;
	background: #fff;
	color: #1a1a1a;
	box-sizing: border-box;
}

.bc-input:focus {
	outline: none;
	border-color: #1a1a1a;
}

/*
 * The same field, several lines tall, on a slot that lets the customer press
 * Enter. Only the height and the drag handle differ: it has to read as the
 * same control as the one-line one, because on a template with two slots she
 * may well meet both.
 *
 * resize: vertical, not both. Widening it past the panel would push the tools
 * off the side of a phone, and the width of this box has nothing to do with
 * where the lines break on the shirt anyway.
 */
textarea.bc-input {
	display: block;
	line-height: 1.35;
	min-height: 88px;
	resize: vertical;
}

.bc-text-colors {
	display: flex;
	gap: 8px;
	margin-top: 8px;
}

.bc-dot {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 2px solid #dcdcdc;
	padding: 0;
	cursor: pointer;
	transition: transform 0.1s ease, border-color 0.1s ease;
}

.bc-dot:hover {
	transform: scale( 1.15 );
}

.bc-dot.is-active {
	border-color: #1a1a1a;
}

/*
 * Font choice. Each tile is set in the font it stands for, so the customer
 * reads the typeface instead of its name. Wraps, because a slot can offer a
 * dozen and the panel is narrow.
 */
.bc-text-fonts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}

/* A slot offering one font renders no tiles, and must take up no room. */
.bc-text-fonts:empty {
	display: none;
}

.bc-font {
	min-width: 56px;
	height: 44px;
	padding: 0 10px;
	font-size: 17px;
	line-height: 1;
	color: #1a1a1a;
	background: #ffffff;
	border: 2px solid #ececec;
	border-radius: 8px;
	cursor: pointer;
	/* Show the letterform, not a word that would wrap the tile. */
	overflow: hidden;
	white-space: nowrap;
	transition: border-color 0.1s ease, background 0.1s ease;
}

.bc-font:hover {
	border-color: #c9c9c9;
}

.bc-font.is-active {
	background: #1a1a1a;
	color: #ffffff;
	border-color: #1a1a1a;
}

/* Photo list */

.bc-photo-list {
	margin-top: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.bc-photo {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 8px;
	/*
	 * 2px idle so the active state only changes colour, and the rows do not
	 * jump as the selection moves down the list.
	 */
	border: 2px solid #ececec;
	border-radius: 8px;
	background: #fafafa;
	cursor: pointer;
}

/*
 * The row of the photo currently picked on the garment.
 *
 * Its real job is teaching: once choosing a photo on the shirt lights up its
 * row, a customer can see that the two are the same thing, and reaching for the
 * row to get at a photo buried under another becomes obvious instead of being
 * something she has to be told.
 */
.bc-photo.is-active {
	border-color: #244357;
	background: #ffffff;
}

.bc-photo-thumb {
	width: 52px;
	height: 52px;
	object-fit: cover;
	border-radius: 6px;
	cursor: pointer;
	background: #fff;
	flex-shrink: 0;
}

.bc-photo-meta {
	flex: 1;
	min-width: 0;
}

.bc-checkbox {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: #777;
}

.bc-photo-status {
	margin: 4px 0 0;
	font-size: 11px;
	line-height: 1.4;
	color: #888;
}

.bc-photo-status.is-error {
	color: #b3261e;
}

/*
 * A cut-out takes about ten seconds, which is long enough for a still page to
 * read as a broken one. The spinner says the wait is ours; the sentence beside
 * it says roughly how long.
 */
.bc-photo-status.is-working {
	display: flex;
	align-items: center;
	gap: 6px;
	color: #244357;
}

.bc-photo-status.is-working::before {
	content: '';
	flex: none;
	width: 11px;
	height: 11px;
	border: 2px solid rgba( 36, 67, 87, 0.25 );
	border-top-color: #244357;
	border-radius: 50%;
	animation: bc-spin 0.7s linear infinite;
}

@keyframes bc-spin {
	to {
		transform: rotate( 360deg );
	}
}

/* Still turning, so it still reads as busy, just not as a strobe. */
@media ( prefers-reduced-motion: reduce ) {
	.bc-photo-status.is-working::before {
		animation-duration: 3s;
	}
}

.bc-photo-actions {
	display: flex;
	gap: 12px;
	margin-top: 6px;
}

.bc-link {
	background: none;
	border: 0;
	padding: 0;
	font-size: 12px;
	color: #555;
	cursor: pointer;
	text-decoration: underline;
}

.bc-link:hover {
	color: #1a1a1a;
}

.bc-link-danger {
	color: #b3261e;
}

.bc-link-danger:hover {
	color: #8c1d18;
}

/*
 * The halo switch. A panel-level control, not a per-photo note, so it does not
 * inherit the small grey treatment .bc-checkbox gives the rows inside a photo.
 * Sized as a real touch target from the start rather than only under the mobile
 * query: it is a switch on every screen, and 44px is what a fingertip hits.
 */
.bc-glow-toggle {
	min-height: 44px;
	margin-top: 12px;
	padding: 8px 12px;
	gap: 10px;
	font-size: 14px;
	color: #233036;
	background: #f7f8f9;
	border: 1px solid #e2e5e7;
	border-radius: 6px;
	cursor: pointer;
}

.bc-glow-toggle[hidden] {
	display: none;
}

.bc-glow-toggle input {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: #89A9BA;
	cursor: pointer;
}

.bc-hint {
	margin: 14px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: #999;
}

/* Steps 2 and 3 */

.bc-step[hidden] {
	display: none;
}

.bc-step-design {
	display: contents;
}

.bc-step-title {
	width: 100%;
	margin: 0 0 20px;
	font-size: 22px;
	font-weight: 600;
}

.bc-review {
	display: flex;
	gap: 32px;
	flex-wrap: wrap;
	align-items: flex-start;
	width: 100%;
}

.bc-review-image {
	width: 360px;
	max-width: 100%;
	border: 1px solid #e6e6e6;
	border-radius: 12px;
	background: #fff;
	display: block;
}

.bc-review-side {
	flex: 1;
	min-width: 280px;
	max-width: 420px;
}

.bc-review-note {
	margin: 0 0 18px;
	font-size: 14px;
	line-height: 1.6;
	color: #555;
}

.bc-consent {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 14px;
	border: 1px solid #dcdcdc;
	border-radius: 10px;
	font-size: 14px;
	line-height: 1.5;
	cursor: pointer;
}

.bc-consent input {
	margin-top: 2px;
	flex-shrink: 0;
}

.bc-consent-terms {
	margin: 8px 0 0 28px;
	font-size: 13px;
}

.bc-consent-terms a {
	color: #244357;
}

.bc-step-actions {
	display: flex;
	gap: 10px;
	margin-top: 20px;
}

.bc-step-actions .bc-button {
	margin-top: 0;
}

.bc-sizes-title {
	margin-top: 24px;
}

/* Quantity matrix */

.bc-qty-grid {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bc-qty-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 12px;
	border: 1px solid #ececec;
	border-radius: 8px;
}

.bc-qty-label {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.bc-qty-label span {
	font-size: 12px;
	color: #888;
}

.bc-qty-controls {
	display: flex;
	align-items: center;
	gap: 6px;
}

.bc-qty-controls button {
	width: 32px;
	height: 32px;
	border: 1px solid #dcdcdc;
	border-radius: 8px;
	background: #fff;
	font-size: 16px;
	cursor: pointer;
}

.bc-qty-controls button:hover {
	border-color: #1a1a1a;
}

.bc-qty-controls input {
	width: 52px;
	height: 32px;
	text-align: center;
	border: 1px solid #dcdcdc;
	border-radius: 8px;
	font-size: 14px;
	box-sizing: border-box;
}

/* Volume tiers */

.bc-tiers {
	margin-top: 18px;
	padding: 12px 14px;
	border-radius: 10px;
	background: #f6f6f4;
}

.bc-tier-head {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 600;
}

.bc-tier-pills {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.bc-tier {
	padding: 4px 10px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid #e0e0e0;
	font-size: 12px;
	color: #666;
}

.bc-tier.is-active {
	background: #1a1a1a;
	border-color: #1a1a1a;
	color: #fff;
}

.bc-order-summary {
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid #ececec;
	font-size: 15px;
}

.bc-order-summary div {
	display: flex;
	justify-content: space-between;
	padding: 4px 0;
}

/* Product page controls */

.bc-product-controls {
	margin: 18px 0;
}

.bc-product-label {
	display: block;
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #666;
}

.bc-style {
	margin-bottom: 18px;
}

.bc-style-options {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.bc-style-option {
	padding: 10px 18px;
	/*
	 * 2px even when idle. The active state used to thicken the border from 1 to
	 * 2, which grew the button and nudged its neighbours every time the choice
	 * changed. Only the colour moves now.
	 */
	border: 2px solid #dcdcdc;
	border-radius: 8px;
	font-size: 14px;
	color: #1a1a1a;
	text-decoration: none;
	background: #fff;
}

.bc-style-option:hover {
	border-color: #9a9a9a;
}

/*
 * The chosen style has to be obvious at a glance on a phone, where there is no
 * hover to explore with: a dark border on its own reads as decoration next to a
 * pale one, so the fill carries it.
 */
.bc-style-option.is-active {
	border-color: #1a1a1a;
	background: #1a1a1a;
	color: #ffffff;
	font-weight: 600;
}

/*
 * The color's name, beside its label. 400, not 600: it sits inside an Anton
 * <h3>, and Anton has one weight, so 600 was a fake bold (2026-10-06).
 */
.bc-color-name {
	font-weight: 400;
}

.bc-product-colors {
	margin-bottom: 20px;
}

/*
 * Order step: a count on each garment swatch.
 *
 * The size grid only ever shows one color, so without this a customer who
 * staged two black and moved on to pink would have nothing on screen telling
 * them the black ones are still in the order.
 */
.bc-color {
	position: relative;
	overflow: visible;
}

.bc-color-count {
	position: absolute;
	top: -6px;
	right: -6px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 9px;
	background: #1a1a1a;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	pointer-events: none;
}

/* Added-to-cart step */

.bc-added-count {
	margin: 0 0 20px;
	font-size: 16px;
	font-weight: 600;
	color: #1a1a1a;
}

.bc-added-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* The cart link is an anchor, so it needs the button's centring itself. */
.bc-button-link {
	text-align: center;
	text-decoration: none;
	box-sizing: border-box;
}

/*
 * Print resolution warnings.
 *
 * Amber, never red: a low-resolution photo is a heads-up, not an error. The
 * customer can order it anyway, and on a bootleg print they sometimes mean to.
 */
.bc-photo-quality {
	/* Block, not a pill: the message is a sentence and has to wrap cleanly in a
	   panel this narrow. */
	display: block;
	margin-bottom: 6px;
	padding: 5px 9px;
	border-radius: 8px;
	border-left: 3px solid #d97706;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.45;
	background: #fdf3e3;
	color: #8a5a00;
}

/* Shown only when there is something to act on, so it stays worth reading. */
.bc-photo-quality[hidden] {
	display: none;
}


/*
 * Removing a text line. Sits under the color dots, matching where the photo
 * list puts its own Delete, so the two read as the same kind of action.
 */
.bc-text-actions {
	margin-top: 8px;
}

.bc-text-actions [hidden] {
	display: none;
}

/*
 * Text lines open one at a time (2026-10-08). A rule of its own for
 * [hidden], because any display set on the row elsewhere would beat the
 * browser's and leave a "hidden" line on screen.
 */
.bc-text-row[hidden],
.bc-add-text[hidden] {
	display: none;
}

/*
 * The way to a second line. A text link like Sarah's other links, in navy
 * and bold so it is found, with a 44px target for a thumb.
 */
.bc-add-text {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin: 2px 0 4px;
	padding: 0;
	background: none;
	border: 0;
	color: #244357;
	font-size: 14px;
	font-weight: 700;
	text-decoration: underline;
	cursor: pointer;
}

.bc-add-text:hover,
.bc-add-text:focus-visible {
	color: #233036;
}

/*
 * Phones.
 *
 * The editor was drawn at 600px wide. Below that the canvas is scaled down by
 * Stage.fit(), which leaves two things needing help: the floating toolbar,
 * whose five tabs at desktop padding overflow a ~340px stage and get clipped by
 * the stage's own overflow:hidden, and the panel, which was capped at 340px for
 * a column beside the canvas and should simply fill the screen once it sits
 * under it.
 *
 * The first media query in this file. Most of the layout already reflows on its
 * own through flex-wrap.
 */
@media ( max-width: 600px ) {

	.bc-overlay-inner {
		padding: 48px 12px 32px;
	}

	.bc-panel {
		max-width: none;
	}

	/* Let the flex item follow the canvas down instead of forcing 600px. */
	.bc-stage-wrap {
		min-width: 0;
		max-width: 100%;
	}

	/*
	 * Touch targets. 44px is the smallest a fingertip hits reliably.
	 *
	 * The first pass here shrank these to 31px to force five tabs onto one
	 * row, which made the thing Sarah could not hit. Letting them wrap is the
	 * right trade: two comfortable rows beat one unusable one.
	 */
	.bc-tool-tabs {
		flex-wrap: wrap;
		justify-content: center;
		max-width: 100%;
	}

	.bc-tool-tabs button {
		min-height: 44px;
		/*
		 * 10px sides, down from 14, when the editor moved to Poppins
		 * (2026-10-06). Poppins runs wider than the system font, and at 14px
		 * "Layer" dropped to a second row on 360 and 375px phones, nearly
		 * doubling the bar over the garment (60px to 106px). At 10px the five
		 * tabs fit one row from 360px up, each still 52px wide or more.
		 */
		padding: 10px 10px;
		font-size: 13px;
	}

	.bc-tool-panel {
		flex-wrap: wrap;
		justify-content: center;
		max-width: 92vw;
	}

	.bc-tool-panel button {
		min-width: 44px;
		height: 44px;
		font-size: 16px;
	}

	/* There is no Shift key on a phone. */
	.bc-tool-hint {
		display: none;
	}

	/*
	 * The photo row's actions were the worst of the lot: bare text buttons
	 * with no padding at all at 12px, so the tap target was the height of the
	 * words. Padding gives the target; the gap keeps "Bring to front" and
	 * "Delete" far enough apart to not hit the wrong one.
	 */
	.bc-link {
		min-height: 44px;
		padding: 8px 2px;
		font-size: 14px;
	}

	.bc-photo-actions {
		gap: 20px;
	}

	/* Swatches and tiles, same reasoning. */
	.bc-color {
		width: 44px;
		height: 44px;
	}

	.bc-text-colors {
		flex-wrap: wrap;
	}

	.bc-dot {
		width: 44px;
		height: 44px;
	}

	/*
	 * The flow's own buttons, measured at 40px. They carry the steps that end
	 * in a sale, so they are the last place to save four pixels.
	 */
	.bc-button {
		min-height: 48px;
	}

	.bc-tile,
	.bc-font {
		min-width: 64px;
		min-height: 56px;
	}
}

/*
 * The guidelines the shop writes per style: a link above the upload button,
 * and a panel over the editor. Sized and spaced like the rest of the overlay,
 * with a 44px close target so it survives a thumb.
 */
/*
 * Sarah, 2026-09-23: customers were walking past a small grey link. She wants
 * it to stay an underlined text link, not a button and not an icon, only
 * bolder and darker. Navy is the brand's color for links.
 */
.bc-guidelines-link {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	margin: 0 0 6px;
	padding: 8px 0;
	background: none;
	border: 0;
	color: #244357;
	font: inherit;
	/* 14, down from 16 at Sarah's request of 2026-10-01: capitals read big. */
	font-size: 14px;
	font-weight: 700;
	text-align: left;
	/* Capitals asked for by Sarah on 2026-09-23, replacing the no-caps rule. */
	text-transform: uppercase;
	cursor: pointer;
}

/* Only the words are underlined; the ringed mark stays clean. */
.bc-guidelines-text {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bc-guidelines-bang {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 19px;
	height: 19px;
	border: 2px solid currentColor;
	border-radius: 50%;
	font-size: 12px;
	line-height: 1;
}

.bc-guidelines-link[hidden],
.bc-guidelines-callout[hidden] {
	display: none;
}

/*
 * The same link written as an <a> in a page's own content (the Etsy
 * instructions block). Only its words are underlined, as on the button; the
 * theme would otherwise underline the ringed mark too.
 */
a.bc-guidelines-link {
	text-decoration: none;
}

/*
 * Tight in a block of text (Sarah, 2026-10-08: "too much space for
 * nothing"). The theme's 19px gap above and below drops to 8, and the link
 * loses the 8px padding the editor's button carries, which made a 60px box
 * for one 14px line. It keeps 44px of height, the floor for a thumb.
 */
.wp-block-group > .bc-guidelines-callout,
.wp-block-group > .bc-guidelines-callout + * {
	margin-top: 8px;
}

.bc-guidelines-callout .bc-guidelines-link {
	box-sizing: border-box;
	min-height: 44px;
	margin: 0;
	padding: 0;
}

.bc-guidelines-link:hover,
.bc-guidelines-link:focus-visible {
	color: #233036;
}

.bc-guidelines {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(17, 17, 17, 0.55);
}

.bc-guidelines[hidden] {
	display: none;
}

.bc-guidelines-box {
	width: 100%;
	max-width: 420px;
	max-height: 80vh;
	overflow-y: auto;
	background: #ffffff;
	border-radius: 6px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.bc-guidelines-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 12px 8px 12px 20px;
	border-bottom: 1px solid #e3e5e6;
}

.bc-guidelines-head h3 {
	margin: 0;
	font-size: 16px;
	/*
	 * The theme puts headings in caps, and this one reads as a sentence rather
	 * than a label. Sarah's call, 2026-09-02.
	 */
	text-transform: none;
	letter-spacing: normal;
}

.bc-guidelines-close {
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	border: 0;
	background: none;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	color: #233036;
}

.bc-guidelines-body {
	padding: 4px 20px 20px;
}

.bc-guidelines-body p,
.bc-guidelines-body ul,
.bc-guidelines-body ol {
	margin: 12px 0 0;
	font-size: 14px;
	line-height: 1.5;
}

/* Formatted guidelines (0.86.0): lists, headings and pictures from the WP editor. */
.bc-guidelines-body ul,
.bc-guidelines-body ol {
	padding-left: 22px;
}

.bc-guidelines-body li + li {
	margin-top: 4px;
}

.bc-guidelines-body h2,
.bc-guidelines-body h3,
.bc-guidelines-body h4 {
	margin: 16px 0 0;
	font-size: 16px;
	line-height: 1.3;
}

.bc-guidelines-body img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 12px auto 0;
	border-radius: 4px;
}

.bc-guidelines-body .alignleft,
.bc-guidelines-body .alignright {
	float: none;
}

/*
 * The line telling the customer the photo list is tappable. Quiet, because it
 * is a hint and not a warning, but present, because nothing else says it.
 */
.bc-photo-hint {
	margin: 8px 0 0;
	font-size: 12px;
	line-height: 1.4;
	color: #6b6b6b;
}

/* Mug: the strip wrapped on a mug the customer can turn. */

/*
 * As wide as the strip and never wider. The column takes the width of its
 * widest child, and the legend on one line is 710px against a 600px strip,
 * which left 110px of empty frame beside the mug on a computer (Sarah,
 * 2026-10-22). Zero width plus a full minimum: the block fills the column but
 * no longer decides its width, so the legend wraps instead.
 */
.bc-mug {
	width: 0;
	min-width: 100%;
	margin-top: 4px;
}

.bc-mug[hidden] {
	display: none;
}

.bc-mug-marks {
	position: relative;
	height: 34px;
}

.bc-mug-mark {
	position: absolute;
	top: 4px;
	width: 30px;
	height: 30px;
	transform: translateX( -50% );
}

.bc-mug-mark svg {
	display: block;
	width: 100%;
	height: 100%;
}

.bc-mug-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	margin: 4px 0 12px;
	font-size: 13px;
	line-height: 1.4;
	color: #4b575e;
}

.bc-mug-dash {
	display: inline-block;
	width: 24px;
	margin-right: 6px;
	vertical-align: middle;
	border-top: 2px dashed #3cb35a;
}

.bc-mug-dot {
	display: inline-block;
	width: 9px;
	height: 9px;
	margin-right: 6px;
	vertical-align: middle;
	border-radius: 50%;
	background: #3cb35a;
}

.bc-mug-view[hidden] {
	display: none;
}

.bc-mug-view {
	padding: 8px 8px 14px;
	border: 1px solid #e6e6e6;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.06 );
}

.bc-mug-canvas {
	display: block;
	width: 100%;
	max-width: 420px;
	margin: 0 auto;
	cursor: grab;
	/* A sideways drag turns the mug; an upward one still scrolls the page. */
	touch-action: pan-y;
}

.bc-mug-canvas.is-dragging {
	cursor: grabbing;
}

.bc-mug-hint {
	margin: 4px 0 8px;
	text-align: center;
	font-size: 13px;
	color: #5b6870;
}

.bc-mug-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.bc-mug-buttons button {
	padding: 7px 14px;
	border: 1.5px solid #244357;
	border-radius: 8px;
	background: #fff;
	color: #244357;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.bc-mug-buttons button:hover {
	background: #244357;
	color: #fff;
}