/* WD Schild-Designer — App-Layout (Menü · Canvas · Farbpalette), Clean & luftig */
:root{
	--sd-blue:#0093d6; --sd-blue-dark:#0077b0; --sd-blue-soft:#eaf6fc;
	--sd-ink:#151719; --sd-muted:#79818b; --sd-line:#edeff2; --sd-line-2:#f4f5f7;
	--sd-surface:#f5f6f8; --sd-danger:#e5484d;
	--sd-shadow:0 12px 44px rgba(20,30,50,.09);
	--sd-shadow-sm:0 2px 10px rgba(20,30,50,.05);
	--sd-ease:.18s cubic-bezier(.2,.7,.3,1);
}

.wd-sd{max-width:1160px;margin:8px auto 26px;padding:0;font-family:Inter,'Helvetica Neue',Arial,sans-serif;color:var(--sd-ink);text-align:left}

/* Layout: Designer-Produkt = einspaltig, volle Breite */
body.wd-designer-product .product-gallery.col{display:none !important}
body.wd-designer-product .product-info.summary{max-width:100% !important;flex-basis:100% !important;width:100% !important}
form.cart #wd-sd-app{margin-bottom:26px}

/* Info-Block (Preis + Produktdaten) UNTER den Konfigurator statt darüber (Dom-Wunsch) */
body.wd-designer-product .product-info.summary{display:flex;flex-direction:column}
body.wd-designer-product .product-info.summary > form.cart{order:3}
body.wd-designer-product .product-info.summary > .price-wrapper{order:4;margin-top:6px}
body.wd-designer-product .product-info.summary > .product_meta{order:5}

/* Zweispaltiger Kaufbereich unter dem Konfigurator: Preis+Daten links, Menge+Button rechts */
.wd-sd-buybar{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-start;width:100%;max-width:1160px;flex:0 0 100%;margin-top:16px}
.wd-sd-buybar-info{flex:1 1 300px;min-width:0}
.wd-sd-buybar-info .price-wrapper{margin:0 0 14px}
.wd-sd-buybar-cart{flex:1 1 340px;display:flex;flex-direction:row;gap:12px;align-items:center}
.wd-sd-buybar-cart .ux-quantity.quantity{flex:0 0 auto !important;width:auto !important;max-width:120px;margin:0 !important;align-self:center}
.wd-sd-buybar-cart .single_add_to_cart_button{flex:1 1 auto !important;width:auto !important;margin:0 !important;align-self:center}

/* Kopfleiste */
.wd-sd-topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:18px}
.wd-sd-title{margin:0;font-size:27px;font-weight:800;letter-spacing:-.025em;line-height:1.1}
.wd-sd-sub{margin:8px 0 0;color:var(--sd-muted);font-size:14.5px;line-height:1.5}
.wd-sd-topactions{display:flex;gap:12px;flex-shrink:0;align-items:center}
.wd-sd-price{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;line-height:1.05;margin-right:4px}
.wd-sd-price-label{font-size:10.5px;font-weight:700;color:var(--sd-muted);text-transform:uppercase;letter-spacing:.05em}
.wd-sd-price-val{font-size:23px;font-weight:800;color:var(--sd-blue);white-space:nowrap}
.wd-sd-price-val .amount,.wd-sd-price-val bdi{color:var(--sd-blue)!important;font-weight:800}

/* Arbeitsfläche */
.wd-sd-workspace{display:flex;gap:20px;align-items:flex-start}
@media(max-width:900px){.wd-sd-workspace{flex-direction:column}}

/* ---- LINKS: Akkordeon-Menü ---- */
.wd-sd-rail{flex:0 0 268px;width:268px;background:#fff;border-radius:20px;box-shadow:var(--sd-shadow);padding:8px;align-self:flex-start}
@media(max-width:900px){.wd-sd-rail{flex:1 1 auto;width:auto}}
.wd-sd-acc{border-radius:14px;overflow:hidden}
.wd-sd-acc + .wd-sd-acc{border-top:1px solid var(--sd-line-2)}
.wd-sd-acc-head{display:flex;align-items:center;gap:12px;width:100%;padding:13px 12px;background:none;border:0;cursor:pointer;
	font-family:inherit;font-size:14.5px;font-weight:700;color:var(--sd-ink);text-align:left;transition:var(--sd-ease)}
.wd-sd-acc-head:hover{color:var(--sd-blue)}
.wd-sd-rail-ico{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex:0 0 auto;
	border-radius:50%;background:var(--sd-blue-soft);color:var(--sd-blue);transition:var(--sd-ease)}
.wd-sd-rail-ico svg{width:20px;height:20px}
.wd-sd-acc.is-open .wd-sd-rail-ico{background:var(--sd-blue);color:#fff}
.wd-sd-rail-txt{flex:1}
.wd-sd-acc-arrow{width:9px;height:9px;border-right:2px solid var(--sd-muted);border-bottom:2px solid var(--sd-muted);
	transform:rotate(45deg);margin-right:4px;transition:var(--sd-ease)}
.wd-sd-acc.is-open .wd-sd-acc-arrow{transform:rotate(-135deg);border-color:var(--sd-blue)}
.wd-sd-acc-body{display:none;padding:4px 12px 18px}
.wd-sd-acc.is-open .wd-sd-acc-body{display:block}

/* ---- MITTE: Canvas + Farbpalette (gleiche Höhe) ---- */
.wd-sd-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:center;gap:14px}
.wd-sd-canvasrow{display:flex;gap:18px;align-items:stretch;width:100%;justify-content:center}
@media(max-width:900px){.wd-sd-canvasrow{flex-direction:column;align-items:center}}
.wd-sd-objbar{display:flex;gap:6px;background:#fff;padding:7px;border-radius:14px;box-shadow:var(--sd-shadow);align-self:center}
.wd-sd-objbtn{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:10px;
	background:var(--sd-line-2);color:var(--sd-ink);cursor:pointer;font-size:16px;transition:var(--sd-ease)}
.wd-sd-objbtn:hover{background:var(--sd-blue-soft);color:var(--sd-blue)}
.wd-sd-objbtn-danger:hover{background:#fdecec;color:var(--sd-danger)}
.wd-sd-stage{flex:1 1 auto;min-width:0;background-color:var(--sd-surface);
	background-image:radial-gradient(circle, rgba(20,30,50,.05) 1px, transparent 1.4px);background-size:19px 19px;
	border-radius:22px;padding:32px;display:flex;align-items:center;justify-content:center;min-height:380px}
.wd-sd-canvas-wrap{box-shadow:0 20px 54px rgba(20,30,50,.17),0 4px 12px rgba(20,30,50,.08);border-radius:5px;line-height:0}
.wd-sd-canvas-wrap canvas{border-radius:5px}
.wd-sd-dim{font-size:13px;color:var(--sd-muted);font-weight:650;background:#fff;padding:6px 14px;border-radius:100px;box-shadow:var(--sd-shadow-sm)}

/* ---- RECHTS: Farbpalette ---- */
.wd-sd-colorrail{flex:0 0 114px;width:114px;background:#fff;border-radius:20px;box-shadow:var(--sd-shadow);
	padding:16px 12px;display:flex;flex-direction:column;align-items:center;gap:12px}
@media(max-width:900px){.wd-sd-colorrail{flex:1 1 auto;width:auto;flex-direction:row;flex-wrap:wrap;justify-content:center}}
.wd-sd-color-head{display:flex;flex-direction:column;align-items:center;gap:5px;width:100%;flex:0 0 auto}
.wd-sd-color-dot{width:30px;height:30px;border-radius:50%;box-shadow:0 0 0 1.5px var(--sd-line),var(--sd-shadow-sm);background:#fff}
.wd-sd-color-label{font-size:11px;font-weight:700;color:var(--sd-muted);text-align:center;line-height:1.2}
.wd-sd-color-swatches{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:9px;width:100%;flex:1 1 0;min-height:0;align-content:stretch}
@media(max-width:900px){.wd-sd-color-swatches{grid-template-columns:repeat(10,1fr);grid-auto-rows:auto;flex:1 1 100%}}
.wd-sd-cswatch{width:100%;height:100%;min-height:0;border-radius:9px;border:2px solid #fff;
	box-shadow:0 0 0 1.5px var(--sd-line);cursor:pointer;transition:var(--sd-ease);padding:0}
@media(max-width:900px){.wd-sd-cswatch{min-height:28px}}
@media(max-width:900px){.wd-sd-cswatch{aspect-ratio:1/1;height:auto}}
.wd-sd-cswatch:hover{transform:scale(1.1);box-shadow:0 0 0 2px var(--sd-blue),0 4px 12px rgba(0,147,214,.28);z-index:1}
.wd-sd-color-tools{display:flex;gap:7px;width:100%;flex:0 0 auto}
.wd-sd-color-btn{position:relative;flex:1;height:42px;border-radius:10px;border:1.5px dashed var(--sd-line);
	display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--sd-muted);transition:var(--sd-ease)}
.wd-sd-color-btn:hover{border-color:var(--sd-blue);color:var(--sd-blue)}
.wd-sd-color-btn svg{width:20px;height:20px}
.wd-sd-color-btn span{font-size:20px;font-weight:700;line-height:1}
.wd-sd-color-btn input{position:absolute;inset:0;opacity:0;cursor:pointer;border:0;padding:0}
.wd-sd-color-remove{width:100%;padding:4px;border:0;background:none;color:var(--sd-danger);font-size:10.5px;font-weight:650;cursor:pointer;flex:0 0 auto}
.wd-sd-color-remove:hover{text-decoration:underline}

/* ---- Steuer-Elemente (in den Akkordeon-Bodies) ---- */
.wd-sd-w100{width:100%}
.wd-sd-select,.wd-sd-textarea,.wd-sd input[type=number]{width:100%;padding:11px 13px;border:1.5px solid var(--sd-line);
	border-radius:12px;font-size:14px;font-family:inherit;background:#fff;color:var(--sd-ink);transition:var(--sd-ease)}
.wd-sd-select:focus,.wd-sd-textarea:focus,.wd-sd input[type=number]:focus{outline:none;border-color:var(--sd-blue);box-shadow:0 0 0 4px var(--sd-blue-soft)}
.wd-sd-select{cursor:pointer;line-height:1.5;min-height:46px;padding:12px 40px 12px 14px;
	-webkit-appearance:none;-moz-appearance:none;appearance:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
	background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%2379818b' stroke-width='1.7' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat:no-repeat;background-position:right 14px center;background-size:12px 8px}
.wd-sd-textarea{resize:vertical;margin-bottom:12px;line-height:1.5}
.wd-sd-sep{border:0;border-top:1px solid var(--sd-line);margin:14px 0}
.wd-sd-subprops{margin-top:14px}

/* Buttons */
.wd-sd-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
	padding:13px 16px;border:1.5px solid var(--sd-line);border-radius:13px;background:#fff;color:var(--sd-ink);
	font-size:14px;font-weight:650;cursor:pointer;transition:var(--sd-ease);font-family:inherit;text-align:center;margin-bottom:8px}
.wd-sd-btn:hover{border-color:var(--sd-blue);color:var(--sd-blue);transform:translateY(-1px);box-shadow:var(--sd-shadow-sm)}
.wd-sd-primary{background:var(--sd-blue);border:0;color:#fff;box-shadow:0 8px 22px rgba(0,147,214,.30);font-weight:700}
.wd-sd-primary:hover{background:var(--sd-blue-dark);color:#fff;transform:translateY(-1px);box-shadow:0 12px 28px rgba(0,147,214,.42)}
.wd-sd-ghost{color:var(--sd-muted)}
.wd-sd-ghost:hover{color:var(--sd-ink);border-color:#dde1e6;box-shadow:none;transform:none}
.wd-sd-danger{color:var(--sd-muted)}
.wd-sd-danger:hover{border-color:var(--sd-danger);color:var(--sd-danger)}
.wd-sd-topactions .wd-sd-btn{margin-bottom:0}

/* Reihen / Mini-Felder */
.wd-sd-row{display:flex;gap:12px;flex-wrap:wrap}
.wd-sd-mini{display:flex;flex-direction:column;gap:7px;font-size:12px;color:var(--sd-muted);font-weight:650;flex:1;min-width:84px}
.wd-sd-mini-wide{flex:1 0 100%;min-width:100%}
.wd-sd-mini input[type=color]{width:100%;height:42px;padding:3px;border:1.5px solid var(--sd-line);border-radius:11px;cursor:pointer;background:#fff}
.wd-sd-mini input[type=range]{width:100%;accent-color:var(--sd-blue)}
.wd-sd-mini input[type=number]{padding:10px 12px}

/* Formen-Kacheln */
.wd-sd-shapes{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.wd-sd-shape-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
	padding:14px 6px;border:1.5px solid var(--sd-line);border-radius:13px;background:#fff;color:var(--sd-ink);
	cursor:pointer;font-size:11.5px;font-weight:650;font-family:inherit;transition:var(--sd-ease)}
.wd-sd-shape-btn:hover{border-color:var(--sd-blue);color:var(--sd-blue);transform:translateY(-2px);box-shadow:var(--sd-shadow-sm)}
.wd-sd-shape-btn svg{width:28px;height:20px;display:block;color:#9aa2ab;transition:var(--sd-ease)}
.wd-sd-shape-btn:hover svg{color:var(--sd-blue)}
.wd-sd-shape-line{grid-column:1 / -1;flex-direction:row;gap:12px;padding:12px 6px}
.wd-sd-shape-line svg{width:44px;height:9px}

/* Chips (Text-Format) */
.wd-sd-formatrow{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.wd-sd-chip{padding:10px 8px;border:1.5px solid var(--sd-line);border-radius:10px;background:#fff;cursor:pointer;
	font-size:13px;font-weight:650;font-family:inherit;transition:var(--sd-ease);color:var(--sd-ink);text-align:center}
.wd-sd-chip:hover{border-color:var(--sd-blue);color:var(--sd-blue)}
.wd-sd-chip.is-on{background:var(--sd-blue-soft);border-color:var(--sd-blue);color:var(--sd-blue)}

.wd-sd-hint{font-size:12px;color:var(--sd-muted);margin:12px 0 0;line-height:1.5}

/* Add-to-Cart-Zeile (Status + Vorschau) — vom Plugin unter dem Designer gerendert */
.wd-sd-cartline{margin:8px 0 16px;max-width:1160px;width:100%}
.wd-sd-status{font-size:13.5px;font-weight:650;color:var(--sd-muted);padding:13px 16px;border:1.5px dashed var(--sd-line);border-radius:14px;background:#fcfcfd}
.wd-sd-status.is-ok{color:#0a7d33;border-style:solid;border-color:#b8e6c6;background:#f1fbf4}
.wd-sd-thumb{margin-top:12px}
.wd-sd-thumb img{max-width:190px;height:auto;border-radius:12px;box-shadow:var(--sd-shadow)}