.stb-tailoring-card{
	margin:30px 0;
	padding:24px;
	border:1px solid #d8c9a8;
	border-radius:12px;
	background:#faf8f4;
}

.stb-card-icon{
	font-size:34px;
	margin-bottom:12px;
}

.stb-card-title{
	margin:0 0 12px;
	font-size:24px;
}

.stb-card-description{
	margin-bottom:18px;
	line-height:1.7;
}

.stb-card-benefits{
	margin:0 0 24px;
	padding-left:18px;
}

.stb-card-benefits li{
	margin-bottom:8px;
}

.stb-button{
	display:inline-block;
	padding:14px 28px;
	background:#8b6b3f;
	color:#fff !important;
	text-decoration:none;
	border-radius:8px;
	font-weight:600;
	transition:.25s;
}

.stb-button:hover{
	opacity:.92;
}

/* =====================================
   Measurement Step
===================================== */

.stb-measurement-option{
	display:block;
	padding:18px;
	margin:15px 0;
	border:1px solid #ddd;
	border-radius:8px;
	cursor:pointer;
	background:#fff;
	transition:.25s;
}

.stb-measurement-option:hover{
	background:#faf8f4;
	border-color:#8b6b3f;
}

.stb-measurement-option input{
	margin-right:12px;
}

/* =======================================
   Measurement Form
======================================= */

.stb-new-measurement{

	margin-top:35px;

	padding:25px;

	background:#fafafa;

	border:1px solid #ddd;

	border-radius:10px;

}

.stb-measurement-grid{

	display:grid;

	grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

	gap:18px;

	margin-top:20px;

}

.stb-input{

	width:100%;

	padding:10px 12px;

	border:1px solid #ccc;

	border-radius:6px;

	margin-top:8px;

	box-sizing:border-box;

}

.stb-input:focus{

	border-color:#8b6b3f;

	outline:none;

	box-shadow:0 0 0 3px rgba(139,107,63,.12);

}

.stb-required{
	color:#b00020;
	font-weight:600;
	margin-left:4px;
}

.stb-validation-errors{
	margin:20px 0;
	padding:15px 20px;
	border:1px solid #d63638;
	background:#fff5f5;
	border-radius:8px;
	color:#d63638;
}

.stb-validation-errors ul{
	margin:10px 0 0 20px;
	padding:0;
}

.stb-validation-errors li{
	margin-bottom:6px;
}

/* Measurement Preview Card */

.stb-measurement-preview {

	margin-top: 20px;
	padding: 20px;

	background: #ffffff;

	border: 1px solid #e5e7eb;
	border-radius: 12px;

	box-shadow:
		0 2px 8px rgba(
			0,
			0,
			0,
			0.05
		);

}

.stb-preview-header {

	margin-bottom: 15px;

}

.stb-preview-header h4 {

	margin: 0;

	font-size: 18px;
	font-weight: 600;

}

.stb-preview-grid {

	display: grid;

	grid-template-columns:
		repeat(
			2,
			minmax(
				0,
				1fr
			)
		);

	gap: 12px;

}

.stb-preview-row {

	display: flex;

	justify-content:
		space-between;

	align-items: center;

	padding: 10px 12px;

	background: #f8fafc;

	border-radius: 8px;

}

.stb-preview-label {

	font-weight: 500;

	color: #374151;

}

.stb-preview-value {

	font-weight: 600;

	color: #111827;

}

@media ( max-width: 768px ) {

	.stb-preview-grid {

		grid-template-columns:
			1fr;

	}

}

/* =====================================
 Premium Tailoring Progress Timeline
===================================== */


.stb-progress-wrapper {

	margin-bottom:45px;

	padding:25px 20px;

	background:#fff;

	border-radius:18px;

	box-shadow:
	0 10px 35px rgba(0,0,0,.06);

}



.stb-progress-title {

	text-align:center;

	margin-bottom:35px;

}


.stb-progress-title h2 {

	margin:0;

	font-size:28px;

	font-weight:600;

	color:#111;

}


.stb-progress-title p {

	margin-top:8px;

	color:#777;

	font-size:14px;

}




.stb-progress-timeline {

	position:relative;

	display:flex;

	justify-content:space-between;

	align-items:flex-start;

}




/* Base line */

.stb-progress-track {

	position:absolute;

	top:22px;

	left:0;

	right:0;

	height:3px;

	background:#ece6dd;

	z-index:0;

	border-radius:10px;

}



/* Completed line */

.stb-progress-track-fill {

	height:100%;

	background:#c49a5a;

	border-radius:10px;

	transition:.4s ease;

}




.stb-progress-item {

	position:relative;

	z-index:2;

	text-align:center;

	flex:1;

}




.stb-progress-node {

	width:46px;

	height:46px;

	margin:auto;

	border-radius:50%;

	display:flex;

	align-items:center;

	justify-content:center;

	background:#fff;

	border:2px solid #ddd;

	color:#999;

	font-weight:600;

	transition:.3s ease;

}




.stb-progress-name {

	margin-top:14px;

	font-size:13px;

	color:#777;

	white-space:nowrap;

}



/* Completed */

.stb-progress-item.completed
.stb-progress-node {

	background:#111;

	border-color:#111;

	color:#fff;

}



/* Active */

.stb-progress-item.active
.stb-progress-node {

	background:#c49a5a;

	border-color:#c49a5a;

	color:#fff;

	box-shadow:

	0 0 0 7px rgba(196,154,90,.18);

}


.stb-progress-item.active
.stb-progress-name {

	color:#111;

	font-weight:600;

}




/* Mobile */

@media(max-width:768px){

	.stb-progress-timeline {

		overflow-x:auto;

		justify-content:flex-start;

		gap:30px;

		padding-bottom:15px;

		scroll-behavior:smooth;

	}


	.stb-progress-item {

		min-width:120px;

	}


	.stb-progress-track {

		width:1000px;

	}


}

/* Save Measurement Profile */

.stb-save-profile-wrap {

	text-align:center;

	margin-top:25px;

	margin-bottom:20px;

}

.stb-save-profile-btn {

	background:#c49a5a;

	color:#fff;

	border:none;

	padding:12px 28px;

	border-radius:8px;

	font-size:14px;

	font-weight:600;

	cursor:pointer;

	transition:.3s ease;

}

.stb-save-profile-btn:hover {

	background:#b48746;

}

/* Measurement Messages */

.stb-success-message {

	background:#ecfdf3;

	border:1px solid #bbf7d0;

	color:#166534;

	padding:12px 15px;

	border-radius:8px;

	margin-bottom:20px;

	font-weight:600;

}

.stb-error-message {

	background:#fef2f2;

	border:1px solid #fecaca;

	color:#991b1b;

	padding:12px 15px;

	border-radius:8px;

	margin-bottom:20px;

	font-weight:600;

}

/* Step label wrapping improvement */

.stb-progress-name {

	max-width:90px;

	margin-left:auto;

	margin-right:auto;

	white-space:normal;

	line-height:1.25;

	text-align:center;

}


/* Keep progress section separated */

.stb-progress-wrapper {

	margin-bottom:55px;

}

/* ==========================================
   Builder Card Layout
========================================== */

.stb-builder {

	max-width:1100px;

	margin:40px auto;

	padding:35px;

	background:#fff;

	border-radius:22px;

	box-shadow:
	0 15px 50px rgba(0,0,0,.08);

}

.stb-builder h1 {

	text-align:center;

	font-size:34px;

	font-weight:700;

	color:#111;

	margin-bottom:35px;

}

.stb-builder hr {

	border:none;

	height:1px;

	background:#efefef;

	margin:30px 0;

}

.stb-builder-card {

	background: #ffffff;

	border-radius: 18px;

	box-shadow:
		0 10px 30px rgba(0,0,0,.06);

	overflow: hidden;

}

.stb-builder-card h1 {

	margin: 0;

	padding: 30px;

	font-size: 32px;

	font-weight: 700;

	border-bottom: 1px solid #f0f0f0;

}

.stb-builder-section {

	padding: 30px;

	border-bottom: 1px solid #f4f4f4;

}

.stb-builder-section:last-child {

	border-bottom: none;

}

.stb-step-content {

	text-align:center;

	max-width:800px;

	margin:0 auto;

}

.stb-navigation-section {

	background: #fafafa;

}

.stb-product-card {

	max-width:850px;

	margin:0 auto;

}

/* =====================================
Compact Fabric Reference Card
===================================== */

.stb-fabric-reference-card {

	display:flex;

	align-items:center;

	gap:16px;

	padding:16px 20px;

	background:#fff;

	border:1px solid #ececec;

	border-radius:14px;

	margin-bottom:30px;

	box-shadow:
	0 4px 20px rgba(0,0,0,.04);

}

.stb-fabric-reference-image img {

	width:70px;

	height:70px;

	object-fit:cover;

	border-radius:10px;

	display:block;

}

.stb-fabric-reference-label {

	display:block;

	font-size:12px;

	text-transform:uppercase;

	letter-spacing:.8px;

	color:#888;

	margin-bottom:4px;

}

.stb-fabric-reference-content h4 {

	margin:0;

	font-size:18px;

	font-weight:600;

	color:#111;

}

.stb-selected-fabric {

	max-width:500px;

	margin:0 auto;

	text-align:center;

}

.stb-builder > h3,
.stb-step-content > h3 {

	text-align:center;

}

/* Builder Navigation */

.stb-navigation {

	display:flex;

	justify-content:space-between;

	align-items:center;

	margin-top:35px;

}


.stb-navigation-left,
.stb-navigation-right {

	display:flex;

}

@media(max-width:768px){

	.stb-fabric-reference-card {

		padding:12px 15px;

		gap:12px;

	}

	.stb-fabric-reference-image img {

		width:55px;

		height:55px;

	}

	.stb-fabric-reference-content h4 {

		font-size:15px;

	}

}

/* =====================================
Option Cards
===================================== */

.stb-option-grid{

	display:grid;

	grid-template-columns:
	repeat(auto-fill,minmax(250px,1fr));

	gap:24px;

	margin-top:20px;

}

.stb-option-card{

	background:#fff;

	border:1px solid #ececec;

	border-radius:16px;

	padding:15px;

	text-align:center;

	box-shadow:
	0 6px 18px rgba(0,0,0,.05);

	transition:.25s ease;

	cursor:pointer;

}

.stb-option-card:hover{

	transform:translateY(-4px);

	box-shadow:
	0 12px 28px rgba(0,0,0,.08);

}

.stb-option-card img{

	width:100%;

	height:220px;

	object-fit:cover;

	border-radius:12px;

	margin-bottom:15px;

}

.stb-option-card h4{

	margin:0;

	font-size:16px;

	font-weight:600;

	color:#111;

}

.stb-option-price{

	margin-top:8px;

	font-weight:600;

	color:#c49a5a;

}

.stb-login-required,
.stb-builder-error {

	max-width: 600px;

	margin: 60px auto;

	padding: 40px;

	text-align: center;

	background: #fff;

	border-radius: 16px;

	box-shadow:
		0 10px 35px rgba(
			0,
			0,
			0,
			0.06
		);

}

.stb-login-required h2,
.stb-builder-error h2 {

	margin-bottom: 15px;

}

.stb-login-required p,
.stb-builder-error p {

	color: #666;

	margin-bottom: 25px;

}

/*==============================================================
=  Measurement Profiles
==============================================================*/

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

.stb-measurement-profile-header{

	display:flex;
	justify-content:space-between;
	align-items:flex-start;
	gap:24px;

	margin-bottom:34px;

}

.stb-measurement-profile-header__title{

	margin:0 0 10px;

	font-size:34px;

	font-weight:700;

	line-height:1.2;

}

.stb-measurement-profile-header__description{

	margin:0;

	font-size:15px;

	color:inherit;

	opacity:.70;

}

/* List
--------------------------------------------------------------*/

.stb-measurement-profile-list{

	border-top:1px solid rgba(0,0,0,.08);

}

/* Item
--------------------------------------------------------------*/

.stb-measurement-profile-item{

	display:grid;

	grid-template-columns:1fr auto;

	align-items:center;

	column-gap:40px;

	padding:30px 0;

	border-bottom:1px solid rgba(0,0,0,.08);

}

.stb-measurement-profile-item__title{

	margin:0 0 8px;

	font-size:20px;

	font-weight:600;

	line-height:1.3;

}

.stb-measurement-profile-item__meta{

	margin:0;

	font-size:13px;

	opacity:.65;

}

/* Actions
--------------------------------------------------------------*/

.stb-measurement-profile-item__actions{

	display:flex;

	align-items:center;

	gap:24px;

}

.stb-measurement-profile-item__action{

	font-size:14px;

	font-weight:600;

	color:inherit;

	text-decoration:none;

	opacity:.70;

	transition:opacity .2s ease;

}

.stb-measurement-profile-item__action:hover{

	opacity:1;

	text-decoration:none;

}

.stb-measurement-profile-item__action--danger{

	color:#c62828;

	opacity:1;

}

/* Responsive
--------------------------------------------------------------*/

@media (max-width:768px){

	.stb-measurement-profile-header{

		flex-direction:column;

		align-items:flex-start;

	}

	.stb-measurement-profile-item{

		grid-template-columns:1fr;

		row-gap:16px;

	}

	.stb-measurement-profile-item__actions{

		gap:18px;

		flex-wrap:wrap;

	}

}

.stb-profile-default-badge{

	display:inline-flex;

	align-items:center;

	padding:4px 10px;

	border-radius:999px;

	font-size:12px;

	font-weight:700;

	letter-spacing:.04em;

	text-transform:uppercase;

	background:#e8f5e9;

	color:#2e7d32;

}

