.kbsf-app{
	--kbsf-accent:#e4601c;
	--kbsf-black:#111111;
	--kbsf-gray-600:#666666;
	--kbsf-gray-400:#999999;
	--kbsf-gray-200:#e2e2e2;
	--kbsf-gray-100:#f2f2f2;
	--kbsf-white:#ffffff;
	--kbsf-line:#dcdcdc;

	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
	color:var(--kbsf-black);
	background:var(--kbsf-white);
	border:1px solid var(--kbsf-line);
	border-radius:6px;
	padding:20px;
	margin:16px 0;
	width:100%;
	box-sizing:border-box;
}
.kbsf-app *{ box-sizing:border-box; }

.kbsf-app,
.kbsf-app *{
	box-sizing:border-box !important;
}
.kbsf-app input,
.kbsf-app select,
.kbsf-app button{
	margin:0 !important;
	box-shadow:none !important;
	outline:none !important;
	border-radius:4px;
}
.kbsf-app select{
	height:auto !important;
	line-height:normal !important;
	min-height:38px;
	padding-top:8px !important;
	padding-bottom:8px !important;
	padding-right:34px !important;
	-webkit-appearance:none !important;
	-moz-appearance:none !important;
	appearance:none !important;
	background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
	background-repeat:no-repeat !important;
	background-position:right 10px center !important;
	background-size:16px !important;
	cursor:pointer;
}
.kbsf-seg,
.kbsf-line-row,
.kbsf-line-h-label,
.kbsf-toggle,
.kbsf-color-preview{
	margin:0 !important;
}
.kbsf-line-row input[type=text]{
	border:none !important;
	background:transparent !important;
	padding:2px 0 !important;
	font-size:14px;
	box-sizing:border-box;
	flex:1;
}
.kbsf-line-row input[type=text]:focus{
	outline:none !important;
	box-shadow:none !important;
	border:none !important;
}
.kbsf-segmented{ display:flex !important; }
.kbsf-toggle-row{ display:flex !important; }
.kbsf-line-row{ display:flex !important; }

/* Preview-Panel (Canvas + Preisbox, kommt vor den Warenkorb-Button) */
.kbsf-preview-panel{
	--kbsf-accent:#e4601c;
	--kbsf-gray-600:#666666;
	--kbsf-gray-400:#999999;
	--kbsf-gray-200:#e2e2e2;
	--kbsf-gray-100:#f2f2f2;
	--kbsf-white:#ffffff;
	--kbsf-line:#dcdcdc;
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
	background:#ffffff;
	border:1px solid #dcdcdc;
	border-radius:6px;
	padding:20px;
	margin:16px 0;
	width:100%;
	box-sizing:border-box;
}

/* Zweispaltiges Layout: links Steuerung, rechts Canvas + Preisbox +
   Warenkorb-Button. Wird sowohl vom [kbs_konfigurator]-Shortcode als
   auch direkt auf der WooCommerce-Produktseite verwendet - eigenstaendiger
   Block, unabhaengig vom Spalten-Grid des Themes. */
.kbsf-combined{
	display:flex;
	gap:24px;
	align-items:flex-start;
	flex-wrap:wrap;
	max-width:1300px;
	margin:24px auto;
}
.kbsf-combined .kbsf-col-left{ flex:0 1 400px; min-width:300px; }
.kbsf-combined .kbsf-col-right{ flex:1 1 520px; min-width:380px; }
.kbsf-combined .kbsf-col-right form.cart{ margin-top:16px; }
.kbsf-combined .kbsf-app{ margin:0; }
.kbsf-combined .kbsf-preview-panel{ margin:0; }

/* Unter der Mindestbreite beider Spalten (300+380+24 Gap) stapeln statt
   quetschen - sonst bleiben Sidebar/Canvas auf dem Handy breiter als der
   Viewport und die Seite scrollt horizontal. */
@media (max-width: 720px){
	.kbsf-combined .kbsf-col-left,
	.kbsf-combined .kbsf-col-right{
		flex:1 1 100%;
		min-width:0;
	}
}

/* Titel wird von uns manuell vor dem Konfigurator ausgegeben (siehe
   render_configurator) - eigener Wrapper, damit Abstand/Farbe nicht vom
   Theme abhaengen, das den Titel sonst nur innerhalb von .summary stylt. */
.kbsf-title-wrap{
	max-width:1300px;
	margin:24px auto 16px;
}
.kbsf-title-wrap .product_title{
	margin:0 !important;
	color:#111111 !important;
}

.kbsf-block{
	padding-bottom:18px;
	margin-bottom:18px;
	border-bottom:1px solid var(--kbsf-line);
}
.kbsf-block:last-child{ border-bottom:none; margin-bottom:0; padding-bottom:0; }

.kbsf-title{
	font-size:12px;
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:.6px;
	color:var(--kbsf-gray-600) !important;
	margin:0 0 12px;
}

.kbsf-app label{
	display:block;
	font-size:12px;
	color:var(--kbsf-gray-600) !important;
	margin-bottom:4px;
}
.kbsf-app select,
.kbsf-app input[type=text],
.kbsf-app input[type=number]{
	width:100%;
	padding:9px 10px;
	border:1px solid var(--kbsf-gray-200);
	border-radius:4px;
	font-size:14px;
	font-family:inherit;
	background-color:var(--kbsf-white) !important;
	color:var(--kbsf-black) !important;
}
.kbsf-app select:disabled,
.kbsf-app input:disabled{
	background-color:var(--kbsf-gray-100) !important;
	color:var(--kbsf-gray-400) !important;
}

.kbsf-btn{
	border:1px solid var(--kbsf-gray-200);
	background:var(--kbsf-white) !important;
	padding:9px 12px;
	border-radius:4px;
	cursor:pointer;
	font-size:13px;
	font-family:inherit;
	color:var(--kbsf-black) !important;
	text-align:center;
}
.kbsf-btn:hover{ background:var(--kbsf-gray-100); }
.kbsf-btn-full{ width:100%; }

.kbsf-segmented{
	display:flex;
	border:1px solid var(--kbsf-gray-200);
	border-radius:4px;
	overflow:hidden;
}
.kbsf-seg{
	flex:1;
	text-align:center;
	padding:9px 8px;
	font-size:13px;
	cursor:pointer;
	background:var(--kbsf-white);
	border-right:1px solid var(--kbsf-gray-200);
}
.kbsf-seg:last-child{ border-right:none; }
.kbsf-seg.active{
	background:var(--kbsf-accent);
	color:var(--kbsf-white);
}

.kbsf-line-row{
	border:1px solid var(--kbsf-gray-200);
	border-radius:4px;
	padding:10px;
	margin-bottom:8px;
	cursor:pointer;
	display:flex;
}
.kbsf-line-row.active{
	border-color:var(--kbsf-accent);
	box-shadow:0 0 0 1px var(--kbsf-accent);
}
.kbsf-line-top{
	display:flex !important;
	gap:8px;
	align-items:center;
	width:100%;
}
.kbsf-line-h-label{
	flex-shrink:0;
	font-size:12px;
	color:var(--kbsf-gray-600);
	white-space:nowrap;
}
.kbsf-line-del{
	flex-shrink:0;
	width:24px;
	height:24px;
	border:1px solid var(--kbsf-gray-200);
	border-radius:4px;
	background:var(--kbsf-white);
	cursor:pointer;
	font-size:14px;
	line-height:1;
	color:var(--kbsf-gray-600);
	display:flex !important;
	align-items:center;
	justify-content:center;
}

.kbsf-size-cols{
	display:flex !important;
	gap:8px;
	margin-top:10px;
}
.kbsf-size-cols > div{
	flex:1;
	min-width:0;
}
.kbsf-size-cols input{
	padding:8px !important;
	font-size:13px;
}
.kbsf-size-cols label{
	font-size:11px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.kbsf-total-summary{
	margin-top:14px;
	font-size:13px;
	font-weight:600;
	color:var(--kbsf-black);
}

.kbsf-color-preview{
	width:34px;
	height:34px;
	border-radius:4px;
	flex-shrink:0;
	box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);
}

.kbsf-toggle-row{ display:flex; align-items:center; justify-content:space-between; }
.kbsf-toggle{
	width:42px;
	height:24px;
	border-radius:12px;
	background:var(--kbsf-gray-200);
	position:relative;
	cursor:pointer;
	flex-shrink:0;
}
.kbsf-toggle.on{ background:var(--kbsf-accent); }
.kbsf-toggle .kbsf-knob{
	position:absolute;
	top:2px; left:2px;
	width:20px; height:20px;
	border-radius:50%;
	background:var(--kbsf-white);
	transition:left .15s;
}
.kbsf-toggle.on .kbsf-knob{ left:20px; }

.kbsf-preview-wrap{
	background:
		linear-gradient(45deg,#e5e5e5 25%,transparent 25%),
		linear-gradient(-45deg,#e5e5e5 25%,transparent 25%),
		linear-gradient(45deg,transparent 75%,#e5e5e5 75%),
		linear-gradient(-45deg,transparent 75%,#e5e5e5 75%);
	background-size:20px 20px;
	background-position:0 0,0 10px,10px -10px,-10px 0px;
	background-color:#fafafa;
	border:1px solid var(--kbsf-line);
	border-radius:6px;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:0;
	max-height:420px;
	overflow:hidden;
}
#kbsfCanvas{ display:block; max-width:100%; max-height:420px; width:auto; height:auto; }

.kbsf-preview-outer{ position:relative; display:block; width:100%; }
.kbsf-dim-v{ position:absolute; display:flex; align-items:center; }
.kbsf-dim-v-line{ width:1px; background:var(--kbsf-gray-400); position:relative; }
.kbsf-dim-v-line::before, .kbsf-dim-v-line::after{
	content:''; position:absolute; left:-4px; width:9px; height:1px; background:var(--kbsf-gray-400);
}
.kbsf-dim-v-line::before{ top:0; }
.kbsf-dim-v-line::after{ bottom:0; }
.kbsf-dim-v .kbsf-dim-label{ margin-left:9px; font-size:13px; color:var(--kbsf-gray-600); font-weight:600; }

.kbsf-dim-h{ position:absolute; display:flex; flex-direction:column; align-items:center; }
.kbsf-dim-h-line{ height:1px; background:var(--kbsf-gray-400); position:relative; }
.kbsf-dim-h-line::before, .kbsf-dim-h-line::after{
	content:''; position:absolute; top:-4px; width:1px; height:9px; background:var(--kbsf-gray-400);
}
.kbsf-dim-h-line::before{ left:0; }
.kbsf-dim-h-line::after{ right:0; }
.kbsf-dim-h .kbsf-dim-label{ margin-top:9px; font-size:13px; color:var(--kbsf-gray-600); font-weight:600; }

.kbsf-dims{
	margin-top:10px;
	font-size:13px;
	color:var(--kbsf-gray-600);
	text-align:right;
}

.kbsf-price-box{
	margin-top:20px;
	border:1px solid var(--kbsf-line);
	border-radius:6px;
	overflow:hidden;
}
.kbsf-price-head{
	background:var(--kbsf-accent) !important;
	color:var(--kbsf-white) !important;
	padding:12px 16px;
	font-size:13px;
	font-weight:600;
	text-transform:uppercase;
	letter-spacing:.5px;
}
.kbsf-price-row{
	display:flex;
	justify-content:space-between;
	padding:9px 16px;
	font-size:13px;
	color:var(--kbsf-black) !important;
	border-bottom:1px solid var(--kbsf-gray-100);
}
.kbsf-price-row:last-child{ border-bottom:none; }
.kbsf-price-row .val{ font-weight:600; }
.kbsf-price-total{
	padding:14px 16px;
	display:flex;
	justify-content:space-between;
	align-items:center;
	background:var(--kbsf-gray-100) !important;
}
.kbsf-price-total .label{ font-size:13px; color:var(--kbsf-gray-600) !important; }
.kbsf-price-total .amount{ font-size:24px; font-weight:700; color:var(--kbsf-accent) !important; }