/*
 * Shirtcraft builder design system, shared by two presentations of the
 * exact same workflow:
 *   .shirtcraft-builder  — the original [shirtcraft_builder] shortcode,
 *                           embedded in a normal WordPress page (theme
 *                           header/footer stay; never touches html/body
 *                           or takes over the viewport).
 *   .shirtcraft-app       — "version 2," the full-screen page template
 *                           (class-fullscreen-template.php), a real app
 *                           shell (fixed dark sidebar, header, bottom
 *                           bar) selectable per-page, opt-in, additive —
 *                           it does not replace the shortcode version.
 * Both nest the same #shirtcraft-builder-content mount point and reuse
 * router.js/step-*.js completely unchanged; only the surrounding chrome
 * differs. Design tokens are shared so the two never visually drift
 * apart.
 */

/* :root added 2026-08-20 (Donovan: My Designs panel showing "completely
   transparent" instead of its intended solid white) — the actual bug:
   these custom properties were only ever defined on .shirtcraft-builder/
   .shirtcraft-app, so anything appended straight to document.body (the
   My Designs overlay in my-designs.js, and the intro overlay in
   builder-fullscreen.php — both siblings of .shirtcraft-app, not
   descendants of it) couldn't inherit them at all: an unresolved
   var(--shirtcraft-surface) with no fallback makes `background` invalid,
   which for background-color falls back to its initial value,
   transparent. Only the custom properties move to :root, deliberately
   NOT the font-family/color rendering rules below (those stay scoped to
   .shirtcraft-builder/.shirtcraft-app only) — putting those on :root too
   would leak Shirtcraft's font/text colour onto every other page of the
   site, not just this plugin's own. */
:root {
	--shirtcraft-green-900: #0B684A;
	--shirtcraft-green-800: #0F7D59;
	--shirtcraft-green-700: #168B63;
	--shirtcraft-green-600: #20A878;
	--shirtcraft-green-500: #2DBB8B;
	--shirtcraft-green-100: #EAF8F2;
	--shirtcraft-green-50: #F3FCF8;

	--shirtcraft-navy-900: #081426;
	--shirtcraft-navy-800: #0D1D32;
	--shirtcraft-navy-700: #142842;

	--shirtcraft-bg: #F7F9FB;
	--shirtcraft-surface: #FFFFFF;
	--shirtcraft-surface-soft: #FBFCFD;
	--shirtcraft-surface-muted: #F2F4F7;

	--shirtcraft-text-primary: #101828;
	--shirtcraft-text-secondary: #475467;
	--shirtcraft-text-tertiary: #667085;
	--shirtcraft-text-muted: #98A2B3;

	--shirtcraft-border: #E4E7EC;
	--shirtcraft-border-dark: #D0D5DD;

	--shirtcraft-danger: #D92D20;
	--shirtcraft-danger-bg: #FEF3F2;
	--shirtcraft-warning: #B54708;
	--shirtcraft-warning-bg: #FFF7E8;

	--shirtcraft-radius-sm: 8px;
	--shirtcraft-radius-md: 10px;
	--shirtcraft-radius-lg: 14px;

	--shirtcraft-shadow-sm: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
	--shirtcraft-shadow-md: 0 4px 12px rgba(16, 24, 40, .07), 0 2px 4px rgba(16, 24, 40, .04);
	--shirtcraft-shadow-lg: 0 12px 30px rgba(16, 24, 40, .08);

	--shirtcraft-focus: 0 0 0 3px rgba(32, 168, 120, .16);

	--shirtcraft-transition: 160ms cubic-bezier(.4, 0, .2, 1);
}

/* Isolation reset (2026-08-20, Donovan: "I don't want the app inheriting
   styling from the theme... clean and not affected by the style of the
   theme") — builder-fullscreen.php deliberately still calls wp_head()/
   wp_footer() so the rest of the site (analytics, SEO tags, other
   plugins) keeps working, but that means the active theme's own global
   CSS (element-level rules for button/input/a/h1-h6/ul, resets, page-
   builder frameworks like Elementor's frontend.css) still loads and
   cascades onto Shirtcraft's markup too, for any property our own CSS
   doesn't happen to override on that specific element. `all: revert`
   rolls every property back to the browser's own UA-default (not to
   Shirtcraft's styling — that's what the rest of this file, all of it
   positioned *after* this block, re-applies on top via normal cascade:
   same or higher specificity + later source order wins). Every one of
   Shirtcraft's own top-level containers gets this — .shirtcraft-app (the
   full-screen shell), and .shirtcraft-intro/.shirtcraft-lightbox-overlay
   (both appended straight to document.body, siblings of .shirtcraft-app,
   not descendants of it, so they need their own copy of this same
   isolation). box-sizing:border-box is re-asserted explicitly right
   after the revert, since virtually all of this file's own padding/
   width math already assumed that (most themes provide it globally, but
   revert would otherwise roll it back to the UA default of content-box
   and break that math once a theme's own reset is no longer supplying
   it). Deliberately NOT applied to .shirtcraft-builder (the retired
   shortcode presentation) — see the file header docblock; it survives
   in this stylesheet only as the class name on an inner wrapper div
   nested inside .shirtcraft-app now, already covered by that reset. */
.shirtcraft-app,
.shirtcraft-app *,
.shirtcraft-app *::before,
.shirtcraft-app *::after,
.shirtcraft-intro,
.shirtcraft-intro *,
.shirtcraft-intro *::before,
.shirtcraft-intro *::after,
.shirtcraft-lightbox-overlay,
.shirtcraft-lightbox-overlay *,
.shirtcraft-lightbox-overlay *::before,
.shirtcraft-lightbox-overlay *::after {
	all: revert;
	box-sizing: border-box;
}

.shirtcraft-builder,
.shirtcraft-app {
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: var(--shirtcraft-text-primary);
	-webkit-font-smoothing: antialiased;
}

/* Anything appended straight to document.body — outside .shirtcraft-app
   entirely — needs its own font/colour applied explicitly, same reason
   the :root split above exists: it can't inherit from .shirtcraft-app
   since it isn't a descendant of it. */
.shirtcraft-lightbox-overlay,
.shirtcraft-intro {
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	-webkit-font-smoothing: antialiased;
	/* Black text (2026-08-20, Donovan) — without this, anything inside
	   these body-level overlays that doesn't set its own colour falls
	   back to the active theme's default text colour, which is
	   unpredictable outside .shirtcraft-app. */
	color: #101828;
}

/* Small-caps section label (2026-08-20) — .shirtcraft-app-sidebar-heading's
   look, adapted for a light background: used for the previously-bare
   "Sleeve length"/"Collar" <label>s on the Style step (step-collar.js).
   !important for the same reason the reassertion block above needs it —
   this still needs to win over that same block's own generic label
   defaults (label font-weight/text-transform/etc.), which it does via
   the extra class specificity, but only because both are in the same
   !important tier. */
.shirtcraft-field-label {
	display: block;
	margin: 0 0 10px;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: .06em !important;
	text-transform: uppercase !important;
	color: var(--shirtcraft-text-tertiary) !important;
}

/* Layout specific to the embedded (shortcode) presentation only — the
   full-screen .shirtcraft-app shell lays itself out separately below,
   and nests an unstyled-by-these-rules .shirtcraft-builder--embedded
   variant (see far below) so it doesn't get a second centered card
   inside its own main content area. */
/* Fills whatever width WordPress's own content column gives it, edge to
   edge, rather than imposing a second, narrower centered column on top
   of the theme's — see shirtcraft/CLAUDE.md (Donovan, 2026-08-11). */
.shirtcraft-builder {
	width: 100%;
	padding: 28px 24px 48px;
	box-sizing: border-box;
	background: var(--shirtcraft-bg);
	border-radius: var(--shirtcraft-radius-lg);
}

.shirtcraft-builder *,
.shirtcraft-builder *::before,
.shirtcraft-builder *::after,
.shirtcraft-app *,
.shirtcraft-app *::before,
.shirtcraft-app *::after {
	box-sizing: border-box;
}

.shirtcraft-builder img,
.shirtcraft-app img {
	max-width: 100%;
	display: block;
}

/* ---------- Typography ---------- */

.shirtcraft-step h2 {
	margin: 0 0 4px;
	/* !important (2026-08-20) so this reliably wins over both this file's
	   own generic h1-h6 default (font-size:14px, further up this file)
	   and the active theme's own heading styling — see that rule's own
	   comment for the full reasoning. */
	font-size: 26px !important;
	line-height: 33px !important;
	font-weight: 700 !important;
	letter-spacing: -.02em;
	color: var(--shirtcraft-text-primary) !important;
}

.shirtcraft-step h3 {
	margin: 0;
	font-size: 15px;
	line-height: 22px;
	font-weight: 650;
}

.shirtcraft-step label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--shirtcraft-text-secondary);
	margin-top: 20px;
	margin-bottom: 8px;
}

/* ---------- Top bar ---------- */

.shirtcraft-account-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
	border: 1.5px solid var(--shirtcraft-border);
	flex-shrink: 0;
}

/* ---------- My Designs panel ---------- */
/* Native REST-backed panel (2026-08-14), replacing an iframe that used
   to embed a WooCommerce My Account page here — see my-designs.js. */

.shirtcraft-my-designs-panel {
	width: min(640px, 92vw);
	max-height: 85vh;
	overflow-y: auto;
	/* Literal #fff/dark text (2026-08-20, Donovan: "should be solid white,
	   with the text black"), on top of the var(--shirtcraft-surface)/
	   var(--shirtcraft-text-primary) tokens now actually resolving again
	   (see the :root fix above) — belt-and-suspenders so this panel's
	   look doesn't drift if the design tokens change later. The dark
	   backdrop behind the panel (.shirtcraft-lightbox-overlay's own
	   background) is untouched — that's the "slight tint of black" look
	   Donovan explicitly said to keep. */
	background: #fff;
	color: #101828;
	border-radius: 12px;
	padding: 24px;
	box-shadow: 0 24px 48px rgba(0, 0, 0, .35);
}

/* !important font-size (2026-08-20, Donovan: "the text is also too big,
   make it Paragraph") — a bare <h2>/<strong>, same theme-bleed pattern
   fixed elsewhere this session for other unstyled native elements. */
.shirtcraft-my-designs-panel h2 {
	margin: 0 0 16px;
	font-size: 18px !important;
	font-weight: 700 !important;
}

.shirtcraft-my-design-title {
	font-size: 14px !important;
	font-weight: 650 !important;
	color: #101828 !important;
}

.shirtcraft-my-designs-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.shirtcraft-my-design-card {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px;
	border: 1px solid var(--shirtcraft-border);
	border-radius: var(--shirtcraft-radius-md);
	flex-wrap: wrap;
}

.shirtcraft-my-design-thumb {
	width: 64px;
	height: 64px;
	flex-shrink: 0;
	border-radius: 6px;
	overflow: hidden;
	background: var(--shirtcraft-surface-muted);
}

.shirtcraft-my-design-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.shirtcraft-my-design-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
	min-width: 140px;
}

.shirtcraft-my-design-status {
	font-size: 12px;
	color: var(--shirtcraft-text-tertiary);
}

.shirtcraft-my-design-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.shirtcraft-my-design-actions button {
	height: 36px;
	padding: 0 14px;
	font-size: 12px;
	white-space: nowrap;
}

/* ---------- Progress stepper ---------- */

.shirtcraft-progress {
	display: flex;
	align-items: flex-start;
	margin: 4px 0 28px;
	padding: 16px 18px;
	background: var(--shirtcraft-surface);
	border: 1px solid var(--shirtcraft-border);
	border-radius: var(--shirtcraft-radius-md);
	overflow-x: auto;
}

.shirtcraft-progress-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	color: var(--shirtcraft-text-muted);
	flex-shrink: 0;
}

.shirtcraft-progress-circle {
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--shirtcraft-surface-muted);
	color: var(--shirtcraft-text-tertiary);
	font-size: 11px;
	font-weight: 700;
}

.shirtcraft-progress-label {
	font-size: 10px;
	font-weight: 650;
	letter-spacing: .03em;
	white-space: nowrap;
}

.shirtcraft-progress-step.is-active {
	color: var(--shirtcraft-green-700);
}

.shirtcraft-progress-step.is-active .shirtcraft-progress-circle {
	background: var(--shirtcraft-green-600);
	color: #fff;
	box-shadow: 0 0 0 4px rgba(32, 168, 120, .12);
}

.shirtcraft-progress-step.is-complete .shirtcraft-progress-circle {
	background: var(--shirtcraft-green-600);
	color: #fff;
}

.shirtcraft-progress-line {
	width: 28px;
	height: 1px;
	margin: 12px 6px 0;
	background: var(--shirtcraft-border);
	flex-shrink: 0;
}

.shirtcraft-progress-line.is-complete {
	background: var(--shirtcraft-green-600);
}

/* ---------- Step shell ---------- */

.shirtcraft-step {
	background: var(--shirtcraft-surface);
	border: 1px solid var(--shirtcraft-border);
	border-radius: var(--shirtcraft-radius-lg);
	padding: 28px;
}

/* ---------- Inputs ---------- */

.shirtcraft-step input[type='text'],
.shirtcraft-step input[type='number'],
.shirtcraft-step input[type='email'],
.shirtcraft-step select,
.shirtcraft-step textarea {
	width: 100%;
	box-sizing: border-box;
	height: 44px;
	padding: 0 12px;
	border: 1px solid var(--shirtcraft-border);
	border-radius: var(--shirtcraft-radius-sm);
	background: var(--shirtcraft-surface);
	color: var(--shirtcraft-text-primary);
	font-size: 13px;
	font-family: inherit;
	transition: var(--shirtcraft-transition);
}

.shirtcraft-step textarea {
	height: auto;
	padding: 12px;
	line-height: 20px;
	resize: vertical;
}

.shirtcraft-step input::placeholder,
.shirtcraft-step textarea::placeholder {
	color: var(--shirtcraft-text-muted);
}

.shirtcraft-step input:hover,
.shirtcraft-step select:hover,
.shirtcraft-step textarea:hover {
	border-color: var(--shirtcraft-border-dark);
}

.shirtcraft-step input:focus,
.shirtcraft-step select:focus,
.shirtcraft-step textarea:focus {
	outline: none;
	border-color: var(--shirtcraft-green-600);
	box-shadow: var(--shirtcraft-focus);
}

/* ---------- AI box (freeform brief, mockup refinement) ---------- */

.shirtcraft-ai-box {
	margin-top: 20px;
	padding: 16px;
	border: 1px solid var(--shirtcraft-border);
	border-radius: 12px;
	background: var(--shirtcraft-surface);
	box-shadow: var(--shirtcraft-shadow-sm);
	transition: var(--shirtcraft-transition);
}

.shirtcraft-ai-box:focus-within {
	border-color: var(--shirtcraft-green-500);
	box-shadow: 0 0 0 3px rgba(32, 168, 120, .08), var(--shirtcraft-shadow-sm);
}

.shirtcraft-ai-box-label {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 11px;
	font-weight: 750;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--shirtcraft-text-secondary);
	margin: 0 0 10px;
}

/* Design-step logo note, added 2026-08-18. padding (not margin, per
   Donovan's ask) 2% top/bottom for breathing room above and below the
   text itself. */
.shirtcraft-field-note {
	font-size: 12px;
	font-style: italic;
	color: var(--shirtcraft-text-tertiary);
	margin: -4px 0 14px;
	padding: 2% 0;
}

.shirtcraft-ai-box-label .shirtcraft-icon {
	color: var(--shirtcraft-green-600);
	display: flex;
}

.shirtcraft-ai-box textarea {
	border: 0;
	padding: 0;
	height: auto;
	min-height: 90px;
}

.shirtcraft-ai-box textarea:focus {
	box-shadow: none;
}

/* Voice-prompt mic button (2026-08-20) — sits right-aligned under the
   freeform textarea. !important on the same background/border/colour
   properties as every other real <button> in this file, same theme-
   collision reasoning. */
.shirtcraft-voice-row {
	display: flex;
	justify-content: flex-end;
	margin-top: 8px;
}

.shirtcraft-voice-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 32px;
	padding: 0 12px;
	border: 1px solid var(--shirtcraft-border) !important;
	border-radius: 999px;
	background: var(--shirtcraft-surface) !important;
	color: var(--shirtcraft-text-secondary) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	cursor: pointer;
	transition: var(--shirtcraft-transition);
}

.shirtcraft-voice-btn:hover {
	border-color: var(--shirtcraft-border-dark) !important;
}

.shirtcraft-voice-btn.is-listening {
	border-color: var(--shirtcraft-danger) !important;
	background: var(--shirtcraft-danger-bg) !important;
	color: var(--shirtcraft-danger) !important;
}

.shirtcraft-voice-btn-icon {
	display: block;
	width: 14px;
	height: 14px;
	object-fit: contain;
	flex-shrink: 0;
}

.shirtcraft-voice-btn.is-listening .shirtcraft-voice-btn-icon {
	animation: shirtcraft-pulse 1.2s ease-in-out infinite;
}

@keyframes shirtcraft-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: .35; }
}

/* Icon-only variant (2026-08-20) — used beside the guided mode's several
   short single-line fields, where a labeled "Speak" button next to each
   one would be cluttered. */
.shirtcraft-voice-btn--compact {
	width: 32px;
	height: 32px;
	padding: 0;
	justify-content: center;
	border-radius: 50%;
	flex-shrink: 0;
}

/* Field + compact mic button side by side (2026-08-20) — used for each
   of the guided mode's fieldDefs inputs (step-assistant.js), replacing
   the bare <input> when voice input is available. */
.shirtcraft-field-voice-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.shirtcraft-field-voice-row input {
	flex: 1 1 auto;
	min-width: 0;
}

/* ---------- Option / selection cards ---------- */

.shirtcraft-sleeve-options,
.shirtcraft-brief-mode-toggle,
.shirtcraft-logo-decision-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 0;
}

/* Fixed 5-per-row grid (Donovan's call, 2026-08-11) — 9 real collars
   plus one static logo placeholder (step-collar.js) fill exactly two
   rows of 5, sized to fit without the page needing to scroll to see
   them all. Grid, not flex-wrap, so the column count never drifts with
   available width the way flex-wrap's item-by-item wrapping would. */
.shirtcraft-collar-options {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 10px;
	margin: 0;
}

/* !important on background/border/color/font-size (2026-08-20) — these
   are real <button> elements (step-collar.js), which is exactly the kind
   of native element a page-builder theme (Elementor, confirmed active on
   sublimationprints.co.za) commonly styles globally and marks
   !important, which is what was painting these as solid theme-blue
   pills instead of white cards. */
.shirtcraft-option,
.shirtcraft-collar-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-width: 170px;
	flex: 1 1 170px;
	padding: 22px 16px;
	border: 1px solid var(--shirtcraft-border) !important;
	background: var(--shirtcraft-surface) !important;
	border-radius: var(--shirtcraft-radius-md) !important;
	cursor: pointer;
	font-size: 14px !important;
	font-weight: 550 !important;
	color: var(--shirtcraft-text-primary) !important;
	text-align: center;
	transition: var(--shirtcraft-transition);
}

.shirtcraft-option:hover,
.shirtcraft-collar-card:hover {
	border-color: var(--shirtcraft-border-dark) !important;
	transform: translateY(-1px);
	box-shadow: var(--shirtcraft-shadow-sm);
}

/* Grid columns dictate the actual card width, so the collar grid's own
   cards need to shrink to fit their column instead of the shared
   min-width:170px/flex:1 1 170px above (that's still right for sleeve
   options, which stay flex-wrap). */
.shirtcraft-collar-options .shirtcraft-collar-card {
	min-width: 0;
	flex: none;
	width: 100%;
	padding: 10px 8px;
	gap: 6px;
	font-size: 11px;
}

.shirtcraft-collar-card img {
	width: 100%;
	aspect-ratio: 1 / 1;
	height: auto;
	object-fit: cover;
	border-radius: 6px;
	background: var(--shirtcraft-surface-muted);
}

.shirtcraft-collar-card-placeholder {
	cursor: default;
}

.shirtcraft-collar-card-placeholder:hover {
	border-color: var(--shirtcraft-border);
	transform: none;
	box-shadow: none;
}

.shirtcraft-collar-card-placeholder img {
	object-fit: contain;
	background: transparent;
	padding: 6px;
}

.shirtcraft-option-icon {
	display: flex;
	color: var(--shirtcraft-text-tertiary);
	transition: var(--shirtcraft-transition);
}

.shirtcraft-option-icon svg {
	width: 64px;
	height: 64px;
}

.shirtcraft-option.is-selected .shirtcraft-option-icon {
	color: var(--shirtcraft-green-700);
}

.shirtcraft-option-icon-image {
	width: 100px;
	height: 100px;
	object-fit: contain;
}

.shirtcraft-option.is-selected,
.shirtcraft-collar-card.is-selected {
	border: 1.5px solid var(--shirtcraft-green-600) !important;
	background: var(--shirtcraft-green-50) !important;
	box-shadow: 0 0 0 3px rgba(32, 168, 120, .08);
}

.shirtcraft-option.is-selected::after,
.shirtcraft-collar-card.is-selected::after {
	content: '';
	position: absolute;
	top: 8px;
	right: 8px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--shirtcraft-green-600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 10px 10px no-repeat;
}

/* ---------- Buttons ---------- */

.shirtcraft-button-primary,
.shirtcraft-button-secondary,
.shirtcraft-button-ai {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 46px;
	margin: 20px 10px 0 0;
	padding: 0 20px;
	/* !important (2026-08-20, Donovan: "the buttons mustn't be round,
	   square with rounded corners") — real <button> elements, same
	   theme-collision reasoning as every other native button fixed this
	   session. */
	border-radius: 9px !important;
	font-size: 13px;
	font-weight: 650;
	cursor: pointer;
	transition: var(--shirtcraft-transition);
	border: 1px solid transparent;
}

.shirtcraft-button-primary {
	background: var(--shirtcraft-green-600);
	color: #fff;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
}

.shirtcraft-button-primary:hover:not(:disabled) {
	background: var(--shirtcraft-green-700);
	transform: translateY(-1px);
	box-shadow: 0 5px 12px rgba(32, 168, 120, .18);
}

.shirtcraft-button-primary:disabled {
	background: #D0D5DD;
	color: #98A2B3;
	cursor: not-allowed;
	box-shadow: none;
}

.shirtcraft-button-secondary {
	background: var(--shirtcraft-surface);
	color: var(--shirtcraft-text-secondary);
	border-color: var(--shirtcraft-border);
}

.shirtcraft-button-secondary:hover:not(:disabled) {
	border-color: var(--shirtcraft-border-dark);
	background: var(--shirtcraft-surface-muted);
	color: var(--shirtcraft-text-primary);
}

.shirtcraft-button-secondary:disabled {
	color: var(--shirtcraft-text-muted);
	cursor: not-allowed;
}

/* AI-triggered actions (generate/regenerate) get a distinct dark
   treatment from commerce/progress actions (Continue/Approve/Add to
   Cart), which stay green — a deliberate visual split from the design
   reference so "ask the AI to do something" reads differently from
   "move forward in the flow." */
.shirtcraft-button-ai {
	background: var(--shirtcraft-navy-900);
	color: #fff;
}

.shirtcraft-button-ai:hover:not(:disabled) {
	background: var(--shirtcraft-navy-700);
	transform: translateY(-1px);
	box-shadow: var(--shirtcraft-shadow-md);
}

.shirtcraft-button-ai:disabled {
	background: #D0D5DD;
	color: #98A2B3;
	cursor: not-allowed;
}

.shirtcraft-button-ai .shirtcraft-icon {
	color: var(--shirtcraft-green-500);
	display: flex;
}

.shirtcraft-icon {
	display: inline-flex;
	align-items: center;
}

/* ---------- Focus / disabled (global within builder) ---------- */

.shirtcraft-builder button:focus-visible,
.shirtcraft-builder input:focus-visible,
.shirtcraft-builder textarea:focus-visible,
.shirtcraft-builder select:focus-visible,
.shirtcraft-builder [tabindex]:focus-visible,
.shirtcraft-app button:focus-visible,
.shirtcraft-app input:focus-visible,
.shirtcraft-app textarea:focus-visible,
.shirtcraft-app select:focus-visible,
.shirtcraft-app [tabindex]:focus-visible {
	outline: none;
	box-shadow: var(--shirtcraft-focus);
}

.shirtcraft-builder button:disabled,
.shirtcraft-app button:disabled {
	transform: none !important;
}

/* ---------- Badges ---------- */

.shirtcraft-generation-counter {
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding: 0 10px;
	border-radius: 7px;
	background: var(--shirtcraft-green-100);
	color: var(--shirtcraft-green-800);
	font-size: 12px;
	font-weight: 650;
	margin: 0;
}

.shirtcraft-limit-reached {
	margin-top: 12px;
	padding: 10px 12px;
	border-radius: 8px;
	background: var(--shirtcraft-danger-bg);
	color: var(--shirtcraft-danger);
	font-size: 12px;
	font-weight: 600;
}

/* ---------- Loading / spinner ---------- */

.shirtcraft-loading {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 9px;
	color: var(--shirtcraft-text-tertiary);
	font-size: 13px;
	font-weight: 550;
	padding: 20px 0;
}

/* Optional third line (ShirtcraftPreviewWidgets.renderLoading()'s
   showPatienceNote param, added 2026-08-17) — width:100% forces it onto
   its own line under the spinner+label row instead of squeezing into the
   same flex row. */
.shirtcraft-loading-note {
	width: 100%;
	margin: 0;
	font-size: 12px;
	font-weight: 400;
	font-style: italic;
	color: var(--shirtcraft-text-tertiary);
}

/* ---------- Intro/preloader video (2026-08-20) ---------- */

.shirtcraft-intro {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	/* column, not the flex default row (2026-08-20, Donovan: the video was
	   showing beside the login/register form instead of above it) — this
	   was simply never set before; row is flexbox's initial value, so the
	   window and the account-prompt div were laying out side by side. */
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	/* White, not full-bleed dark (Donovan, 2026-08-20 — the video didn't
	   read well stretched edge to edge) — the video now plays inside its
	   own smaller centered card instead. */
	background: #fff;
	opacity: 1;
	transition: opacity .4s ease;
}

.shirtcraft-intro.is-dismissing {
	opacity: 0;
	pointer-events: none;
}

/* The smaller centered "window" the video plays inside (2026-08-20),
   replacing the earlier full-viewport object-fit:cover treatment. Sized
   up again same day (Donovan: "too small") — the min() below caps it at
   whichever is smallest of a fixed max, a viewport-width share, and a
   viewport-height-derived width (so a short/landscape screen can't force
   the 16:9 box taller than the viewport). aspect-ratio is a fixed guess
   at the source video's own 16:9 shape — given before the video has
   loaded so the box (and therefore the loader centered inside it below)
   has real dimensions from first paint, not a collapsed 0-height box
   that would leave the loader pinned near the top instead of genuinely
   centered. */
.shirtcraft-intro-window {
	position: relative;
	width: min(1100px, 92vw, 151vh);
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--shirtcraft-radius-lg, 16px);
	background: #fff;
	box-shadow: var(--shirtcraft-shadow-md, 0 12px 32px rgba(16, 24, 40, .18));
}

/* Caption under the video (2026-08-20) — plain paragraph text, centered
   under .shirtcraft-intro-window (a direct sibling, both centered by
   .shirtcraft-intro's own flex column). */
.shirtcraft-intro-loading-text {
	margin: 16px 0 0;
	text-align: center;
	font-size: 14px;
	color: var(--shirtcraft-text-tertiary, #667085);
}

/* Sound toggle (2026-08-20) — bottom-right of the video window, same
   dark-translucent-pill treatment as the Skip button so both read as
   part of the same control language. z-index clears the video itself
   (which has no z-index of its own, so this just needs to be a later
   sibling — the value here is only to be safe against future additions). */
.shirtcraft-intro-mute {
	position: absolute;
	bottom: 12px;
	right: 12px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid rgba(255, 255, 255, .3) !important;
	border-radius: 50%;
	background: rgba(6, 17, 31, .55) !important;
	color: #fff !important;
	cursor: pointer;
	backdrop-filter: blur(4px);
}

.shirtcraft-intro-mute:hover {
	background: rgba(6, 17, 31, .8) !important;
}

.shirtcraft-intro-video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #fff;
	opacity: 0;
	transition: opacity .3s ease;
	/* Purely decorative/non-interactive — nothing to click, hover, or
	   scrub. Also the real fix for the play-button overlay below: most
	   of these native affordances are hover/interaction-triggered, so a
	   video that can't receive pointer events never has a reason to draw
	   one in the first place (Donovan, 2026-08-20, after the pseudo-
	   element hiding alone didn't fully clear it). */
	pointer-events: none;
}

/* Chrome/Safari both draw their own built-in playback-UI affordances on
   a <video> whenever it isn't definitively playing yet, even with no
   `controls` attribute present in the markup — showed up as a stray
   play icon/control bar sitting over the loader before the video
   actually starts (Donovan, 2026-08-20). This is a browser default, not
   anything this plugin's own markup adds; hiding every one of these
   pseudo-elements (plus intro.js explicitly forcing `video.controls =
   false` as a defensive belt-and-suspenders in case something else on
   the page — a theme/plugin script — sets the attribute back) is the
   standard fix. */
.shirtcraft-intro-video::-webkit-media-controls,
.shirtcraft-intro-video::-webkit-media-controls-panel,
.shirtcraft-intro-video::-webkit-media-controls-start-playback-button,
.shirtcraft-intro-video::-webkit-media-controls-overlay-play-button,
.shirtcraft-intro-video::-webkit-media-controls-play-button,
.shirtcraft-intro-video::-webkit-media-controls-timeline,
.shirtcraft-intro-video::-webkit-media-controls-current-time-display,
.shirtcraft-intro-video::-webkit-media-controls-time-remaining-display,
.shirtcraft-intro-video::-webkit-media-controls-mute-button,
.shirtcraft-intro-video::-webkit-media-controls-volume-slider,
.shirtcraft-intro-video::-webkit-media-controls-fullscreen-button,
.shirtcraft-intro-video::-webkit-media-controls-toggle-closed-captions-button {
	display: none !important;
	-webkit-appearance: none;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* Swapped in once the video has an actual frame to show (intro.js's
   `loadeddata` listener) — until then the small Lottie loader below is
   what's visible, not a blank white frame. */
.shirtcraft-intro.has-video .shirtcraft-intro-video {
	opacity: 1;
}

.shirtcraft-intro.has-video .shirtcraft-intro-loader {
	opacity: 0;
}

/* Absolutely centered within .shirtcraft-intro-window rather than relying
   on flex centering (Donovan, 2026-08-20: "the preloaded lottie file is
   not in the middle") — pins it dead center regardless of the window's
   own sizing/aspect-ratio. */
.shirtcraft-intro-loader {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	transition: opacity .3s ease;
}

.shirtcraft-intro-skip {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 38px;
	padding: 0 16px;
	border: 1px solid rgba(255, 255, 255, .3) !important;
	border-radius: 999px;
	background: rgba(6, 17, 31, .55) !important;
	color: #fff !important;
	font-size: 13px;
	font-weight: 650;
	cursor: pointer;
	backdrop-filter: blur(4px);
	/* Hidden (not `hidden` attribute) until the real app has actually
	   rendered — see router.js's 'shirtcraft:app-ready' event and
	   intro.js — kept in the DOM so the reveal can transition instead of
	   snapping in. */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .3s ease, background .2s ease;
}

.shirtcraft-intro-skip.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.shirtcraft-intro-skip:hover {
	background: rgba(6, 17, 31, .8);
}

/* ---------- Intro: signed-out account nudge (2026-08-20) ---------- */

/* Logged-in stays exactly as before (video centered via the base
   .shirtcraft-intro rule's align-items:center). Logged-out anchors to the
   top with a fixed 100px gap instead, and swaps overflow to auto since
   video + text + form together can exceed one viewport's height on a
   short screen — the base rule's overflow:hidden would otherwise cut the
   form off with no way to reach it. */
/* justify-content, not align-items (2026-08-20, real bug found: .shirtcraft-intro
   is flex-direction:column, so align-items controls the *horizontal*
   axis — setting it to flex-start left-aligned the video/form instead of
   anchoring them to the top, which is what justify-content controls on
   a column container. Everything now stays horizontally centered
   (inherited from the base .shirtcraft-intro rule) while still
   anchoring to the top via the correct axis. */
.shirtcraft-intro.is-logged-out {
	justify-content: flex-start;
	overflow-y: auto;
	padding: 100px 20px 40px;
}

/* Smaller than the logged-in window, and additionally capped by viewport
   height (2026-08-20, Donovan: "auto size to the screen in order for the
   form to be below it") — 71vh ≈ a 40vh-tall video at this fixed 16:9
   ratio, so on a short screen the video shrinks instead of pushing the
   form (and Create account/Sign in toggle) below the fold. */
.shirtcraft-intro.is-logged-out .shirtcraft-intro-window {
	width: min(640px, 90vw, 71vh);
}

.shirtcraft-intro-account {
	width: min(420px, 90vw);
	margin-top: 28px;
	text-align: center;
}

.shirtcraft-intro-account-text {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.5;
	/* Black (2026-08-20, Donovan: "the forms text should be black") — was
	   the muted secondary grey. */
	color: #101828;
}

/* WooCommerce's own notice markup (wc_print_notices(), core CSS already
   enqueued site-wide via wp_head()/wp_enqueue_scripts — untouched here,
   just re-aligned/spaced to sit sensibly in this narrow column). */
/* WooCommerce's own notice markup (wc_print_notices()) normally gets its
   red/green banner look from WooCommerce's own core CSS — but that's
   exactly the kind of "outside .shirtcraft-app" styling the isolation
   reset above (all:revert) now strips, same as any theme CSS, since
   nothing in this file previously re-implemented it. Re-built here
   directly rather than carving out an exception to the reset. */
.shirtcraft-intro-account ul.woocommerce-error,
.shirtcraft-intro-account ul.woocommerce-message,
.shirtcraft-intro-account ul.woocommerce-info {
	margin: 0 0 16px;
	padding: 12px 14px;
	list-style: none;
	text-align: left;
	font-size: 13px;
	border-radius: 8px;
	border-left: 4px solid;
}

.shirtcraft-intro-account ul.woocommerce-error {
	background: var(--shirtcraft-danger-bg);
	border-left-color: var(--shirtcraft-danger);
	color: var(--shirtcraft-danger);
}

.shirtcraft-intro-account ul.woocommerce-message,
.shirtcraft-intro-account ul.woocommerce-info {
	background: var(--shirtcraft-green-50);
	border-left-color: var(--shirtcraft-green-600);
	color: var(--shirtcraft-green-800);
}

.shirtcraft-intro-account ul.woocommerce-error li,
.shirtcraft-intro-account ul.woocommerce-message li,
.shirtcraft-intro-account ul.woocommerce-info li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.shirtcraft-intro-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-align: left;
}

/* The `hidden` attribute alone loses to the `display: flex` above —
   author styles beat the browser's own [hidden]{display:none} default
   regardless of selector order, so the toggled-off form was still
   rendering (both register and login showing at once, 2026-08-20,
   Donovan) until this explicit override. */
.shirtcraft-intro-form[hidden] {
	display: none;
}

.shirtcraft-intro-form-row {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
}

.shirtcraft-intro-form-row label {
	font-size: 12px;
	font-weight: 650;
	/* Black (2026-08-20, Donovan) — was the muted secondary grey. */
	color: #101828;
}

.shirtcraft-intro-form-row input {
	height: 42px;
	padding: 0 12px;
	border: 1px solid var(--shirtcraft-border);
	border-radius: 8px;
	font-size: 14px;
	color: #101828;
}

.shirtcraft-intro-form-note {
	margin: 0;
	font-size: 12px;
	font-style: italic;
	color: var(--shirtcraft-text-tertiary);
}

.shirtcraft-intro-form .shirtcraft-button-primary {
	width: 100%;
	margin: 4px 0 0;
}

/* !important (2026-08-20) — a real <button>, same theme-button collision
   as every other native button fixed this session ("ugly blue
   background" was the theme's own default button fill showing through
   `background: none`). */
.shirtcraft-intro-account-toggle {
	display: inline-block;
	margin-top: 14px;
	padding: 0;
	border: 0 !important;
	background: none !important;
	font-size: 12px !important;
	font-weight: 650 !important;
	color: var(--shirtcraft-green-700) !important;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.shirtcraft-intro-account-toggle:hover {
	color: var(--shirtcraft-green-800, var(--shirtcraft-green-700));
}

/* ---------- Intro: Terms & Conditions gate (2026-08-20) ---------- */

/* Its own full-screen fixed layer, independent of .shirtcraft-intro's own
   flex layout — so it doesn't matter whether the video behind it is in
   the centered (logged-in) or top-anchored (logged-out — though this
   modal only ever renders for a signed-in user, see builder-fullscreen.php)
   arrangement. z-index only needs to clear this overlay's own other
   children (skip button is 2, loader is 1). */
.shirtcraft-terms-modal {
	position: fixed;
	inset: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(6, 17, 31, .55);
}

.shirtcraft-terms-modal-inner {
	width: min(560px, 92vw);
	max-height: 85vh;
	overflow-y: auto;
	background: #fff;
	color: #101828;
	border-radius: var(--shirtcraft-radius-lg, 14px);
	padding: 28px;
	box-shadow: 0 24px 48px rgba(0, 0, 0, .35);
}

.shirtcraft-terms-modal-inner h3 {
	margin: 0 0 14px;
	font-size: 18px;
}

.shirtcraft-terms-body {
	font-size: 13px;
	line-height: 1.6;
	color: #101828;
	margin-bottom: 18px;
}

.shirtcraft-terms-body h4 {
	margin: 16px 0 4px;
	font-size: 13px;
}

.shirtcraft-terms-body h4:first-child {
	margin-top: 0;
}

.shirtcraft-terms-body p {
	margin: 0 0 10px;
}

.shirtcraft-terms-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 13px;
	color: #101828;
	margin-bottom: 18px;
	cursor: pointer;
}

.shirtcraft-terms-checkbox input {
	margin-top: 2px;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	cursor: pointer;
}

.shirtcraft-terms-modal-inner .shirtcraft-button-primary {
	width: 100%;
	margin: 0;
}

/* ---------- Generating overlay (Lottie), added 2026-08-18 ---------- */

/* Sits on top of .shirtcraft-image-wrap's existing content (a placeholder,
   or a previous result during Regenerate/refinement) rather than replacing
   it — the wrap itself already has position:relative. White background
   (Donovan's instruction) so it reads as a clean overlay regardless of
   what's showing underneath; the player itself stays transparent so the
   animation isn't sitting in its own visible box. */
.shirtcraft-lottie-overlay {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 16px;
	text-align: center;
	background: rgba(255, 255, 255, 0.94);
}

.shirtcraft-lottie-player {
	width: 110px;
	height: 110px;
	background: transparent;
}

.shirtcraft-lottie-label {
	font-size: 13px;
	font-weight: 550;
	color: var(--shirtcraft-text-tertiary);
}

/* renderLottieBlock()'s plain (non-overlay) variant, e.g. My Designs'
   loading state — .shirtcraft-loading is normally a horizontal row
   (icon + label side by side), too cramped for the larger Lottie player;
   this switches it to a centered column instead. */
.shirtcraft-loading-lottie {
	flex-direction: column;
	justify-content: center;
	padding: 32px 0;
}

.shirtcraft-spinner {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	border: 2px solid var(--shirtcraft-green-100);
	border-top-color: var(--shirtcraft-green-600);
	border-radius: 50%;
	animation: shirtcraft-spin .7s linear infinite;
}

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

.shirtcraft-error {
	color: var(--shirtcraft-danger);
}

/* ---------- Mockup / shirt preview (the visual hero) ---------- */

.shirtcraft-preview-stage {
	margin-top: 20px;
	padding: 24px;
	min-height: 280px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--shirtcraft-surface-soft);
	border: 1px solid var(--shirtcraft-border);
	border-radius: var(--shirtcraft-radius-lg);
}

/* Translucent logo watermark instead of plain "waiting" text, wherever a
   preview box has nothing to show yet (Donovan, 2026-08-11). */
.shirtcraft-preview-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.shirtcraft-preview-placeholder-logo {
	width: 35%;
	max-width: 90px;
	height: auto;
	opacity: .5;
}

.shirtcraft-mockup-preview {
	display: block;
	max-width: 100%;
	max-height: 420px;
	margin: 0 auto;
	border-radius: 8px;
	filter: drop-shadow(0 18px 18px rgba(16, 24, 40, .10));
}

/* .shirtcraft-image-wrap's base rule (below) forces a fixed square sized
   to 100% of its container's width — right for the panel grid (compact,
   consistent card sizes), wrong for this single full-width hero preview:
   the wrap ballooned to match the wide container while the image itself
   stayed capped at max-height:420px above, leaving a large empty block
   around a much smaller image (Donovan, 2026-08-12). Scoped higher-
   specificity override so the wrap hugs the actual (capped) image size
   instead. */
.shirtcraft-preview-stage .shirtcraft-image-wrap {
	width: auto;
	max-width: 100%;
	aspect-ratio: auto;
	/* Found 2026-08-20 (Donovan, mobile): before an image exists, this wrap
	   otherwise collapses to the height of whatever's inside it (the small
	   placeholder logo) — on a narrow phone width that logo (sized
	   relative to the wrap's own width) shrinks well below the ~220-260px
	   the generating overlay below actually needs (110px Lottie player +
	   label + patience-note paragraph), and the base .shirtcraft-image-wrap
	   rule's overflow:hidden then clips that overlay's content top and
	   bottom. min-height guarantees room for it regardless of screen
	   width, matching .shirtcraft-preview-stage's own min-height so the
	   box never looks emptier once a real image loads and takes over.
	   overflow stays hidden — with this floor in place clipping shouldn't
	   recur, and hidden still keeps the image's own rounded corners clean. */
	min-height: 280px;
	border: none;
	background: transparent;
}

.shirtcraft-preview-stage .shirtcraft-image-wrap img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 420px;
	object-fit: contain;
	margin: 0 auto;
}

/* ---------- Panel grid ---------- */

.shirtcraft-panel-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin: 20px 0 0;
}

.shirtcraft-panel-card {
	/* Fixed 2026-08-18 (Donovan: panel cards showing up in different
	   sizes) — a CSS Grid item's default min-width is `auto`, which
	   respects its content's own min-content size and can push a track
	   wider than its fair 1fr share, breaking the equal-column layout
	   .shirtcraft-panel-grid's grid-template-columns already asks for.
	   min-width: 0 removes that floor so every card genuinely gets the
	   same width regardless of what's inside it (image, colour picker,
	   etc.) — the box itself; .shirtcraft-image-wrap's own aspect-ratio:1/1
	   is what keeps the artwork preview itself square within that box. */
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 10px;
	padding: 16px;
	border: 1px solid var(--shirtcraft-border);
	border-radius: var(--shirtcraft-radius-md);
	background: var(--shirtcraft-surface);
	transition: var(--shirtcraft-transition);
}

.shirtcraft-panel-card:hover {
	box-shadow: var(--shirtcraft-shadow-sm);
}

.shirtcraft-panel-card.is-approved {
	border-color: var(--shirtcraft-green-500);
	background: var(--shirtcraft-green-50);
}

/* Tighter spacing between the collar card's three options (2026-08-20,
   Donovan: "I want the options to be closer to each other"), !important
   since even this class-vs-class override was still losing to something
   else on the live site (Donovan: "the spacing... is still not equal") —
   overrides the panel card's own generic 10px flex gap. */
.shirtcraft-collar-color-card {
	gap: 6px !important;
}

/* Flat-colour collar, added 2026-08-18 */

/* Column, not row (2026-08-18, was a small square swatch beside its
   label) — the bar now spans the full card width, with the label
   underneath it instead of beside it. */
/* Compact swatch-plus-label row (2026-08-20, Donovan's ask for "a modern
   html5 colour picker" — was a full-width flat bar before). Still the
   same native input[type=color]; the -webkit-color-swatch overrides
   below just strip the browser's own default border/inset so it reads
   as a clean rounded square instead of that default chrome. */
/* Left-aligned with the same 8px gap as the two checkbox rows above it
   (2026-08-20, Donovan: "Choose a colour label needs to be inline with
   the other 2 options with the same spacing") — was centered with a
   slightly different gap, reading as a visually distinct row instead of
   a third option in the same list. */
/* align-items: flex-start (2026-08-20) — matches .shirtcraft-collar-match-mockup's
   own alignment exactly (that row's checkbox sits flush with the text's
   first line via a 2px top margin, not vertically centered against the
   whole label block) — was `center` here, a real source of the "3
   options don't look identical" mismatch beyond just gap/size. */
.shirtcraft-collar-swatch-wrap {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 8px !important;
	width: 100%;
}

/* Exactly 16x16 (2026-08-20, Donovan: "the colour chooser box must be
   exactly the same size as the tick boxes") — matches
   .shirtcraft-collar-match-mockup input[type=checkbox] pixel-for-pixel,
   including the same 2px top margin for identical vertical alignment.
   !important given every other size/spacing value on this card needed
   it to actually stick. */
.shirtcraft-collar-swatch {
	width: 16px !important;
	height: 16px !important;
	margin-top: 2px;
	flex-shrink: 0;
	padding: 0;
	border: 1px solid var(--shirtcraft-border);
	border-radius: 4px;
	cursor: pointer;
	background: none;
	-webkit-appearance: none;
	appearance: none;
	overflow: hidden;
}

.shirtcraft-collar-swatch::-webkit-color-swatch-wrapper {
	padding: 0;
}

.shirtcraft-collar-swatch::-webkit-color-swatch,
.shirtcraft-collar-swatch::-moz-color-swatch {
	border: none;
	border-radius: 4px;
}

/* Both this and .shirtcraft-collar-match-mockup below are <label>
   elements — the exact tag the active theme was found styling as huge
   uppercase text (same root cause as .shirtcraft-field-label's own fix
   earlier). !important + the same font-size/weight/colour on both, so
   every line of text on this card reads consistently (Donovan,
   2026-08-20: "all in the same font and colour"). */
.shirtcraft-collar-hex-label {
	font-size: 13px !important;
	font-weight: 600 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	color: var(--shirtcraft-text-secondary) !important;
}

.shirtcraft-collar-match-mockup {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	width: 100%;
	/* No margin — spacing between the two checkboxes/swatch is controlled
	   entirely by .shirtcraft-collar-color-card's own flex gap now
	   (2026-08-20), so it isn't compounded on top of a per-row margin too. */
	margin: 0;
	font-size: 13px !important;
	font-weight: 600 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	line-height: 1.4;
	color: var(--shirtcraft-text-secondary) !important;
	text-align: left;
	cursor: pointer;
}

.shirtcraft-collar-match-mockup input[type='checkbox'] {
	margin-top: 2px;
	flex-shrink: 0;
	width: 16px !important;
	height: 16px !important;
	cursor: pointer;
}

/* !important (2026-08-20, Donovan: "the labels Chest, Back, Left sleeve
   are too big") — a bare theme-styled <h3>, same pattern fixed
   elsewhere this session. */
.shirtcraft-panel-card h3 {
	margin: 0;
	font-size: 13px !important;
	font-weight: 650 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

.shirtcraft-panel-status-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--shirtcraft-green-700);
}

.shirtcraft-panel-status-badge .shirtcraft-icon {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--shirtcraft-green-600);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Fixed square so every panel card in the grid reads as the same size
   regardless of that panel's own print aspect ratio (chest/back/sleeve/
   collar sizes all differ) — Donovan, 2026-08-11. */
.shirtcraft-image-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 8px;
	border: 1px solid var(--shirtcraft-border);
	cursor: zoom-in;
	background: var(--shirtcraft-surface-muted);
}

.shirtcraft-image-wrap img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
	border: none;
	border-radius: 0;
	transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}

/* 3x hover zoom (Donovan, 2026-08-11, decreased from 5x on 2026-08-12) —
   CSS fallback only; every .shirtcraft-image-wrap that gets
   ShirtcraftPreviewWidgets.bindZoomPan() (mockup preview, and panels as
   of 2026-08-12) sets its own inline transform on mousemove instead,
   which wins over this via specificity. */
.shirtcraft-image-wrap:hover img {
	transform: scale(3);
}

/* Plain single-colour icon, no button chip behind it (Donovan,
   2026-08-11 — was a round dark button with an emoji glyph before). */
/* !important on background/border/colour (2026-08-20) — a real <button>,
   same theme-button-collision class as .shirtcraft-option etc. (see the
   isolation-reset comment near the top of this file) — was showing the
   theme's own blue/yellow button colours instead of a plain white icon. */
.shirtcraft-zoom-btn {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none !important;
	border: none !important;
	padding: 0;
	color: #fff !important;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6));
	cursor: pointer;
}

/* Real magnify-icon image (2026-08-20) replacing the inline SVG — same
   drop-shadow as the button itself so it stays visible over any preview
   image regardless of colour. */
.shirtcraft-zoom-btn-icon {
	display: block;
	width: 16px;
	height: 16px;
	object-fit: contain;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6));
}

/* Cycle back through a panel's up-to-4 generated versions (Donovan,
   2026-08-14) — sits between the main preview and the Regenerate/Approve
   buttons, only rendered once there's more than one version to pick
   from. */
.shirtcraft-panel-thumbnails {
	display: flex;
	gap: 6px;
	width: 100%;
	justify-content: center;
	flex-wrap: wrap;
}

.shirtcraft-panel-thumbnail {
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 6px;
	border: 2px solid var(--shirtcraft-border);
	overflow: hidden;
	cursor: pointer;
	background: var(--shirtcraft-surface-muted);
	transition: var(--shirtcraft-transition);
}

.shirtcraft-panel-thumbnail img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.shirtcraft-panel-thumbnail.is-active {
	border-color: var(--shirtcraft-green-600);
}

.shirtcraft-panel-thumbnail:disabled {
	cursor: default;
	opacity: .6;
}

.shirtcraft-lightbox-overlay {
	position: fixed;
	inset: 0;
	background: rgba(6, 17, 31, .8);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100000;
	cursor: zoom-out;
	backdrop-filter: blur(2px);
}

/* My Designs reuses .shirtcraft-lightbox-overlay for its own full-panel
   modal (my-designs.js) — not an enlarged image the shopper closes by
   clicking anywhere, so the zoom-out cursor above doesn't apply here
   (Donovan, 2026-08-20: "the cursor icon becomes a magnifying glass, it
   shouldn't do that"). More specific selector wins over the shared class
   at equal specificity since it's declared later in the file. */
.shirtcraft-my-designs-overlay {
	cursor: default;
}

.shirtcraft-lightbox-overlay img {
	max-width: 90vw;
	max-height: 90vh;
	border-radius: 8px;
}

/* !important (2026-08-20) — same theme-button collision as the zoom
   button above. */
.shirtcraft-lightbox-close {
	position: absolute;
	top: 20px;
	right: 24px;
	background: transparent !important;
	color: #fff !important;
	border: none !important;
	font-size: 2.2em;
	line-height: 1;
	cursor: pointer;
}

.shirtcraft-panel-card .shirtcraft-button-primary,
.shirtcraft-panel-card .shirtcraft-button-secondary,
.shirtcraft-panel-card .shirtcraft-button-ai,
.shirtcraft-logo-decision-card .shirtcraft-button-primary,
.shirtcraft-logo-decision-card .shirtcraft-button-secondary,
.shirtcraft-logo-decision-card .shirtcraft-button-ai {
	height: 38px;
	width: 100%;
	margin: 4px 0 0;
	padding: 0 12px;
	font-size: 12px;
}

/* Regenerate's "what would you like to change?" box (2026-08-20) — a
   scaled-down .shirtcraft-ai-box, sized for a panel card instead of a
   full step. */
.shirtcraft-panel-refine-box {
	margin-top: 8px;
	padding: 10px;
	text-align: left;
}

.shirtcraft-panel-refine-box textarea {
	min-height: 50px;
	font-size: 12px;
}

.shirtcraft-panel-refine-actions {
	display: flex;
	gap: 8px;
	margin-top: 8px;
}

.shirtcraft-panel-refine-actions .shirtcraft-button-secondary,
.shirtcraft-panel-refine-actions .shirtcraft-button-ai {
	flex: 1 1 0;
	margin: 0;
}

/* Sleeve-only "reject this one, use the other sleeve design on both"
   action (2026-08-20). */
.shirtcraft-panel-reject-wrap {
	width: 100%;
}

/* Two stacked lines, black text, no red (2026-08-20, Donovan: "I don't
   like the red") — was a single red-tinted run-on line. */
.shirtcraft-button-reject {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	white-space: normal;
	line-height: 1.3;
	height: auto;
	min-height: 38px;
	padding: 8px 12px;
	color: #101828;
}

.shirtcraft-button-reject:hover:not(:disabled) {
	background: var(--shirtcraft-surface-muted);
	color: #101828;
}

/* ---------- Logo/name decision cards ---------- */

.shirtcraft-logo-decision-card {
	flex: 1 1 260px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 18px;
	border: 1px solid var(--shirtcraft-border);
	border-radius: var(--shirtcraft-radius-md);
	background: var(--shirtcraft-surface);
}

.shirtcraft-logo-decision-card h3 {
	margin: 0 0 2px;
}

.shirtcraft-logo-decision-card > p {
	margin: 0 0 4px;
	color: var(--shirtcraft-text-tertiary);
	font-size: 12px;
}

/* ---------- Upload dropzone ---------- */

/* ---------- ChatGPT/Gemini badges + overlay (Upload my own design) ---------- */

.shirtcraft-upload-mode-button {
	gap: 8px;
}

.shirtcraft-ai-tool-badges {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Real ChatGPT/Gemini logo files now (2026-08-20, Donovan's own uploads,
   assets/images/chatgpt-logo.webp / gemini-logo.webp — replacing the
   hand-drawn SVG approximations, which weren't reading as recognizable),
   given their own light circular backdrop for visibility against the
   button background. */
.shirtcraft-ai-tool-logo {
	display: block !important;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--shirtcraft-surface-muted) !important;
	object-fit: contain;
	padding: 3px;
	flex-shrink: 0;
}

.shirtcraft-ai-tools-tips-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: -4px 0 10px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 12px;
	font-weight: 600;
	color: var(--shirtcraft-text-secondary);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.shirtcraft-ai-tools-tips-link:hover {
	color: var(--shirtcraft-text-primary);
}

.shirtcraft-ai-tools-modal {
	position: relative;
	width: min(420px, 90vw);
	max-height: 90vh;
	overflow-y: auto;
	padding: 28px 24px 24px;
	border-radius: var(--shirtcraft-radius-md);
	background: var(--shirtcraft-surface);
	box-shadow: var(--shirtcraft-shadow-md);
	text-align: center;
	cursor: default;
}

.shirtcraft-ai-tools-modal .shirtcraft-ai-tool-badges {
	justify-content: center;
	margin-bottom: 12px;
}

.shirtcraft-ai-tools-modal .shirtcraft-ai-tool-badges .shirtcraft-ai-tool-logo {
	width: 34px;
	height: 34px;
}

.shirtcraft-ai-tools-modal h3 {
	margin: 0 0 10px;
	font-size: 17px;
}

.shirtcraft-ai-tools-modal > p {
	margin: 0 0 18px;
	font-size: 13px;
	color: var(--shirtcraft-text-secondary);
	line-height: 1.5;
}

.shirtcraft-ai-tools-close {
	color: var(--shirtcraft-text-tertiary);
}

.shirtcraft-ai-tool-links {
	display: flex;
	gap: 10px;
	margin-bottom: 18px;
}

.shirtcraft-ai-tool-link {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 44px;
	border: 1px solid var(--shirtcraft-border);
	border-radius: 9px;
	font-size: 13px;
	font-weight: 650;
	color: var(--shirtcraft-text-primary);
	text-decoration: none;
	transition: var(--shirtcraft-transition);
}

.shirtcraft-ai-tool-link:hover {
	border-color: var(--shirtcraft-border-dark);
	background: var(--shirtcraft-surface-muted);
	transform: translateY(-1px);
}

.shirtcraft-ai-tools-modal .shirtcraft-button-primary {
	width: 100%;
	margin: 0;
}

.shirtcraft-upload {
	position: relative;
	min-height: 120px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 8px;
	padding: 20px;
	border: 1.5px dashed var(--shirtcraft-border-dark);
	border-radius: 12px;
	background: var(--shirtcraft-surface-soft);
	text-align: center;
	cursor: pointer;
	transition: var(--shirtcraft-transition);
}

.shirtcraft-upload:hover,
.shirtcraft-upload.is-dragging {
	border-color: var(--shirtcraft-green-600);
	background: var(--shirtcraft-green-50);
}

.shirtcraft-upload input[type='file'] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.shirtcraft-upload-icon {
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 9px;
	background: var(--shirtcraft-green-100);
	color: var(--shirtcraft-green-700);
}

.shirtcraft-upload-title {
	font-size: 13px;
	font-weight: 650;
	color: var(--shirtcraft-text-primary);
}

.shirtcraft-upload-description {
	font-size: 11px;
	color: var(--shirtcraft-text-muted);
}

.shirtcraft-logo-upload-preview {
	max-width: 160px;
	max-height: 160px;
	margin-top: 12px;
	border: 1px solid var(--shirtcraft-border);
	border-radius: 8px;
	background:
		repeating-conic-gradient(#f2f4f7 0% 25%, #ffffff 0% 50%)
		50% / 16px 16px;
	object-fit: contain;
}

/* Multi-logo gallery, added 2026-08-18 (replaces the single-logo
   preview above for a project with more than one uploaded file — that
   rule stays for anything still reading it, but new markup uses these). */

.shirtcraft-logo-gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 12px;
}

.shirtcraft-logo-gallery-item {
	position: relative;
	width: 64px;
	height: 64px;
}

.shirtcraft-logo-gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border: 1px solid var(--shirtcraft-border);
	border-radius: 8px;
	background:
		repeating-conic-gradient(#f2f4f7 0% 25%, #ffffff 0% 50%)
		50% / 12px 12px;
}

.shirtcraft-logo-gallery-remove {
	position: absolute;
	top: -6px;
	right: -6px;
	width: 20px;
	height: 20px;
	line-height: 18px;
	padding: 0;
	border: 1px solid var(--shirtcraft-border);
	border-radius: 50%;
	background: var(--shirtcraft-surface);
	color: var(--shirtcraft-text-secondary);
	font-size: 14px;
	cursor: pointer;
}

.shirtcraft-logo-assignment-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-top: 1px solid var(--shirtcraft-border);
}

.shirtcraft-logo-assignment-row:first-of-type {
	border-top: none;
}

.shirtcraft-logo-assignment-thumb {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	object-fit: contain;
	border: 1px solid var(--shirtcraft-border);
	border-radius: 6px;
	background:
		repeating-conic-gradient(#f2f4f7 0% 25%, #ffffff 0% 50%)
		50% / 10px 10px;
}

/* ---------- Sizing rows ---------- */

.shirtcraft-sizing-rows {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 20px 0 0;
}

/* Card styling lives on the outer wrapper (thumbnail + grid together, added
   2026-08-18) so the mockup thumbnail reads as part of the same row card,
   not a separate floating element beside it. */
.shirtcraft-sizing-row-outer {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px;
	border: 1px solid var(--shirtcraft-border);
	border-radius: var(--shirtcraft-radius-sm);
	background: var(--shirtcraft-surface-soft);
}

.shirtcraft-sizing-thumb {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border-radius: 6px;
	object-fit: cover;
	border: 1px solid var(--shirtcraft-border);
}

.shirtcraft-sizing-row {
	display: grid;
	grid-template-columns: 130px 90px 1fr auto;
	gap: 10px;
	align-items: center;
	flex: 1 1 auto;
	min-width: 0;
}

.shirtcraft-sizing-row select,
.shirtcraft-sizing-row input {
	height: 40px;
}

.shirtcraft-sizing-name-wrap {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.shirtcraft-sizing-name-caption {
	font-size: 11px;
	color: var(--shirtcraft-text-muted);
	margin: 8px 0 0;
}

.shirtcraft-price-total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-top: 20px;
	padding: 16px 18px;
	background: var(--shirtcraft-navy-900);
	border-radius: var(--shirtcraft-radius-md);
	color: #fff;
}

.shirtcraft-price-total-label {
	font-size: 11px;
	font-weight: 650;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
}

.shirtcraft-price-total-value {
	font-size: 22px;
	font-weight: 750;
	letter-spacing: -.02em;
	color: #fff;
}

/* ---------- Logo & Name (Sizing & Cart step, 2026-08-12) ---------- */

.shirtcraft-logo-name-section {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 28px 0;
	padding: 18px;
	border: 1px solid var(--shirtcraft-border);
	border-radius: var(--shirtcraft-radius-md);
	background: var(--shirtcraft-surface);
}

/* !important (2026-08-20, Donovan: "Team/Company Logo & Name is also too
   big") — same bare-<h3>-inherits-theme-styling pattern. */
.shirtcraft-logo-name-section h3 {
	margin: 0 0 2px;
	font-size: 15px !important;
	font-weight: 700 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

.shirtcraft-logo-name-note {
	margin: 0 0 12px;
	color: var(--shirtcraft-text-tertiary);
	font-size: 12px;
}

.shirtcraft-logo-name-section label {
	margin-top: 12px;
}

.shirtcraft-logo-name-calc {
	margin-top: 16px;
	padding: 12px 14px;
	border-radius: var(--shirtcraft-radius-sm);
	background: var(--shirtcraft-surface-soft);
}

.shirtcraft-logo-name-calc ul {
	margin: 0;
	padding: 0 0 0 18px;
	font-size: 13px;
}

.shirtcraft-logo-name-calc-empty {
	margin: 0;
	font-size: 13px;
	color: var(--shirtcraft-text-tertiary);
}

.shirtcraft-logo-name-calc-total {
	margin: 8px 0 0;
	font-weight: 650;
}

.shirtcraft-logo-name-calc-namenum {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--shirtcraft-border);
}

.shirtcraft-logo-name-calc-subheading {
	margin: 0 0 4px;
	font-size: 12px;
	font-weight: 650;
}

/*
 * Responsive: the builder is embedded via shortcode into an unknown
 * theme's content column, so it must hold up on its own at tablet and
 * phone widths rather than assuming a wide desktop container.
 */
@media (max-width: 900px) {
	.shirtcraft-panel-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.shirtcraft-builder {
		padding: 18px 14px 36px;
		border-radius: 0;
	}

	.shirtcraft-step {
		padding: 18px;
	}

	.shirtcraft-step h2 {
		font-size: 21px !important;
		line-height: 27px !important;
	}

	.shirtcraft-progress {
		padding: 12px;
	}

	.shirtcraft-progress-label {
		display: none;
	}

	.shirtcraft-progress-line {
		width: 16px;
		margin: 0 4px;
	}

	/* 2 next to each other on mobile "so long" (Donovan, 2026-08-11) —
	   the 5-per-row desktop grid above is being revisited for mobile
	   separately; this is the stopgap. */
	.shirtcraft-collar-options {
		grid-template-columns: repeat(2, 1fr);
	}

	.shirtcraft-panel-grid {
		grid-template-columns: 1fr;
	}

	.shirtcraft-sizing-row {
		grid-template-columns: 1fr 1fr;
		row-gap: 8px;
	}

	.shirtcraft-sizing-row > *:nth-child(4) {
		grid-column: 1 / -1;
	}

	.shirtcraft-button-primary,
	.shirtcraft-button-secondary,
	.shirtcraft-button-ai {
		display: flex;
		width: 100%;
		margin: 12px 0 0;
	}

	.shirtcraft-collar-options,
	.shirtcraft-sleeve-options,
	.shirtcraft-brief-mode-toggle,
	.shirtcraft-logo-decision-grid {
		justify-content: center;
	}

	.shirtcraft-price-total {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}
}

/* ==========================================================
 * "Version 2" full-screen app shell (.shirtcraft-app)
 * class-fullscreen-template.php / public/templates/builder-fullscreen.php
 * Opt-in per-page (WordPress page template), additive — never replaces
 * the .shirtcraft-builder shortcode presentation above. This is the
 * only place allowed to touch html/body, since the plugin's own
 * template fully owns this page (no theme header/footer alongside it).
 * ========================================================== */

body.shirtcraft-fullscreen-body {
	margin: 0;
	padding: 0;
	height: 100vh;
	overflow: hidden;
}

.shirtcraft-app {
	display: grid;
	grid-template:
		"header header header" 72px
		"sidebar main aside" minmax(0, 1fr)
		"summary summary summary" auto
		"trust trust trust" 56px
		/ 220px minmax(0, 1fr) 300px;
	height: 100vh;
	overflow: hidden;
	background: var(--shirtcraft-bg);
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: var(--shirtcraft-text-primary);
	-webkit-font-smoothing: antialiased;
}

/* The header/sidebar own progress + navigation now — the inline
   stepper router.js renders inside #shirtcraft-builder-content would
   be a redundant second one here. */
.shirtcraft-app .shirtcraft-progress {
	display: none;
}

.shirtcraft-app .shirtcraft-builder.shirtcraft-builder--embedded {
	width: 100%;
	padding: 0;
	background: transparent;
	border-radius: 0;
}

/* ---------- Header ---------- */

.shirtcraft-app-header {
	grid-area: header;
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 0 24px;
	background: var(--shirtcraft-surface);
	border-bottom: 1px solid var(--shirtcraft-border);
	z-index: 20;
}

.shirtcraft-app-brand {
	flex-shrink: 0;
	display: flex;
	align-items: center;
}

.shirtcraft-app-brand-logo {
	display: block;
	height: 42px;
	width: auto;
	max-width: 220px;
	object-fit: contain;
}

.shirtcraft-app-header-progress {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow-x: auto;
}

.shirtcraft-app-progress-step {
	display: flex;
	align-items: center;
	gap: 7px;
	white-space: nowrap;
	color: var(--shirtcraft-text-muted);
	font-size: 12px;
	font-weight: 600;
	flex-shrink: 0;
}

.shirtcraft-app-progress-circle {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--shirtcraft-surface-muted);
	color: var(--shirtcraft-text-tertiary);
	font-size: 10px;
	font-weight: 700;
}

.shirtcraft-app-progress-step.is-active {
	color: var(--shirtcraft-green-700);
}

.shirtcraft-app-progress-step.is-active .shirtcraft-app-progress-circle {
	background: var(--shirtcraft-green-600);
	color: #fff;
	box-shadow: 0 0 0 4px rgba(32, 168, 120, .1);
}

.shirtcraft-app-progress-step.is-complete .shirtcraft-app-progress-circle {
	background: var(--shirtcraft-green-600);
	color: #fff;
}

.shirtcraft-app-progress-line {
	width: 32px;
	height: 1px;
	margin: 0 8px;
	background: var(--shirtcraft-border);
	flex-shrink: 0;
}

.shirtcraft-app-progress-line.is-complete {
	background: var(--shirtcraft-green-600);
}

/* Fixed 260px width removed (2026-08-20, Donovan: the two header buttons
   — "My Designs" and the newly-longer "Create a new Design" — plus the
   avatar couldn't all fit on one line inside that. min-content-based
   flex sizing instead, so it always fits whatever the buttons actually
   need. */
.shirtcraft-app-header-actions {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
}

/* !important (2026-08-20) — same reason as .shirtcraft-option above:
   real <button> elements, theme/Elementor global button styling was
   painting these blue and pill-shaped instead of the intended plain
   white/grey, square-with-rounded-corners look. white-space:nowrap keeps
   the (now longer) button label on one line regardless of available
   width, rather than wrapping. */
.shirtcraft-app-save-button {
	height: 36px;
	padding: 0 14px;
	border: 1px solid var(--shirtcraft-border) !important;
	border-radius: 8px !important;
	background: #fff !important;
	color: var(--shirtcraft-text-secondary) !important;
	font-size: 12px !important;
	font-weight: 650 !important;
	white-space: nowrap;
	cursor: pointer;
	transition: var(--shirtcraft-transition);
}

.shirtcraft-app-save-button:hover {
	border-color: var(--shirtcraft-danger) !important;
	color: var(--shirtcraft-danger) !important;
}

/* ---------- Sidebar ---------- */

.shirtcraft-app-sidebar {
	grid-area: sidebar;
	background: var(--shirtcraft-navy-900);
	color: #fff;
	padding: 22px 12px;
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow-y: auto;
}

.shirtcraft-app-sidebar-heading {
	padding: 0 10px;
	margin-bottom: 12px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .45);
}

/* Single column on desktop — one step below the other (Donovan,
   2026-08-11). The numbered/checkmark badge still mirrors the header
   progress stepper; only the layout direction differs. A 2-row grid
   version of this same markup applies on mobile, see the 760px query. */
#shirtcraft-app-sidebar-nav {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 18px;
}

.shirtcraft-app-nav-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	padding: 10px;
	border-radius: 8px;
	color: rgba(255, 255, 255, .68);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.25;
	text-align: left;
	position: relative;
}

.shirtcraft-app-nav-item-badge {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	color: rgba(255, 255, 255, .8);
	font-size: 11px;
	font-weight: 700;
}

.shirtcraft-app-nav-item-label {
	display: block;
}

.shirtcraft-app-nav-item.is-active {
	background: rgba(255, 255, 255, .09);
	color: #fff;
}

.shirtcraft-app-nav-item.is-active .shirtcraft-app-nav-item-badge {
	background: var(--shirtcraft-green-600);
	color: #fff;
	box-shadow: 0 0 0 3px rgba(32, 168, 120, .15);
}

.shirtcraft-app-nav-item.is-active::before {
	content: '';
	position: absolute;
	left: 0;
	top: 12%;
	bottom: 12%;
	width: 2px;
	border-radius: 2px;
	background: var(--shirtcraft-green-500);
}

.shirtcraft-app-nav-item.is-complete {
	color: rgba(255, 255, 255, .85);
}

.shirtcraft-app-nav-item.is-complete .shirtcraft-app-nav-item-badge {
	background: var(--shirtcraft-green-600);
	color: #fff;
}

/* Jump-back navigation, added 2026-08-18 — only a completed step gets
   this; the active step and any step still ahead stay inert with no
   pointer/hover treatment. */
.shirtcraft-app-nav-item.is-clickable {
	cursor: pointer;
	border-radius: 8px;
	transition: var(--shirtcraft-transition);
}

.shirtcraft-app-nav-item.is-clickable:hover,
.shirtcraft-app-nav-item.is-clickable:focus-visible {
	background: rgba(255, 255, 255, .08);
	outline: none;
}

.shirtcraft-app-ai-card {
	margin-top: auto;
	padding: 15px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, .08);
	background: linear-gradient(145deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
}

.shirtcraft-app-ai-card-icon {
	display: inline-flex;
	width: 26px;
	height: 26px;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background: rgba(32, 168, 120, .15);
	color: var(--shirtcraft-green-500);
	margin-bottom: 10px;
}

.shirtcraft-app-ai-card-title {
	font-size: 10px;
	font-weight: 750;
	letter-spacing: .06em;
	color: var(--shirtcraft-green-500);
	margin-bottom: 5px;
}

.shirtcraft-app-ai-card-text {
	font-size: 11px;
	line-height: 16px;
	color: rgba(255, 255, 255, .55);
}

.shirtcraft-featured-slideshow-image {
	display: block;
	width: 100%;
	/* Fixed height, not max-height (2026-08-20, Donovan: mockups rotating
	   through at different aspect ratios were rendering at different
	   heights, resizing the sidebar card as the slideshow advanced —
	   max-height alone only ever caps a naturally-taller image, it can't
	   stretch a naturally-shorter one up to match. object-fit:cover +
	   an explicit height makes every image the same box regardless of
	   its own source dimensions. */
	height: 140px;
	object-fit: cover;
	border-radius: 8px;
	margin-bottom: 8px;
	transition: opacity .3s ease;
}

/* ---------- Main ---------- */

.shirtcraft-app-main {
	grid-area: main;
	min-width: 0;
	overflow-y: auto;
	background: var(--shirtcraft-surface);
	padding: 30px 34px;
}

/* ---------- Aside ---------- */

.shirtcraft-app-aside {
	grid-area: aside;
	min-width: 0;
	overflow-y: auto;
	background: var(--shirtcraft-surface);
	border-left: 1px solid var(--shirtcraft-border);
	padding: 26px 22px;
}

.shirtcraft-app-aside-eyebrow {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--shirtcraft-text-tertiary);
}

.shirtcraft-app-aside-title {
	margin-top: 8px;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--shirtcraft-text-primary);
}

.shirtcraft-app-aside-summary {
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Large mockup preview on the Sizing & Cart step (2026-08-20), shown
   above the sleeve/collar/price summary in the aside. */
.shirtcraft-app-aside-mockup {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin-top: 16px;
	border-radius: 10px;
	border: 1px solid var(--shirtcraft-border);
}

.shirtcraft-app-aside-placeholder {
	margin-top: 16px;
	font-size: 12px;
	line-height: 18px;
	color: var(--shirtcraft-text-muted);
}

.shirtcraft-app-summary-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	font-size: 12px;
}

.shirtcraft-app-summary-row-label {
	color: var(--shirtcraft-text-tertiary);
}

.shirtcraft-app-summary-row-value {
	font-weight: 650;
	color: var(--shirtcraft-text-primary);
	text-align: right;
}

/* ---------- Bottom summary bar ---------- */

.shirtcraft-app-summary {
	grid-area: summary;
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 12px 24px;
	background: var(--shirtcraft-surface);
	border-top: 1px solid var(--shirtcraft-border);
	box-shadow: 0 -4px 18px rgba(16, 24, 40, .04);
	z-index: 10;
	overflow-x: auto;
}

.shirtcraft-app-summary-thumb {
	width: 46px;
	height: 46px;
	object-fit: cover;
	border-radius: 8px;
	background: var(--shirtcraft-surface-muted);
	flex-shrink: 0;
}

.shirtcraft-app-summary-details {
	display: flex;
	align-items: center;
	gap: 22px;
	flex: 1;
	min-width: 0;
}

.shirtcraft-app-summary-title {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--shirtcraft-text-tertiary);
	flex-shrink: 0;
}

.shirtcraft-app-summary-total {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	flex-shrink: 0;
}

.shirtcraft-app-summary-total-label {
	font-size: 10px;
	font-weight: 650;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--shirtcraft-text-muted);
}

.shirtcraft-app-summary-total-value {
	font-size: 18px;
	font-weight: 750;
	color: var(--shirtcraft-green-700);
}

/* ---------- Trust bar ---------- */

.shirtcraft-app-trust {
	grid-area: trust;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: center;
	background: var(--shirtcraft-navy-900);
	color: #fff;
}

.shirtcraft-app-trust-item {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	border-right: 1px solid rgba(255, 255, 255, .08);
}

.shirtcraft-app-trust-item:last-child {
	border-right: 0;
}

.shirtcraft-app-trust-title {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .04em;
	text-align: center;
}

.shirtcraft-app-trust-description {
	margin-top: 1px;
	font-size: 9px;
	color: rgba(255, 255, 255, .46);
	text-align: center;
}

/* Single centered "Made by Design Odyssey" credit, replacing the
   original 3-item trust row (Donovan's call, 2026-08-11). */
.shirtcraft-app-trust--credit {
	display: flex;
	justify-content: center;
}

.shirtcraft-app-trust-credit-link {
	font-size: 11px;
	font-weight: 650;
	letter-spacing: .03em;
	color: rgba(255, 255, 255, .7);
	text-decoration: none;
	transition: var(--shirtcraft-transition);
}

.shirtcraft-app-trust-credit-link:hover {
	color: #fff;
	text-decoration: underline;
}

/* ---------- Responsive: the app shell collapses hard on narrow
   screens — sidebar becomes a horizontal scroller, aside hides,
   trust bar hides, matching the same intent as the embedded
   presentation's own breakpoints above but for a fixed-viewport shell
   instead of a normal document flow. ---------- */

@media (max-width: 1200px) {
	.shirtcraft-app {
		grid-template-columns: 190px minmax(0, 1fr) 270px;
	}
}

@media (max-width: 1000px) {
	.shirtcraft-app {
		grid-template:
			"header header" 72px
			"sidebar main" minmax(0, 1fr)
			"summary summary" auto
			"trust trust" 56px
			/ 190px minmax(0, 1fr);
	}

	.shirtcraft-app-aside {
		display: none;
	}

	.shirtcraft-app-progress-label {
		display: none;
	}

	.shirtcraft-app-progress-line {
		width: 20px;
		margin: 0 4px;
	}
}

@media (max-width: 760px) {
	body.shirtcraft-fullscreen-body {
		height: auto;
		overflow: visible;
	}

	.shirtcraft-app {
		height: auto;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		overflow: visible;
	}

	.shirtcraft-app-header {
		height: 60px;
		padding: 0 14px;
	}

	.shirtcraft-app-brand {
		width: auto;
	}

	.shirtcraft-app-header-progress {
		display: none;
	}

	.shirtcraft-app-header-actions {
		width: auto;
		margin-left: auto;
	}

	.shirtcraft-app-sidebar {
		order: 2;
		width: 100%;
		padding: 10px 8px;
	}

	.shirtcraft-app-sidebar-heading,
	.shirtcraft-app-ai-card {
		display: none;
	}

	/* 2 rows of 3, filling the sidebar edge to edge, evenly spaced —
	   replaces the desktop single column for narrow screens (Donovan,
	   2026-08-11): the columns wrap 6 steps into 2 rows automatically. */
	#shirtcraft-app-sidebar-nav {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(2, 1fr);
		gap: 6px;
		margin-bottom: 0;
		width: 100%;
	}

	.shirtcraft-app-nav-item {
		flex-direction: column;
		align-items: center;
		gap: 4px;
		padding: 8px 2px;
		font-size: 10px;
		text-align: center;
	}

	.shirtcraft-app-nav-item.is-active::before {
		left: 14%;
		right: 14%;
		top: auto;
		bottom: 2px;
		width: auto;
		height: 2px;
	}

	.shirtcraft-app-main {
		order: 3;
		padding: 20px 14px 130px;
	}

	.shirtcraft-app-aside {
		order: 4;
		display: block;
		border-left: 0;
		border-top: 1px solid var(--shirtcraft-border);
	}

	.shirtcraft-app-summary {
		order: 5;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100;
	}

	.shirtcraft-app-summary-details {
		gap: 12px;
	}

	.shirtcraft-app-trust {
		order: 6;
		display: none;
	}
}