@font-face {
	font-family: "Varsity";
	src: url("/assets/fonts/Varsity-Regular.ttf") format("truetype");
	font-style: normal;
	font-weight: 400;
	font-display: swap;
}

:root {
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: #162438;
	background: #f5f6f8;
	font-synthesis: none;
	--navy: #173f73;
	--pink: #c83a5d;
	--muted: #536174;
	--line: #d7dde5;
}

* { box-sizing: border-box; }
body { margin: 0; }
button, select, input { font: inherit; }
button, select { min-height: 48px; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible { outline: 3px solid #76a9e4; outline-offset: 3px; }
a { color: inherit; }

.site-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 64px;
	padding: 8px 18px;
	background: #fff;
	border-bottom: 1px solid #e5e9ef;
}
.brand { font-weight: 800; text-decoration: none; letter-spacing: .02em; }
.help-link { padding: 12px 18px; text-decoration: none; background: #f2f4f7; border-radius: 999px; }
.app-shell { width: min(100%, 760px); margin: 0 auto; padding: 24px 16px 40px; }
.editor-fields { min-width: 0; margin: 0; padding: 0; border: 0; }
.checkout-busy #preview { pointer-events: none; }
.intro h1 { margin: 0 0 8px; font-size: clamp(32px, 8vw, 44px); line-height: 1.1; }
.garment-label { display: block; margin: 18px 0 8px; color: var(--muted); }
.garment-select { width: 100%; padding: 0 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: #162438; }
.preview-card { margin-top: 20px; padding: 12px; border-radius: 24px; background: #f7f4ee; }
.segmented { display: flex; padding: 4px; border-radius: 999px; background: #e9e5de; }
.segmented button { flex: 1; border: 0; border-radius: 999px; padding: 8px 16px; background: transparent; color: #655e54; }
.segmented button.selected { background: #fff; color: #162438; box-shadow: 0 2px 8px #16243812; }
.model-note { margin: 8px 4px 0; color: var(--muted); font-size: .85rem; }
.canvas-wrap { position: relative; width: 100%; height: clamp(350px, 58vh, 520px); }
#preview { display: block; width: 100%; height: 100%; touch-action: none; }
.preview-loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); pointer-events: none; }
.preview-loading[hidden] { display: none; }
.preview-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.side-switch { max-width: 260px; flex: 1; background: var(--navy); }
.side-switch button { color: #fff; }
.side-switch button.selected { background: #fff; color: var(--navy); }
.history-tools { display: flex; gap: 2px; }
.history-tools button { min-height: 44px; padding: 6px 8px; border: 0; background: transparent; color: var(--muted); }
.form-error { margin: 0; color: #9b2c2c; font-size: 14px; }
.form-error:empty { display: none; }
.editor-status { margin: 10px 4px 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.editor-status:empty { display: none; }
.editor-status[data-level="warning"], .editor-status[data-level="blocked"], .editor-status[data-level="error"] { color: #9b2c2c; }
@media (max-width: 360px) {
	.preview-tools { align-items: flex-start; flex-wrap: wrap; }
	.side-switch { min-width: 0; max-width: none; flex-basis: 100%; }
	.side-switch button { min-width: 0; padding-inline: 8px; }
	.history-tools { width: 100%; justify-content: space-between; }
}
.item-selection { display: grid; gap: 6px; padding-top: 12px; color: var(--muted); font-size: 14px; }
.item-selection[hidden] { display: none; }
.item-selection select { width: 100%; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: #162438; }
.item-tools { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; }
.item-tools[hidden] { display: none; }
.item-tools button { min-height: 44px; padding: 8px 12px; border: 1px solid #c4ccd6; border-radius: 12px; background: #fff; color: #162438; }
.text-dialog { width: min(calc(100% - 32px), 480px); max-height: 90vh; padding: 0; border: 0; border-radius: 22px; color: #162438; }
.text-dialog::backdrop { background: #16243880; }
.text-dialog form { display: grid; gap: 12px; padding: 22px; }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; }
.dialog-heading h2 { margin: 0; }
.dialog-heading button { min-width: 48px; border: 0; background: transparent; font-size: 30px; }
.text-dialog textarea, .text-dialog select { width: 100%; min-height: 48px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; }
.text-dialog input[type="color"] { width: 100%; height: 52px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.text-styles { display: flex; gap: 24px; }
.text-styles label { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.text-styles input { width: 22px; height: 22px; }
.dialog-submit { justify-content: center; margin-top: 8px; }
.delivery-card { margin: 16px 0; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.delivery-copy { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.delivery-copy span { color: var(--muted); font-size: 14px; white-space: nowrap; }
.progress-track { height: 10px; margin-top: 12px; border-radius: 999px; background: #e4e9ef; overflow: hidden; }
.progress-fill { height: 100%; width: 0; border-radius: inherit; background: #2e8b6d; transition: width .25s ease-out; }
.design-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0; }
.secondary-button { border: 1px solid #b9c4d0; border-radius: 16px; background: #fff; color: #162438; font-weight: 700; padding: 12px; }
.artwork-panel { min-width: 0; margin: 18px 0 24px; padding: 12px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.artwork-tabs button { min-width: 0; padding: 8px 10px; font-size: 14px; }
.artwork-storage-note { margin: 12px 4px 4px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.artwork-panel-status { margin: 4px; color: #9b2c2c; font-size: 13px; }
.artwork-panel-status:empty { display: none; }
.artwork-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.artwork-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #f8fafc; }
.artwork-select { display: block; width: 100%; min-width: 0; min-height: 0; padding: 8px; border: 0; background: transparent; color: #162438; }
.artwork-select img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 9px; background: repeating-conic-gradient(#e1e5e9 0 25%, #fff 0 50%) 50% / 20px 20px; }
.artwork-name { display: block; margin-top: 8px; overflow-wrap: anywhere; font-size: 13px; font-weight: 700; line-height: 1.35; text-align: left; }
.artwork-dimensions { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.35; text-align: left; }
.artwork-delete { width: 100%; min-height: 44px; border: 0; border-top: 1px solid var(--line); background: #fff; color: #9b2c2c; font-size: 13px; }
.artwork-empty { grid-column: 1 / -1; margin: 4px; color: var(--muted); font-size: 14px; }
.clear-artwork { width: 100%; margin-top: 12px; border: 1px solid #b9c4d0; border-radius: 12px; background: #fff; color: #162438; }
.option-section { margin: 24px 0; }
.option-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.option-heading h2 { margin: 0; font-size: 22px; }
.option-heading span { color: var(--muted); font-size: 14px; text-align: right; }
.colour-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 12px; }
.colour-swatch { min-height: 58px; aspect-ratio: 1; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #c4ccd6; }
.colour-swatch.selected { box-shadow: 0 0 0 3px var(--navy); }
.size-list { display: flex; flex-wrap: wrap; gap: 10px; }
.size-button { min-width: 62px; padding: 10px 16px; border: 1px solid #c4ccd6; border-radius: 14px; background: #fff; color: #162438; }
.size-button.selected { border-color: var(--navy); background: var(--navy); color: #fff; }
.basket-section { padding-top: 8px; }
.create-set-button { width: 100%; margin-bottom: 12px; }
.ownership { display: flex; align-items: center; gap: 12px; min-height: 52px; margin-bottom: 12px; }
.ownership input { width: 24px; height: 24px; accent-color: var(--navy); }
.primary-button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 62px; padding: 12px 24px; border: 0; border-radius: 18px; background: var(--pink); color: #fff; font-size: 20px; }
.primary-button strong { font-size: 22px; }
#add-to-basket { min-height: 52px; padding: 10px 18px; border-radius: 14px; background: #6d3fa3; font-size: 18px; font-weight: 400; }
#add-to-basket #price { font-size: 18px; font-weight: 400; }
.small-print { color: var(--muted); font-size: 13px; line-height: 1.5; }
.status { min-height: 28px; margin-top: 12px; color: var(--muted); }

.more-colours { grid-column: 1 / -1; min-height: 48px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--navy); font-weight: 700; }
.removal-progress { position: absolute; left: 16px; right: 16px; bottom: 18px; padding: 14px 18px; border-radius: 16px; background: #ffffffed; box-shadow: 0 6px 24px #16243826; }
.removal-progress[hidden] { display: none; }
.removal-progress span { display: block; margin-bottom: 8px; font-weight: 700; }
#cutout-progress { transition: width .08s linear; }
.cutout-dialog { width: min(calc(100% - 28px), 680px); padding: 0; border: 0; border-radius: 22px; }
.cutout-dialog::backdrop { background: #16243880; }
.cutout-content { padding: 22px; }
.cutout-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0; }
.cutout-comparison figure { margin: 0; }
.cutout-comparison figcaption { margin-bottom: 8px; font-weight: 700; }
.cutout-comparison img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; border: 1px solid var(--line); background: repeating-conic-gradient(#e1e5e9 0 25%, #fff 0 50%) 50% / 24px 24px; }
.cutout-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cutout-actions .primary-button { justify-content: center; }
.other-method { display: block; width: 100%; margin-top: 12px; border: 0; background: transparent; color: var(--navy); }

.artwork-toggle { min-height: 48px; padding: 10px 4px; cursor: pointer; color: var(--navy); font-weight: 700; }
.artwork-panel[open] .artwork-toggle { margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.set-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px; }
.set-summary[hidden] { display: none; }
.set-summary-card { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.set-summary-card h3 { margin: 0 0 8px; font-size: 15px; line-height: 1.3; }
.set-summary-card p { margin: 4px 0; overflow-wrap: anywhere; color: var(--muted); font-size: 13px; line-height: 1.4; }
.set-summary-card .set-summary-price { color: #162438; font-size: 17px; }
.set-size-edit { min-height: 44px; margin-top: 6px; padding: 6px 0; border: 0; background: transparent; color: var(--navy); text-decoration: underline; }
.set-size-content { display: grid; gap: 14px; padding: 22px; }
#create-set.set-primary { border-color: transparent; background: #6d3fa3; color: #fff; font-weight: 400; }
#add-to-basket.single-only { border: 1px solid #b9c4d0; background: #fff; color: var(--navy); }
#set-size-done { background: #6d3fa3; font-size: 18px; font-weight: 400; }
.mobile-checkout { display: none; }

@media (max-width: 699px) {
	.app-shell { padding-bottom: 118px; }
	.mobile-checkout { position: fixed; z-index: 20; right: 0; bottom: 0; left: 0; display: block; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: #fffffffa; box-shadow: 0 -4px 18px #16243814; }
	.mobile-checkout-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: min(100%, 728px); margin: 0 auto; }
	.mobile-checkout-price { display: grid; min-width: 0; }
	#mobile-total-label { color: var(--muted); font-size: 12px; }
	#mobile-price { color: #162438; font-size: 19px; font-weight: 400; }
	#mobile-add { min-height: 48px; padding: 9px 18px; border: 0; border-radius: 12px; background: #6d3fa3; color: #fff; font-size: 16px; font-weight: 400; }
	#mobile-status { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.35; }
	#mobile-status[hidden] { display: none; }
}

@media (max-width: 360px) {
	.set-summary { grid-template-columns: 1fr; }
	#mobile-add { padding-inline: 12px; }
}

@media (min-width: 700px) {
	.app-shell { padding-top: 34px; }
	.design-actions { max-width: 440px; }
	.colour-list { grid-template-columns: repeat(auto-fill, 58px); }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}