/* ============================================================
   Suit Builder — Frontend Styles
   Light, bright, modern aesthetic
   ============================================================ */

:root {
	--sb-primary:      #1a1a2e;
	--sb-accent:       #c8a96e;
	--sb-accent-light: #f0e6d3;
	--sb-bg:           #fafafa;
	--sb-white:        #ffffff;
	--sb-border:       #e8e8e8;
	--sb-text:         #2d2d2d;
	--sb-text-muted:   #888;
	--sb-radius:       12px;
	--sb-radius-sm:    6px;
	--sb-shadow:       0 2px 16px rgba(0,0,0,.07);
	--sb-shadow-hover: 0 6px 28px rgba(0,0,0,.13);
	--sb-transition:   .2s ease;

	/* Status colours */
	--sb-status-pending:     #f59e0b;
	--sb-status-confirmed:   #3b82f6;
	--sb-status-in_progress: #8b5cf6;
	--sb-status-completed:   #22c55e;
	--sb-status-cancelled:   #ef4444;
	--sb-status-on_hold:     #6b7280;
	--sb-status-quote:       #64748b;
}

/* ---- Reset / base ---- */
.sb-configurator *,
.sb-myaccount *,
.sb-quote-confirmation * {
	box-sizing: border-box;
}

/* Configurator wrapper */
.sb-configurator {
	width: 100%;
	display: block;
	position: relative;
	box-sizing: border-box;
}

/* Progress bar and nav buttons stay full-width; grids centre themselves */
.sb-progress-bar,
.sb-nav-buttons {
	width: 100%;
	box-sizing: border-box;
}

/* ============================================================
   PROGRESS BAR
   ============================================================ */
.sb-progress-bar {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: nowrap;
	gap: 0;
	margin: 0 0 2.5rem;
	padding: 0 0.5rem;
	width: 100%;
}

.sb-progress-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	position: relative;
	flex: 1;
	min-width: 0;
	padding: 0 0.25rem;
	opacity: .4;
	transition: opacity var(--sb-transition);
}

.sb-progress-step::before {
	content: '';
	position: absolute;
	top: 16px;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--sb-border);
	z-index: 0;
}
.sb-progress-step:first-child::before { left: 50%; }
.sb-progress-step:last-child::before  { right: 50%; }

/* Completed connector */
.sb-progress-step.completed::before {
	background: var(--sb-primary);
}

.sb-progress-step.active,
.sb-progress-step.completed {
	opacity: 1;
}

.sb-step-num {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--sb-border);
	color: var(--sb-text-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: .85rem;
	position: relative;
	z-index: 1;
	transition: background var(--sb-transition), color var(--sb-transition);
}

.sb-progress-step.active .sb-step-num {
	background: var(--sb-accent);
	color: var(--sb-white);
}

.sb-progress-step.completed .sb-step-num {
	background: var(--sb-primary);
	color: var(--sb-white);
}

.sb-step-label {
	font-size: .72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--sb-text-muted);
}

.sb-progress-step.active .sb-step-label {
	color: var(--sb-accent);
}

.sb-progress-clickable {
	cursor: pointer;
}

.sb-progress-clickable:hover .sb-step-num {
	background: var(--sb-accent);
	color: var(--sb-white);
	transform: scale(1.1);
}

.sb-progress-clickable:hover .sb-step-label {
	color: var(--sb-accent);
}

.sb-step-num {
	transition: background var(--sb-transition), color var(--sb-transition), transform var(--sb-transition);
}

/* ============================================================
   STEPS
   ============================================================ */
.sb-steps-container {
	position: relative;
	width: 100%;
	box-sizing: border-box;
}

.sb-step {
	display: none;
	animation: sb-fade-in .3s ease;
}

.sb-step.active {
	display: block;
	width: 100%;
	box-sizing: border-box;
}

/* Titles and descriptions stay centred */
.sb-step.active .sb-step-title,
.sb-step.active .sb-step-desc,
.sb-step.active .sb-no-styles-msg {
	text-align: center;
}

/* Block content resets to left-aligned and centres itself as a block */
.sb-step.active .sb-option-info-panel,
.sb-step.active .sb-extras-info-stack,
.sb-step.active .sb-extras-subheading,
.sb-step.active .sb-print-hint,
.sb-step.active .sb-step-error,
.sb-step.active .sb-review-summary,
.sb-step.active .sb-price-total,
.sb-step.active .sb-measurements-section,
.sb-step.active .sb-customer-details,
.sb-step.active .sb-submit-wrap,
.sb-step.active .sb-measurements-grid,
.sb-step.active form#sb-submit-form {
	display: block;
	text-align: left;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

/* Grids centre using margin:auto with max-content width */
.sb-model-grid,
.sb-option-grid,
.sb-size-grid {
	width: max-content;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

@keyframes sb-fade-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

.sb-step-title {
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--sb-primary);
	margin: 0 0 .5rem;
	text-align: center;
}

.sb-step-desc {
	color: var(--sb-text-muted);
	text-align: center;
	margin: 0 0 1.5rem;
	font-size: .95rem;
}

/* ============================================================
   MODEL GRID (tall rectangular cards)
   ============================================================ */
.sb-model-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, 260px);
	gap: 1.5rem;
	margin: 1.5rem auto;
}

.sb-model-card {
	border: 2px solid var(--sb-border);
	border-radius: var(--sb-radius);
	overflow: hidden;
	cursor: pointer;
	transition: border-color var(--sb-transition), box-shadow var(--sb-transition), transform var(--sb-transition);
	background: var(--sb-white);
	display: flex;
	flex-direction: column;
}

.sb-model-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.sb-model-card:hover {
	border-color: var(--sb-accent);
	box-shadow: var(--sb-shadow-hover);
	transform: translateY(-3px);
}

.sb-model-card.selected {
	border-color: var(--sb-accent);
	box-shadow: 0 0 0 3px var(--sb-accent-light), var(--sb-shadow-hover);
}

.sb-model-image-wrap {
	aspect-ratio: 2 / 3;
	overflow: hidden;
	background: transparent;
	padding: 1rem 1rem 0;
}

.sb-model-image-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	border-radius: var(--sb-radius-sm) var(--sb-radius-sm) 0 0;
	transition: transform .4s ease;
}

.sb-model-card:hover .sb-model-image-wrap img {
	transform: scale(1.03);
}

.sb-model-info {
	padding: 1rem;
	text-align: center;
}

.sb-model-name {
	font-size: 1rem;
	font-weight: 700;
	margin: 0 0 .25rem;
	color: var(--sb-primary);
}

.sb-model-desc {
	font-size: .82rem;
	color: var(--sb-text-muted);
	margin: 0;
}

/* ============================================================
   OPTION GRID (square cards for styles and options)
   ============================================================ */
.sb-option-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, 260px);
	gap: 1.5rem;
	margin: 1.5rem auto;
}

.sb-style-grid {
	grid-template-columns: repeat(auto-fill, 260px);
	margin: 1.5rem auto;
}

.sb-option-card {
	border: 2px solid var(--sb-border);
	border-radius: var(--sb-radius);
	overflow: hidden;
	cursor: pointer;
	transition: border-color var(--sb-transition), box-shadow var(--sb-transition), transform var(--sb-transition);
	background: var(--sb-white);
	display: flex;
	flex-direction: column;
}

.sb-option-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: .75rem;
	text-align: center;
}

.sb-option-name {
	flex: 1;
}

.sb-option-price {
	margin-top: auto;
	padding-top: .4rem;
}

.sb-option-card:hover {
	border-color: var(--sb-accent);
	box-shadow: var(--sb-shadow-hover);
	transform: translateY(-2px);
}

.sb-option-card.selected {
	border-color: var(--sb-accent);
	box-shadow: 0 0 0 3px var(--sb-accent-light);
}

.sb-option-image-wrap {
	aspect-ratio: 2 / 3;
	overflow: hidden;
	background: transparent;
	padding: 1rem 1rem 0;
}

.sb-option-image-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	border-radius: var(--sb-radius-sm) var(--sb-radius-sm) 0 0;
	transition: transform .35s ease;
}

.sb-option-card:hover .sb-option-image-wrap img {
	transform: scale(1.05);
}

/* .sb-option-info moved to option card flex block above */

.sb-option-name {
	font-size: .9rem;
	font-weight: 600;
	color: var(--sb-primary);
	margin-bottom: .3rem;
}

.sb-option-label {
	font-size: .95rem;
	font-weight: 600;
	text-align: center;
	padding: 1rem;
	color: var(--sb-primary);
}


/* Style cards — portrait like model cards */
.sb-style-card .sb-option-image-wrap {
	aspect-ratio: 2 / 3;
}

/* ============================================================
   SIZE GRID
   ============================================================ */
.sb-size-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
	width: max-content;
	max-width: 100%;
	margin: 1.5rem auto;
}

.sb-size-card {
	border: 2px solid var(--sb-border);
	border-radius: var(--sb-radius);
	padding: 1.5rem 1.25rem;
	cursor: pointer;
	text-align: center;
	background: var(--sb-white);
	transition: border-color var(--sb-transition), box-shadow var(--sb-transition), transform var(--sb-transition);
	min-width: 120px;
	display: flex;
	flex-direction: column;
}

.sb-size-upcharge {
	margin-top: auto;
	padding-top: .5rem;
	order: 99;
}

.sb-size-measurements {
	flex: 1;
	order: 2;
}

/* Note shown above measurements, below title — used on MTM card */
.sb-size-note-top {
	order: 1;
	margin-bottom: .5rem;
}

.sb-size-card:hover {
	border-color: var(--sb-accent);
	box-shadow: var(--sb-shadow-hover);
	transform: translateY(-2px);
}

.sb-size-card.selected {
	border-color: var(--sb-accent);
	box-shadow: 0 0 0 3px var(--sb-accent-light);
	background: var(--sb-accent-light);
}

.sb-size-card[data-value="made-to-measure"] {
	border-style: dashed;
	border-color: var(--sb-accent);
}

.sb-size-card[data-value="made-to-measure"].selected {
	background: var(--sb-accent-light);
}

.sb-size-label {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--sb-primary);
}

.sb-size-note {
	font-size: .75rem;
	color: var(--sb-text-muted);
	margin-top: .4rem;
}

/* ============================================================
   PRICE BADGES
   ============================================================ */
.sb-price-badge {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	font-size: .75rem;
	font-weight: 600;
	padding: .2rem .55rem;
	border-radius: 20px;
	line-height: 1.3;
}

.sb-price-standard {
	background: #e8f5e9;
	color: #2e7d32;
}

.sb-price-upgrade {
	background: #fff8e1;
	color: #e65100;
}

.sb-price-trade {
	font-size: .8rem;
	font-weight: 700;
}

.sb-price-rrp {
	font-size: .68rem;
	color: var(--sb-text-muted);
	font-weight: 400;
}

/* ============================================================
   NAVIGATION BUTTONS
   ============================================================ */
.sb-nav-buttons {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--sb-border);
}

.sb-btn {
	padding: .75rem 2rem;
	border-radius: 8px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	border: 2px solid transparent;
	transition: all var(--sb-transition);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
}

.sb-btn-primary {
	background: var(--sb-primary) !important;
	color: var(--sb-white) !important;
	border-color: var(--sb-primary) !important;
}

.sb-btn-primary:hover {
	background: #2d2d50 !important;
	border-color: #2d2d50 !important;
	box-shadow: var(--sb-shadow);
}

.sb-btn-back {
	background: var(--sb-white);
	color: var(--sb-text);
	border-color: var(--sb-border);
}

.sb-btn-back:hover {
	border-color: var(--sb-primary);
	color: var(--sb-primary);
}

.sb-btn-next {
	margin-left: auto;
}

/* ============================================================
   REVIEW STEP
   ============================================================ */
.sb-review-summary {
	background: var(--sb-white);
	border: 1px solid var(--sb-border);
	border-radius: var(--sb-radius);
	padding: 1.5rem;
	margin: 1.5rem 0;
}

.sb-review-summary h3 {
	margin: 0 0 1rem;
	font-size: 1.1rem;
	color: var(--sb-primary);
}

.sb-review-row {
	display: flex;
	justify-content: space-between;
	padding: .4rem 0;
	border-bottom: 1px solid var(--sb-border);
	font-size: .9rem;
}

.sb-review-row:last-child {
	border-bottom: none;
}

.sb-review-label {
	color: var(--sb-text-muted);
	font-weight: 500;
}

.sb-review-value {
	font-weight: 600;
	color: var(--sb-primary);
	text-align: right;
}

.sb-price-total {
	background: var(--sb-accent-light);
	border: 1px solid var(--sb-accent);
	border-radius: var(--sb-radius);
	padding: 1rem 1.5rem;
	margin: 1rem 0 1.5rem;
	text-align: center;
}

.sb-price-total h3 {
	margin: 0 0 .5rem;
	font-size: .9rem;
	color: var(--sb-text-muted);
	font-weight: 500;
}

/* ============================================================
   PRICE BREAKDOWN TABLE (review step)
   ============================================================ */
.sb-price-breakdown {
	background: var(--sb-white);
	border: 2px solid var(--sb-accent);
	border-radius: var(--sb-radius);
	padding: 1.25rem 1.5rem;
	margin: 1.25rem 0 1.5rem;
}

.sb-price-breakdown h3 {
	margin: 0 0 1rem;
	font-size: 1.05rem;
	color: var(--sb-primary);
	font-weight: 700;
}

.sb-price-table {
	width: 100%;
	border-collapse: collapse;
	font-size: .92rem;
}

.sb-price-table thead th {
	text-align: left;
	padding: .4rem .6rem;
	border-bottom: 2px solid var(--sb-border);
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--sb-text-muted);
	font-weight: 700;
}

.sb-price-table thead th:not(:first-child) {
	text-align: right;
}

.sb-price-table td {
	padding: .5rem .6rem;
	border-bottom: 1px solid var(--sb-border);
	color: var(--sb-text);
	vertical-align: middle;
}

.sb-price-table td:not(:first-child) {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.sb-price-row-base td {
	font-weight: 600;
	color: var(--sb-primary);
}

.sb-price-row-option td {
	color: var(--sb-text-muted);
	font-size: .88rem;
}

.sb-price-item-name {
	padding-left: 1.25rem !important;
}

.sb-price-row-total td {
	border-top: 2px solid var(--sb-primary);
	border-bottom: none;
	padding-top: .65rem;
	font-size: 1.05rem;
	background: var(--sb-accent-light);
}

.sb-price-row-name {
	font-weight: 400;
	color: var(--sb-text-muted);
	font-size: .85em;
}

.sb-vat-note {
	font-size: .75rem;
	font-weight: 400;
	color: var(--sb-text-muted);
}

.sb-price-vat-note {
	margin: .6rem 0 0;
	font-size: .78rem;
	color: var(--sb-text-muted);
	font-style: italic;
}

.sb-price-zero {
	color: var(--sb-text-muted);
}

/* ============================================================
   MEASUREMENTS FORM
   ============================================================ */
.sb-measurements-section {
	background: var(--sb-white);
	border: 1px solid var(--sb-border);
	border-radius: var(--sb-radius);
	padding: 1.5rem;
	margin: 1.5rem 0;
}

.sb-measurements-section h3 {
	margin: 0 0 .5rem;
	color: var(--sb-primary);
}

.sb-measurements-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 1rem;
	margin: 1rem 0;
}

.sb-measurement-notes {
	grid-column: 1 / -1;
}

.sb-measurement-field label {
	display: block;
	font-size: .82rem;
	font-weight: 600;
	color: var(--sb-text-muted);
	margin-bottom: .3rem;
}

.sb-unit {
	font-weight: 400;
	color: #aaa;
}

.sb-measure-input {
	width: 100%;
	padding: .6rem .75rem;
	border: 1px solid var(--sb-border);
	border-radius: var(--sb-radius-sm);
	font-size: .95rem;
	transition: border-color var(--sb-transition);
}

.sb-measure-input:focus {
	outline: none;
	border-color: var(--sb-accent);
	box-shadow: 0 0 0 3px var(--sb-accent-light);
}

.sb-textarea {
	width: 100%;
	padding: .6rem .75rem;
	border: 1px solid var(--sb-border);
	border-radius: var(--sb-radius-sm);
	font-size: .9rem;
	resize: vertical;
	font-family: inherit;
	transition: border-color var(--sb-transition);
}

.sb-textarea:focus {
	outline: none;
	border-color: var(--sb-accent);
	box-shadow: 0 0 0 3px var(--sb-accent-light);
}

.sb-print-hint {
	font-size: .82rem;
	color: var(--sb-text-muted);
	margin-top: .5rem;
}

/* ============================================================
   CUSTOMER DETAILS / SUBMISSION
   ============================================================ */
.sb-customer-details {
	background: var(--sb-white);
	border: 1px solid var(--sb-border);
	border-radius: var(--sb-radius);
	padding: 1.5rem;
	margin: 1.5rem 0;
}

.sb-customer-details h3 {
	margin: 0 0 .75rem;
	color: var(--sb-primary);
}

.sb-detail-note {
	font-size: .88rem;
	color: var(--sb-text-muted);
	margin-bottom: 1rem;
	padding: .75rem;
	background: #f0f4ff;
	border-radius: var(--sb-radius-sm);
}

.sb-field-row {
	margin-bottom: 1rem;
}

.sb-field-row label {
	display: block;
	font-size: .85rem;
	font-weight: 600;
	margin-bottom: .3rem;
	color: var(--sb-text);
}

.sb-required {
	color: #e00;
}

.sb-input-full {
	width: 100%;
	padding: .65rem .85rem;
	border: 1px solid var(--sb-border);
	border-radius: var(--sb-radius-sm);
	font-size: .95rem;
	transition: border-color var(--sb-transition);
}

.sb-input-full:focus {
	outline: none;
	border-color: var(--sb-accent);
	box-shadow: 0 0 0 3px var(--sb-accent-light);
}

.sb-submit-wrap {
	text-align: center;
	padding: 1rem 0;
}

.sb-btn-submit {
	padding: 1rem 3rem;
	font-size: 1.1rem;
	border: none;
	border-radius: 8px;
	cursor: pointer;
}

.sb-submit-note {
	font-size: .82rem;
	color: var(--sb-text-muted);
	margin-top: .75rem;
}

/* ============================================================
   QUOTE CONFIRMATION
   ============================================================ */
.sb-quote-confirmation {
	max-width: 580px;
	margin: 2rem auto;
	text-align: center;
}

.sb-confirmation-icon {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: #e8f5e9;
	color: #2e7d32;
	font-size: 2.2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 1.5rem;
}

.sb-quote-confirmation h2 {
	font-size: 1.8rem;
	color: var(--sb-primary);
	margin-bottom: .75rem;
}

.sb-code-display {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin: 1.5rem 0;
	flex-wrap: wrap;
}

.sb-share-code {
	font-size: 2.4rem;
	font-weight: 800;
	letter-spacing: .25em;
	color: var(--sb-primary);
	background: var(--sb-accent-light);
	border: 2px dashed var(--sb-accent);
	padding: .6rem 1.5rem;
	border-radius: 8px;
	font-family: monospace;
}

.sb-btn-copy {
	padding: .6rem 1.2rem;
	border: 2px solid var(--sb-border);
	border-radius: 8px;
	cursor: pointer;
	background: var(--sb-white);
	color: var(--sb-text);
	font-weight: 600;
	transition: all var(--sb-transition);
}

.sb-btn-copy:hover {
	border-color: var(--sb-accent);
	color: var(--sb-text);
}

.sb-quote-summary {
	text-align: left;
	background: var(--sb-white);
	border: 1px solid var(--sb-border);
	border-radius: var(--sb-radius);
	padding: 1.25rem;
	margin: 1.5rem 0;
}

.sb-dealer-select-wrap {
	background: #f0f4ff;
	border-radius: var(--sb-radius);
	padding: 1.25rem;
	margin: 1.5rem 0;
	text-align: left;
}

.sb-dealer-select-wrap h3 {
	margin: 0 0 .5rem;
	color: var(--sb-primary);
}

.sb-select {
	width: 100%;
	padding: .65rem .85rem;
	border: 1px solid var(--sb-border);
	border-radius: var(--sb-radius-sm);
	font-size: .95rem;
}

/* ============================================================
   MY ACCOUNT — SUIT ORDERS
   ============================================================ */
.sb-myaccount {
	font-size: .95rem;
}

.sb-ma-heading {
	font-size: 1.5rem;
	color: var(--sb-primary);
	margin-bottom: 1.5rem;
}

.sb-ma-dealer-lookup-wrap {
	background: #f0f4ff;
	border-radius: var(--sb-radius);
	padding: 1.25rem;
	margin-bottom: 2rem;
}

.sb-ma-dealer-lookup-wrap h3 {
	margin: 0 0 .4rem;
	font-size: 1.05rem;
}

.sb-lookup-row {
	display: flex;
	gap: .75rem;
	flex-wrap: wrap;
	margin-top: .75rem;
}

.sb-code-input {
	padding: .6rem .85rem;
	border: 1px solid var(--sb-border);
	border-radius: var(--sb-radius-sm);
	font-size: 1rem;
	font-family: monospace;
	letter-spacing: .15em;
	width: 220px;
	text-transform: uppercase;
}

.sb-lookup-result {
	margin-top: 1rem;
	background: var(--sb-white);
	border: 1px solid var(--sb-border);
	border-radius: var(--sb-radius);
	padding: 1rem;
}

.sb-lookup-result h4 {
	margin: 0 0 .5rem;
	color: var(--sb-primary);
}

.sb-orders-table {
	width: 100%;
	border-collapse: collapse;
	font-size: .9rem;
}

.sb-orders-table th,
.sb-orders-table td {
	padding: .65rem .85rem;
	text-align: left;
	border-bottom: 1px solid var(--sb-border);
}

.sb-orders-table th {
	font-weight: 700;
	color: var(--sb-text-muted);
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .03em;
	background: var(--sb-bg);
}

.sb-no-orders {
	color: var(--sb-text-muted);
	padding: 1.5rem 0;
}

/* ---- Order detail (My Account) ---- */
.sb-order-header {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.5rem;
	flex-wrap: wrap;
}

.sb-order-header h2 {
	margin: 0;
	font-size: 1.4rem;
	color: var(--sb-primary);
}

.sb-order-meta-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.sb-meta-item {
	background: var(--sb-bg);
	border-radius: var(--sb-radius-sm);
	padding: .75rem 1rem;
}

.sb-meta-label {
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--sb-text-muted);
	display: block;
	margin-bottom: .2rem;
}

.sb-meta-value {
	font-weight: 600;
	color: var(--sb-primary);
}

.sb-config-summary,
.sb-measurements-summary {
	background: var(--sb-white);
	border: 1px solid var(--sb-border);
	border-radius: var(--sb-radius);
	padding: 1.25rem;
	margin-bottom: 1.5rem;
}

.sb-config-summary h3,
.sb-measurements-summary h3 {
	margin: 0 0 .75rem;
	color: var(--sb-primary);
	font-size: 1.05rem;
}

.sb-config-table {
	width: 100%;
	border-collapse: collapse;
}

.sb-config-table th,
.sb-config-table td {
	padding: .5rem .6rem;
	text-align: left;
	border-bottom: 1px solid var(--sb-border);
	font-size: .9rem;
}

.sb-config-table th {
	width: 35%;
	color: var(--sb-text-muted);
	font-weight: 600;
}

.sb-upcharge-note {
	color: var(--sb-text-muted);
	font-size: .8rem;
}

/* ---- Comments thread ---- */
.sb-comments-section {
	background: var(--sb-white);
	border: 1px solid var(--sb-border);
	border-radius: var(--sb-radius);
	padding: 1.25rem;
	margin-top: 1.5rem;
}

.sb-comments-section h3 {
	margin: 0 0 1rem;
	color: var(--sb-primary);
}

.sb-comments-thread {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	margin-bottom: 1.25rem;
}

.sb-comment {
	border-radius: var(--sb-radius-sm);
	padding: .75rem 1rem;
}

.sb-comment-customer {
	background: #f0f4ff;
	border-left: 3px solid #3b82f6;
}

.sb-comment-admin {
	background: #fff8e1;
	border-left: 3px solid var(--sb-accent);
}

.sb-comment-meta {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-bottom: .35rem;
	flex-wrap: wrap;
}

.sb-comment-meta strong {
	font-size: .9rem;
	color: var(--sb-primary);
}

.sb-comment-role {
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	background: var(--sb-border);
	color: var(--sb-text-muted);
	padding: .15rem .45rem;
	border-radius: 10px;
}

.sb-comment-time {
	font-size: .78rem;
	color: var(--sb-text-muted);
	margin-left: auto;
}

.sb-comment-body {
	font-size: .9rem;
	color: var(--sb-text);
	line-height: 1.55;
}

.sb-comment-form {
	border-top: 1px solid var(--sb-border);
	padding-top: 1rem;
}

.sb-comment-form label {
	display: block;
	font-weight: 600;
	font-size: .88rem;
	margin-bottom: .4rem;
}

.sb-no-comments {
	color: var(--sb-text-muted);
	font-style: italic;
	font-size: .9rem;
}

/* ---- Back link ---- */
.sb-back-link {
	color: var(--sb-text-muted);
	text-decoration: none;
	font-size: .88rem;
	margin-bottom: 1rem;
	display: inline-block;
}

.sb-back-link:hover {
	color: var(--sb-primary);
}

.sb-link {
	color: var(--sb-accent);
	text-decoration: none;
	font-weight: 600;
}

.sb-link:hover {
	color: var(--sb-primary);
	text-decoration: underline;
}

/* ============================================================
   STATUS BADGES
   ============================================================ */
.sb-status-badge {
	display: inline-block;
	padding: .25rem .7rem;
	border-radius: 20px;
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.sb-status-pending     { background: #fef3c7; color: #92400e; }
.sb-status-confirmed   { background: #dbeafe; color: #1e3a8a; }
.sb-status-in_progress { background: #ede9fe; color: #4c1d95; }
.sb-status-completed   { background: #dcfce7; color: #14532d; }
.sb-status-cancelled   { background: #fee2e2; color: #7f1d1d; }
.sb-status-on_hold     { background: #f3f4f6; color: #374151; }
.sb-status-quote       { background: #f1f5f9; color: #475569; }
.sb-status-retail_quote{ background: #f1f5f9; color: #475569; }


/* ============================================================
   CENTRED GRIDS
   ============================================================ */
.sb-grid-centred {
	justify-content: center;
}

/* ============================================================
   OPTION INFO PANEL
   ============================================================ */
.sb-option-info-panel {
	margin: 1.25rem auto 0;
	max-width: 680px;
}

.sb-info-panel-inner {
	background: #f0f4ff;
	border-left: 4px solid var(--sb-accent);
	border-radius: 0 var(--sb-radius-sm) var(--sb-radius-sm) 0;
	padding: .9rem 1.1rem;
}

.sb-info-panel-inner strong {
	display: block;
	color: var(--sb-primary);
	font-size: .9rem;
	margin-bottom: .3rem;
}

.sb-info-panel-inner p {
	margin: 0;
	font-size: .88rem;
	color: var(--sb-text);
	line-height: 1.55;
}

/* ============================================================
   EXTRAS STEP
   ============================================================ */
.sb-extras-subheading {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--sb-primary);
	margin: 1.5rem 0 .5rem;
}

.sb-extra-card {
	position: relative;
}

.sb-extra-tick {
	display: none;
	position: absolute;
	top: .5rem;
	right: .5rem;
	width: 24px;
	height: 24px;
	background: var(--sb-accent);
	color: #fff;
	border-radius: 50%;
	font-size: .75rem;
	font-weight: 700;
	align-items: center;
	justify-content: center;
}

.sb-extra-card.selected .sb-extra-tick {
	display: flex;
}

.sb-extra-card.selected {
	border-color: var(--sb-accent);
	box-shadow: 0 0 0 3px var(--sb-accent-light);
}

/* ============================================================
   REVIEW EXTRAS ROWS
   ============================================================ */
.sb-review-separator {
	border-bottom: 2px solid var(--sb-border) !important;
	margin-top: .25rem;
}

.sb-review-extra-row .sb-review-value {
	width: 100%;
}

.sb-review-extra-tick {
	color: var(--sb-primary);
	font-size: .9rem;
}


/* ============================================================
   EXTRAS SIZE CHOOSER
   ============================================================ */
.sb-extra-size-chooser {
	padding: .5rem .75rem;
	background: #f8f8f8;
	border-top: 1px solid var(--sb-border);
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: .82rem;
	flex-wrap: wrap;
}

.sb-extra-size-label {
	font-weight: 600;
	color: var(--sb-text-muted);
	white-space: nowrap;
}

/* Preset dropdown */
.sb-extra-size-select {
	flex: 1;
	min-width: 0;
	padding: .25rem .4rem;
	border: 1px solid var(--sb-border);
	border-radius: 4px;
	font-size: .82rem;
	background: var(--sb-white);
}

/* Free-text number input */
.sb-extra-size-input {
	flex: 1;
	min-width: 0;
	width: 60px;
	padding: .25rem .4rem;
	border: 1px solid var(--sb-border);
	border-radius: 4px;
	font-size: .82rem;
	background: var(--sb-white);
}

.sb-extra-size-input:focus {
	outline: none;
	border-color: var(--sb-accent);
}

/* cm / inches toggle */
.sb-unit-toggle {
	display: flex;
	border: 1px solid var(--sb-border);
	border-radius: 4px;
	overflow: hidden;
	flex-shrink: 0;
}

.sb-unit-toggle-btn {
	padding: .22rem .5rem;
	font-size: .75rem;
	font-weight: 600;
	background: var(--sb-white);
	color: var(--sb-text-muted);
	border: none;
	cursor: pointer;
	transition: background var(--sb-transition), color var(--sb-transition);
	line-height: 1;
}

.sb-unit-toggle-btn + .sb-unit-toggle-btn {
	border-left: 1px solid var(--sb-border);
}

.sb-unit-toggle-btn.active {
	background: var(--sb-primary);
	color: var(--sb-white);
}

.sb-unit-toggle-btn:hover:not(.active) {
	background: var(--sb-accent-light);
	color: var(--sb-primary);
}

/* ============================================================
   EXTRAS STACKING INFO PANEL
   ============================================================ */
.sb-extras-info-stack {
	margin: 1.25rem auto 0;
	max-width: 680px;
	display: flex;
	flex-direction: column;
	gap: .6rem;
}

.sb-extras-info-stack .sb-info-panel-inner {
	margin: 0;
}

/* ============================================================
   MODEL "FROM £" PRICE
   ============================================================ */
.sb-model-from-price {
	margin: .4rem 0 0;
	line-height: 1.35;
}

.sb-from-rrp {
	display: block;
	font-size: .9rem;
	font-weight: 700;
	color: var(--sb-accent);
}

.sb-from-trade {
	display: block;
	font-size: .9rem;
	font-weight: 700;
	color: var(--sb-primary);
}

.sb-from-rrp-small {
	display: block;
	font-size: .75rem;
	color: var(--sb-text-muted);
}

/* ============================================================
   STYLE "FROM £" PRICE ON CARD
   ============================================================ */
.sb-style-from-price {
	font-size: .82rem;
	font-weight: 700;
	color: var(--sb-primary);
	margin-top: .25rem;
}

/* ============================================================
   SIZE CARDS — MEASUREMENTS
   ============================================================ */
.sb-size-card {
	min-width: 200px;
	max-width: 320px;
	width: 280px;
}

.sb-size-measurements {
	border-top: 1px solid var(--sb-border);
	padding-top: .6rem;
	margin-top: .6rem;
}

.sb-size-unit-toggle {
	display: flex;
	justify-content: center;
	gap: 0;
	margin-bottom: .5rem;
	border: 1px solid var(--sb-border);
	border-radius: 4px;
	overflow: hidden;
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
}

.sb-size-unit-btn {
	padding: .2rem .6rem;
	font-size: .75rem;
	font-weight: 600;
	background: var(--sb-white);
	color: var(--sb-text-muted);
	border: none;
	cursor: pointer;
	transition: background var(--sb-transition), color var(--sb-transition);
}

.sb-size-unit-btn + .sb-size-unit-btn {
	border-left: 1px solid var(--sb-border);
}

.sb-size-unit-btn.active {
	background: var(--sb-primary);
	color: var(--sb-white);
}

.sb-size-guide-table {
	width: 100%;
	border-collapse: collapse;
	font-size: .78rem;
}

.sb-size-guide-table th,
.sb-size-guide-table td {
	padding: .2rem .3rem;
	text-align: left;
	border-bottom: 1px solid var(--sb-border);
}

.sb-size-guide-table td {
	white-space: nowrap;
}

.sb-size-guide-table th {
	color: var(--sb-text-muted);
	font-weight: 500;
	width: 55%;
}

.sb-size-guide-table td {
	font-weight: 600;
	color: var(--sb-primary);
}

/* .sb-size-upcharge moved above */

.sb-size-card-mtm {
	border-style: dashed;
	border-color: var(--sb-accent);
}


/* Option card size chooser (single-select steps) */
.sb-option-size-chooser {
	padding: .5rem .75rem;
	background: #f8f8f8;
	border-top: 1px solid var(--sb-border);
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: .82rem;
	flex-wrap: wrap;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 600px) {
	.sb-model-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1rem;
	}
	.sb-option-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.sb-style-grid {
		grid-template-columns: repeat(2, 1fr);
		justify-content: start;
	}
	.sb-size-grid {
		gap: .6rem;
	}
	.sb-size-card {
		padding: 1rem;
		min-width: 90px;
	}
	.sb-progress-bar {
		gap: 0;
	}
	.sb-progress-step {
		padding: 0 .5rem;
	}
	.sb-step-label {
		display: none;
	}
	.sb-measurements-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 420px) {
	.sb-share-code {
		font-size: 1.8rem;
		letter-spacing: .15em;
	}
}