/* ====================================================================
   MANUFAKTUR X STUDIO - seller dashboard
   Layered ON TOP of bright.css. Same warm/cream/orange/Archivo register
   as the storefront. No generic admin look.
   ==================================================================== */

/* ---- positive / success palette ----
   Aligned with the partner landing page's teal offer accent (#0f9488) so the
   two seller-facing surfaces feel like one brand. Replaces the earlier green. */
:root{
  --ok:#0f9488;        /* teal - positive accent (was var(--ok)) */
  --ok-ink:#0c6b62;    /* teal text on light (was var(--ok-ink)) */
  --ok-bg:#e6f5f3;     /* soft teal tint (was var(--ok-bg)) */
  --ok-line:#b8e3dd;   /* teal border (was var(--ok-line)) */
}

/* ---- app scaffold ---- */
body{min-height:100vh}
[hidden]{display:none !important}
.studio-main{padding-top:38px; padding-bottom:80px; min-height:60vh}
/* The content column is a FLEX-COLUMN child, and the marketing `.wrap{margin:0 auto}`
   makes a flex item with auto side-margins shrink-wrap to its content (the ~580px
   max-width:64ch intro paragraph) instead of filling - so the whole dashboard rendered
   as a thin centred strip AND grew wider whenever a panel opened. Force a definite
   fill width: it now spans the column, left-aligned with comfortable padding, capped
   at a generous max, and never changes width when a section expands. */
.studio-content>.studio-main.wrap,
.studio-content>.studio-foot .wrap{ width:100%; max-width:1760px; margin:0; box-sizing:border-box }
.studio-content>.studio-main.wrap{ padding-left:44px; padding-right:44px }
@media(max-width:1100px){ .studio-content>.studio-main.wrap{padding-left:22px; padding-right:22px} }
/* Size-control number field: drop the native spinner so "100" isn't clipped. */
.size-num{-moz-appearance:textfield; appearance:textfield}
.size-num::-webkit-inner-spin-button,.size-num::-webkit-outer-spin-button{-webkit-appearance:none; margin:0}
.size-num:focus{outline:2px solid var(--accent); outline-offset:0; border-color:var(--accent)}

/* ==================================================================
   APP SHELL - left vertical sidebar + content column
   (replaced the old cramped top nav bar that truncated long labels
   like "Inställningar" on Swedish/longer-language UIs)
   ================================================================== */
.studio-tag{display:inline-flex; align-items:center; margin-left:12px; padding:4px 10px; border-radius:40px;
  background:var(--accent); color:#fff; font-family:var(--fh); font-weight:800; font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; transform:translateY(-1px)}
.brand-lockup{display:inline-flex; align-items:center; flex:0 0 auto; text-decoration:none}

.studio-shell{display:flex; align-items:flex-start; min-height:100vh}
.studio-content{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; min-height:100vh}

/* ---- sidebar ---- */
.studio-sidebar{flex:0 0 250px; width:250px; position:sticky; top:0; height:100vh; z-index:100;
  display:flex; flex-direction:column; background:var(--surface); border-right:1px solid var(--line)}
.sb-brand{padding:22px 16px 18px; border-bottom:1px solid var(--line); flex:0 0 auto; overflow:hidden}
.sb-brand .brand-lockup{max-width:100%}
.sb-brand .brand{font-size:16px}
.sb-brand .studio-tag{font-size:8.5px; padding:3px 7px; margin-left:8px; letter-spacing:.1em; flex:0 0 auto}
.sb-nav{flex:1 1 auto; overflow-y:auto; padding:16px 14px; scrollbar-width:thin}
.studio-nav{display:flex; flex-direction:column; gap:4px; list-style:none; margin:0; padding:0}
.studio-nav a{display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:var(--r);
  font-family:var(--fh); font-weight:700; font-size:14.5px; letter-spacing:.01em; color:var(--ink);
  text-decoration:none; cursor:pointer; white-space:nowrap; position:relative;
  transition:color .18s, background .18s}
.studio-nav a .nav-ic{width:19px; height:19px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; color:var(--muted); transition:color .18s}
.studio-nav a:hover{background:var(--bg-soft); color:var(--navy)}
.studio-nav a:hover .nav-ic{color:var(--navy)}
.studio-nav a.active{background:#fff7f2; color:var(--accent-ink)}
.studio-nav a.active .nav-ic{color:var(--accent)}
.studio-nav a.active::before{content:""; position:absolute; left:-14px; top:9px; bottom:9px; width:3px;
  border-radius:0 3px 3px 0; background:var(--accent)}
.studio-nav a:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* ---- sidebar footer: language / shop / logout ---- */
.sb-foot{flex:0 0 auto; border-top:1px solid var(--line); padding:16px; display:flex; flex-direction:column; gap:12px}
.sb-foot #hdrLangMount{display:flex}
.shop-pill{display:inline-flex; align-items:center; gap:8px; font-family:var(--fh); font-weight:700; font-size:13px;
  letter-spacing:.02em; color:var(--navy); background:var(--bg-soft); border:1px solid var(--line);
  padding:9px 12px; border-radius:var(--r); white-space:nowrap; max-width:100%}
.shop-pill #shopNameLabel{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.shop-pill .dot{width:7px; height:7px; border-radius:50%; background:var(--ok); flex:0 0 auto}
.sb-logout{width:100%; justify-content:center}

/* ---- mobile top bar + drawer (hidden on desktop) ---- */
.studio-topbar{display:none}
.studio-scrim{display:none}
@media(max-width:980px){
  .studio-topbar{display:flex; align-items:center; gap:14px; position:sticky; top:0; z-index:120;
    background:var(--surface); border-bottom:1px solid var(--line); padding:10px 16px; min-height:60px}
  .studio-burger{width:44px; height:44px; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
    border:1px solid var(--line-strong); border-radius:var(--r); background:var(--surface); color:var(--navy);
    cursor:pointer; transition:border-color .18s, color .18s}
  .studio-burger:hover{border-color:var(--accent); color:var(--accent)}
  .studio-burger:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
  .studio-burger svg{width:22px; height:22px}
  .studio-shell{display:block}
  .studio-sidebar{position:fixed; left:0; top:0; height:100vh; width:min(300px,84vw); flex-basis:auto;
    transform:translateX(-100%); transition:transform .28s ease; box-shadow:var(--shadow-lg); z-index:200}
  .studio-shell.nav-open .studio-sidebar{transform:translateX(0)}
  .studio-content{min-height:auto}
  .studio-scrim{display:block; position:fixed; inset:0; background:rgba(13,27,42,.42); z-index:150;
    opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s}
  .studio-shell.nav-open ~ .studio-scrim{opacity:1; visibility:visible}
}

/* ---- auth screen ---- */
.auth-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:40px 20px;
  background:
    radial-gradient(1200px 520px at 80% -10%, rgba(236,90,28,.06), transparent 60%),
    radial-gradient(900px 480px at -10% 110%, rgba(13,27,42,.05), transparent 60%),
    var(--bg)}
.auth-card{width:100%; max-width:440px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow-lg); padding:44px 40px}
.auth-brand{text-align:center; margin-bottom:26px}
.auth-brand .brand{font-size:30px}
.auth-brand .studio-tag{margin-left:10px}
.auth-trust{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; margin:0 0 24px;
  font-family:var(--fh); font-weight:700; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ok-ink)}
.auth-trust .dot{color:var(--line-strong)}
.auth-card h1{font-family:var(--fh); font-weight:900; font-size:26px; text-transform:uppercase; color:var(--navy);
  letter-spacing:-.01em; margin-bottom:6px; text-align:center}
.auth-sub{color:var(--muted); font-size:14.5px; text-align:center; margin:0 0 28px}
.auth-card .btn{width:100%; justify-content:center; margin-top:6px}
.auth-toggle{text-align:center; margin-top:20px; font-size:14px; color:var(--muted)}
.auth-toggle button{background:none; border:none; cursor:pointer; font-family:var(--fh); font-weight:700;
  color:var(--accent); font-size:14px; padding:0 2px}
.auth-toggle button:hover{color:var(--accent-ink)}
.form-err{background:#fdecec; border:1px solid #f4c7c7; color:#a0281f; border-radius:var(--r);
  padding:10px 14px; font-size:13.5px; margin-bottom:16px}
.form-ok{background:#eef7f0; border:1px solid #cfe8d6; color:#2f7d4f; border-radius:var(--r);
  padding:10px 14px; font-size:13.5px; margin-bottom:16px}
.auth-forgot{text-align:right; margin:-6px 0 16px}
.auth-forgot button{background:none; border:none; cursor:pointer; font-size:13px; color:var(--muted);
  font-family:var(--fb); text-decoration:underline; padding:0}
.auth-forgot button:hover{color:var(--accent-ink)}
/* show-password toggle */
.pw-wrap{position:relative; display:flex}
.pw-wrap input{width:100%; padding-right:46px}
.pw-toggle{position:absolute; top:50%; right:7px; transform:translateY(-50%); display:inline-flex;
  align-items:center; justify-content:center; width:32px; height:32px; border:none; background:none;
  cursor:pointer; color:var(--muted); border-radius:8px; transition:color .15s,background .15s}
.pw-toggle:hover{color:var(--accent); background:var(--bg-soft)}
.pw-toggle:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.pw-toggle .i-eyeoff{display:none}
.pw-toggle.on .i-eye{display:none}
.pw-toggle.on .i-eyeoff{display:inline}

/* ---- page head ---- */
.page-head{margin-bottom:32px}
.page-head .eyebrow{margin-bottom:12px}
.page-head h1{font-family:var(--fh); font-weight:900; font-size:clamp(28px,3.6vw,40px); text-transform:uppercase;
  color:var(--navy); letter-spacing:-.01em}
.page-head p{color:var(--muted); font-size:15.5px; margin:10px 0 0; max-width:64ch}

/* ---- product / catalog grid ---- */
.studio-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:26px}
@media(max-width:520px){ .studio-grid{grid-template-columns:1fr} }

.p-card{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:box-shadow .2s,border-color .2s}
.p-card:hover{box-shadow:var(--shadow); border-color:#efe2cf}
.p-card .media{position:relative; aspect-ratio:4/3; background:radial-gradient(circle at 50% 45%,#fff,#eee9df 82%);
  border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:center; overflow:hidden}
.p-card .media img{width:100%; height:100%; object-fit:cover}
.p-card .media .ph{font-family:var(--fh); font-weight:900; font-size:40px; color:var(--line-strong); letter-spacing:.04em; text-transform:uppercase}
.p-card .tag{position:absolute; top:14px; left:14px; z-index:2; background:var(--accent); color:#fff; font-family:var(--fh);
  font-weight:800; font-size:10px; letter-spacing:.1em; text-transform:uppercase; padding:6px 11px; border-radius:40px}
.p-card .tag.muted{background:var(--navy)}
.p-card .body{padding:22px 22px 24px; display:flex; flex-direction:column; gap:12px; flex:1}
.p-card .cat{font-family:var(--fh); font-weight:700; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent)}
.p-card h3{font-family:var(--fh); font-weight:900; font-size:22px; text-transform:uppercase; color:var(--navy); line-height:1.05}
.p-card .desc{margin:0; color:var(--muted); font-size:13.5px; line-height:1.55}

.buy-row{display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:12px 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.buy-row .lbl{font-size:12px; color:var(--muted); font-family:var(--fh); font-weight:700; letter-spacing:.03em; text-transform:uppercase}
.buy-row .val{font-family:var(--fh); font-weight:900; font-size:18px; color:var(--navy)}
.buy-row .val.na{font-size:13px; font-weight:600; color:var(--muted); text-transform:none; letter-spacing:0}

/* ---- margin control ---- */
.margin-block{display:flex; flex-direction:column; gap:12px}
.margin-block .mlabel{font-family:var(--fh); font-weight:700; font-size:12px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--navy)}
.margin-row{display:flex; gap:10px; align-items:stretch}
.seg{display:inline-flex; flex-wrap:wrap; max-width:100%; background:var(--bg-soft); border:1px solid var(--line-strong); border-radius:var(--r); padding:3px; flex:0 0 auto}
.seg button{border:none; background:none; cursor:pointer; font-family:var(--fh); font-weight:700; font-size:13px;
  padding:8px 14px; border-radius:4px; color:var(--muted); min-width:44px; white-space:nowrap; transition:background .15s,color .15s}
.seg button.on{background:var(--accent); color:#fff; box-shadow:0 1px 2px rgba(27,35,44,.14)}
.margin-input{flex:1; display:flex; align-items:center; background:#fff; border:1px solid var(--line-strong);
  border-radius:var(--r); padding:0 12px; transition:border-color .2s,box-shadow .2s}
.margin-input:focus-within{border-color:var(--accent); box-shadow:0 0 0 3px rgba(236,90,28,.12)}
.margin-input input{flex:1; width:100%; border:none; outline:none; background:none; font-family:var(--fb);
  font-size:15px; color:var(--ink); padding:12px 0}
.margin-input .unit{font-family:var(--fh); font-weight:700; font-size:14px; color:var(--muted); padding-left:6px}

.sell-row{display:flex; align-items:baseline; justify-content:space-between; gap:10px; background:#fff7f2;
  border:1px solid #f6d8c6; border-radius:var(--r); padding:12px 14px}
.sell-row .lbl{font-family:var(--fh); font-weight:700; font-size:12px; letter-spacing:.03em; text-transform:uppercase; color:var(--accent-ink)}
.sell-row .val{font-family:var(--fh); font-weight:900; font-size:22px; color:var(--accent)}

.card-actions{display:flex; gap:10px; align-items:center; margin-top:2px}
.card-actions .btn{flex:1; justify-content:center}
.preview-link{font-family:var(--fh); font-weight:700; font-size:13px; letter-spacing:.03em; text-transform:uppercase;
  color:var(--navy); display:inline-flex; align-items:center; gap:6px; padding:12px 4px; white-space:nowrap}
.preview-link:hover{color:var(--accent)}
.pill-flag{display:inline-flex; align-items:center; gap:6px; font-family:var(--fh); font-weight:800; font-size:11px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ok-ink); background:var(--ok-bg); border:1px solid var(--ok-line);
  padding:8px 12px; border-radius:40px}

/* ---- mine list ---- */
.mine-list{display:flex; flex-direction:column; gap:22px}
.mine-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm); overflow:hidden}
.mine-head{display:flex; align-items:center; gap:16px; padding:20px 24px; border-bottom:1px solid var(--line); flex-wrap:wrap}
.mine-thumb{width:56px; height:56px; border-radius:var(--r); background:radial-gradient(circle at 50% 40%,#fff,#eee9df);
  border:1px solid var(--line); flex:0 0 auto; display:flex; align-items:center; justify-content:center; overflow:hidden}
.mine-thumb img{width:100%; height:100%; object-fit:cover}
.mine-thumb .ph{font-family:var(--fh); font-weight:900; font-size:20px; color:var(--line-strong)}
.mine-head .mh-main{flex:1; min-width:180px}
.mine-head .mh-main h3{font-family:var(--fh); font-weight:900; font-size:20px; text-transform:uppercase; color:var(--navy); line-height:1.1}
.mine-head .mh-main .slug{font-size:12.5px; color:var(--muted); font-family:var(--fb)}
.status-chip{font-family:var(--fh); font-weight:800; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  padding:6px 12px; border-radius:40px}
.status-chip.on{color:var(--ok-ink); background:var(--ok-bg); border:1px solid var(--ok-line)}
.status-chip.off{color:#8a6d1e; background:#fbf3dd; border:1px solid #ecdba6}
.mine-body{padding:22px 24px; display:grid; grid-template-columns:1.7fr 1fr; gap:26px; align-items:start}
@media(max-width:820px){ .mine-body{grid-template-columns:1fr} }
.mine-body .mine-sell{align-self:start}

.price-summary{display:flex; gap:26px; flex-wrap:wrap; margin-bottom:18px}
.price-summary .ps{display:flex; flex-direction:column; gap:2px}
.price-summary .ps .k{font-size:11px; font-family:var(--fh); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.price-summary .ps .v{font-family:var(--fh); font-weight:900; font-size:20px; color:var(--navy)}
.price-summary .ps .v.accent{color:var(--accent)}

.embed-block{display:flex; flex-direction:column; gap:10px}
.embed-block .eh{display:flex; align-items:center; justify-content:space-between; gap:10px}
.embed-block .eh .k{font-family:var(--fh); font-weight:700; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--navy)}
/* Product-scope banner above an embed snippet: makes clear the code is per-product
   and links back to the picker. */
.embed-scope{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 16px;
  background:#fff7f2; border:1px solid #f6d8c6; border-radius:var(--r); padding:10px 14px}
/* Studio integration assistant chat (bottom of the Integration page). */
.mfx-as{margin:44px auto 0; max-width:760px; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); background:var(--surface)}
.mfx-as-head{background:var(--accent); color:#fff; padding:18px 22px}
.mfx-as-brand{display:flex; align-items:center; gap:9px; margin-bottom:12px}
.mfx-as-logo{font-family:var(--fh); font-weight:900; font-size:15px; letter-spacing:.02em; color:#fff; text-transform:uppercase; line-height:1}
.mfx-as-logo .x{font-style:italic}
.mfx-as-tag{font-family:var(--fh); font-weight:800; font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); background:#fff; border-radius:40px; padding:3px 8px; line-height:1}
.mfx-as-h1{font-family:var(--fh); font-weight:800; font-size:16px; letter-spacing:-.01em}
.mfx-as-h2{font-size:12.5px; opacity:.92; margin-top:2px}
.mfx-as-contact{display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:11px}
.mfx-as-c{display:inline-flex; align-items:center; gap:6px; color:#fff; font-family:var(--fb); font-size:12.5px; font-weight:600; text-decoration:none; opacity:.96; border-bottom:1px solid rgba(255,255,255,.45); padding-bottom:1px}
.mfx-as-c:hover{opacity:1; border-bottom-color:#fff}
.mfx-as-ci{display:inline-flex; align-items:center}
.mfx-as-person{font-family:var(--fb); font-size:11.5px; opacity:.85; margin-top:7px}
.mfx-as-msgs{padding:18px 18px 8px; min-height:170px; max-height:380px; overflow-y:auto; display:flex; flex-direction:column; gap:10px}
.mfx-as-b{max-width:84%; padding:10px 14px; border-radius:14px; font-family:var(--fb); font-size:14px; line-height:1.5}
.mfx-as-b.ai{background:var(--bg-soft); color:var(--ink); align-self:flex-start; border-bottom-left-radius:4px}
.mfx-as-b.me{background:var(--accent); color:#fff; align-self:flex-end; border-bottom-right-radius:4px}
.mfx-as-b.typing{opacity:.55; letter-spacing:3px}
.mfx-as-chips{display:flex; flex-wrap:wrap; gap:8px; padding:4px 18px 14px}
.mfx-as-chip{font-family:var(--fb); font-size:12.5px; color:var(--navy); background:#fff; border:1.5px solid var(--line-strong); border-radius:40px; padding:8px 14px; cursor:pointer; transition:border-color .15s,color .15s; text-align:left}
.mfx-as-chip:hover{border-color:var(--accent); color:var(--accent)}
.mfx-as-bar{display:flex; gap:10px; padding:12px 16px; border-top:1px solid var(--line)}
.mfx-as-inp{flex:1 1 auto; min-width:0; border:1.5px solid var(--line-strong); border-radius:40px; padding:11px 16px; font-family:var(--fb); font-size:14px; color:var(--ink); background:#fff; outline:none; transition:border-color .15s}
.mfx-as-inp:focus{border-color:var(--accent)}
.mfx-as-send{flex:0 0 auto; background:var(--accent); color:#fff; border:none; border-radius:40px; padding:11px 22px; font-family:var(--fh); font-weight:700; font-size:13.5px; cursor:pointer; transition:background .15s}
.mfx-as-send:hover:not(:disabled){background:var(--accent-hover,#d24e12)}
.mfx-as-send:disabled{opacity:.6; cursor:default}

/* "Need help with the integration?" contact band at the top of the Integration page. */
.ig-contact{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px;
  background:#fff7f2; border:1px solid #f6d8c6; border-radius:var(--r-lg); padding:16px 22px; margin-bottom:22px}
.ig-contact-t{display:flex; flex-direction:column; gap:2px; min-width:0}
.ig-contact-t strong{font-family:var(--fh); font-weight:800; font-size:15px; color:var(--navy)}
.ig-contact-right{display:flex; flex-direction:column; align-items:flex-end; gap:7px; flex:0 0 auto}
.ig-contact-actions{display:flex; flex-wrap:wrap; gap:10px; flex:0 0 auto}
.ig-contact-person{font-family:var(--fb); font-size:12px; color:var(--muted)}
@media(max-width:640px){ .ig-contact-right{align-items:flex-start} }
.ig-contact-actions .btn{display:inline-flex; align-items:center; gap:7px}
.ig-contact-ic{display:inline-flex; align-items:center}
.embed-scope-t{font-size:13.5px; font-weight:600; color:var(--ink)}
.embed-scope-select{flex:0 1 auto; max-width:260px; min-width:150px; height:auto; padding:7px 30px 7px 12px;
  font-family:var(--fb); font-size:13.5px; font-weight:700; color:var(--navy); background-color:#fff;
  border:1.5px solid var(--accent); border-radius:8px; cursor:pointer}
.embed-scope-select:focus{outline:2px solid var(--accent-2); outline-offset:1px}
/* Flash the product picker when the seller clicks "Anderes Produkt wählen". */
.inst-preview.flash{box-shadow:0 0 0 3px var(--accent), var(--shadow-sm); border-color:var(--accent); transition:box-shadow .2s,border-color .2s}
.code-box{position:relative; background:var(--navy); color:#e9edf2; border-radius:var(--r-lg); padding:16px 18px;
  font-family:'SFMono-Regular',ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; line-height:1.6;
  overflow:auto; white-space:pre; border:1px solid #1c3450}
.code-box .tk-tag{color:#7fb2ff}
.code-box .tk-attr{color:#ffb27f}
.code-box .tk-str{color:#a5e2a5}
.copy-btn{font-family:var(--fh); font-weight:700; font-size:12px; letter-spacing:.04em; text-transform:uppercase;
  cursor:pointer; border:1.5px solid var(--line-strong); background:#fff; color:var(--navy); padding:8px 14px;
  border-radius:var(--r); transition:all .15s; display:inline-flex; align-items:center; gap:6px}
.copy-btn:hover{border-color:var(--accent); color:var(--accent)}
.copy-btn.done{border-color:var(--ok); color:var(--ok-ink); background:var(--ok-bg)}

/* ---- edit margin inline (mine) ---- */
.mine-edit{display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; margin-top:14px}
.mine-edit .fld{display:flex; flex-direction:column; gap:6px}
.mine-edit .fld .k{font-size:11px; font-family:var(--fh); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted)}

/* ---- api keys ---- */
.key-list{display:flex; flex-direction:column; gap:14px; margin-top:8px}
.key-row{display:flex; align-items:center; gap:16px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow-sm); padding:18px 22px; flex-wrap:wrap}
.key-row .kicon{width:42px; height:42px; border-radius:var(--r); background:var(--bg-soft); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--accent); flex:0 0 auto}
.key-row .kmain{flex:1; min-width:160px}
.key-row .klabel{font-family:var(--fh); font-weight:800; font-size:15px; color:var(--navy)}
.key-row .kprefix{font-family:ui-monospace,Menlo,monospace; font-size:13px; color:var(--muted); margin-top:2px}
.key-row .kmeta{font-size:12px; color:var(--muted); font-family:var(--fb); text-align:right}
.icon-btn{border:1.5px solid var(--line-strong); background:#fff; color:var(--muted); width:38px; height:38px;
  border-radius:var(--r); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s}
.icon-btn:hover{border-color:#e0a; border-color:#d9534f; color:#d9534f}
.icon-btn svg{width:17px; height:17px}

.key-reveal{background:#fff7f2; border:1px solid #f6d8c6; border-radius:var(--r-lg); padding:20px 22px; margin-bottom:22px}
.key-reveal h4{font-family:var(--fh); font-weight:800; font-size:14px; text-transform:uppercase; color:var(--accent-ink); letter-spacing:.04em; margin-bottom:8px}
.key-reveal p{font-size:13px; color:var(--muted); margin:0 0 12px}
.key-reveal .keyfield{display:flex; gap:10px; align-items:stretch}
.key-reveal code{flex:1; background:var(--navy); color:#a5e2a5; font-family:ui-monospace,Menlo,monospace; font-size:13.5px;
  padding:12px 14px; border-radius:var(--r); overflow:auto; white-space:nowrap}

/* ---- states ---- */
.state{text-align:center; padding:70px 20px; color:var(--muted)}
.state h3{font-family:var(--fh); font-weight:800; font-size:20px; text-transform:uppercase; color:var(--navy); margin-bottom:8px}
.state p{margin:0 auto; max-width:46ch; font-size:15px}
.state .btn{margin-top:20px}
.skeleton-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:26px}
.sk{height:360px; border-radius:var(--r-lg); border:1px solid var(--line); background:
  linear-gradient(100deg,var(--surface) 30%,#f4efe5 50%,var(--surface) 70%); background-size:200% 100%;
  animation:sk 1.3s ease-in-out infinite}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ---- toasts ---- */
.toast-stack{position:fixed; right:20px; bottom:20px; z-index:400; display:flex; flex-direction:column; gap:10px; max-width:360px}
.toast{background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--accent);
  box-shadow:var(--shadow-lg); border-radius:var(--r); padding:14px 18px; font-size:14px; color:var(--ink);
  font-family:var(--fb); animation:toast-in .22s ease; display:flex; gap:10px; align-items:flex-start}
.toast.ok{border-left-color:var(--ok)}
.toast.err{border-left-color:#d9534f}
.toast strong{font-family:var(--fh); display:block; font-size:13px; letter-spacing:.02em}
@keyframes toast-in{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:translateY(0)}}

/* ---- design section ---- */
.design-wrap{display:grid; grid-template-columns:minmax(320px,420px) 1fr; gap:24px; align-items:start}
@media(max-width:900px){ .design-wrap{grid-template-columns:1fr} }
.ds-form{display:flex; flex-direction:column; gap:22px}
.ds-section{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm); padding:20px 22px}
.ds-h{font-family:var(--fh); font-weight:800; font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent); margin-bottom:16px}
.ds-field{display:flex; flex-direction:column; gap:7px; margin-bottom:16px}
.ds-field:last-child{margin-bottom:0}
.ds-label{font-family:var(--fh); font-weight:700; font-size:12px; letter-spacing:.03em; text-transform:uppercase; color:var(--navy)}
.ds-input,.ds-select{width:100%; border:1px solid var(--line-strong); border-radius:var(--r); background:#fff;
  font-family:var(--fb); font-size:14.5px; color:var(--ink); padding:11px 12px; outline:none; transition:border-color .2s,box-shadow .2s}
.ds-input:focus,.ds-select:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(236,90,28,.12)}
.ds-input-row{display:flex; gap:8px; align-items:stretch}
.ds-input-row .ds-input{flex:1}
.ds-reset{flex:0 0 auto; border:1.5px solid var(--line-strong); background:#fff; color:var(--muted); cursor:pointer;
  font-family:var(--fh); font-weight:700; font-size:11px; letter-spacing:.03em; text-transform:uppercase;
  padding:0 12px; border-radius:var(--r); transition:all .15s; white-space:nowrap}
.ds-reset:hover{border-color:var(--accent); color:var(--accent)}
.ds-colors{display:flex; gap:14px}
.ds-swatch{flex:1; display:flex; flex-direction:column; gap:7px}
.ds-swatch input[type=color]{width:100%; height:44px; border:1px solid var(--line-strong); border-radius:var(--r);
  background:#fff; cursor:pointer; padding:4px}
.ds-params{display:flex; flex-direction:column; gap:12px}
/* per-product "Texte & Namen" panel body (Produkte view) */
.ds-pc{display:flex; flex-direction:column; gap:2px}
.ds-pc-params{margin-top:6px; padding-top:16px; border-top:1px solid var(--line)}
.ds-pc-save{display:flex; justify-content:flex-end; margin-top:16px}
/* Parameter-Namen rows in 2 columns so a long parameter list (Türart, Anzahl,
   Richtung, Öffnungswinkel, ...) doesn't run far down the page. One column on
   narrow screens where the input + Zurücksetzen/Ausblenden buttons need the width. */
.ds-params{display:grid; grid-template-columns:1fr 1fr; gap:16px 22px}
@media(max-width:760px){ .ds-params{grid-template-columns:1fr} }
.ds-param-row{display:flex; flex-direction:column; gap:6px; min-width:0}
.ds-plabel{font-family:var(--fh); font-weight:700; font-size:11.5px; letter-spacing:.02em; color:var(--muted)}
.ds-hint{font-size:12.5px; color:var(--muted); font-family:var(--fb)}
.ds-logo-preview{max-width:160px; max-height:64px; object-fit:contain; border:1px solid var(--line);
  border-radius:var(--r); background:#fff; padding:6px; margin-bottom:12px; display:none}
.ds-file{font-family:var(--fb); font-size:13px; color:var(--muted); margin-top:2px}
.ds-savebar{position:sticky; bottom:16px; display:flex}
.ds-savebar .btn{width:100%; justify-content:center}
.ds-preview{position:sticky; top:20px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow-sm); overflow:hidden}
.ds-preview .ds-cap{font-family:var(--fh); font-weight:700; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); padding:12px 16px; border-bottom:1px solid var(--line)}
.ds-frame{width:100%; height:640px; border:none; display:block; background:#fff}
@media(max-width:900px){ .ds-preview{position:static} .ds-frame{height:460px} }

/* ---- shop settings ---- */
.shop-form{display:flex; flex-direction:column; gap:22px; max-width:960px}
.shop-form .seg{flex-wrap:wrap}
.shop-mode-desc{margin-top:10px; font-size:13px; color:var(--muted); font-family:var(--fb)}
.seg-btn{border:none; background:none; cursor:pointer; font-family:var(--fh); font-weight:700; font-size:12px;
  padding:8px 12px; border-radius:4px; color:var(--muted); transition:background .15s,color .15s}
.seg-btn.on{background:var(--accent); color:#fff; box-shadow:0 1px 2px rgba(27,35,44,.14)}
.shop-form .ds-section{margin:0}
.shop-form .ds-h{margin:0 0 16px}

/* checkout-mode selectable option cards (replaces the cramped wrapping
   segmented control - long labels + inline description read cleanly) */
.opt-cards{display:flex; flex-direction:column; gap:10px}
.opt-card{display:flex; gap:13px; align-items:flex-start; width:100%; text-align:left;
  padding:14px 16px; border:1.5px solid var(--line-strong); border-radius:var(--r); background:#fff;
  cursor:pointer; transition:border-color .18s, background .18s, box-shadow .18s}
.opt-card:hover{border-color:var(--accent)}
.opt-card.on{border-color:var(--accent); background:#fff7f2; box-shadow:0 0 0 3px rgba(236,90,28,.10)}
.opt-card:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.opt-radio{flex:0 0 auto; width:19px; height:19px; margin-top:1px; border-radius:50%;
  border:2px solid var(--line-strong); background:#fff; position:relative; transition:border-color .18s}
.opt-card.on .opt-radio{border-color:var(--accent)}
.opt-card.on .opt-radio::after{content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:9px; height:9px; border-radius:50%; background:var(--accent)}
.opt-body{display:flex; flex-direction:column; gap:3px; min-width:0}
.opt-title{font-family:var(--fh); font-weight:800; font-size:14px; letter-spacing:.01em; color:var(--navy)}
.opt-card.on .opt-title{color:var(--accent-ink)}
.opt-desc{font-family:var(--fb); font-size:13px; line-height:1.5; color:var(--muted)}

/* ---- installation guide ---- */
.install-panel{display:flex; flex-direction:column; gap:16px}
.install-tabs{display:flex; gap:0; border-bottom:2px solid var(--line); margin-bottom:4px; flex-wrap:wrap}
.install-tab-btn{background:none; border:none; border-bottom:2px solid transparent; margin-bottom:-2px; cursor:pointer;
  font-family:var(--fh); font-weight:700; font-size:13.5px; padding:10px 18px; color:var(--muted);
  transition:color .15s, border-color .15s}
.install-tab-btn:hover{color:var(--accent)}
.install-tab-btn.on{color:var(--accent); border-bottom-color:var(--accent)}
.install-note{color:var(--muted); font-size:13px; margin:0; font-family:var(--fb)}
.pi-savebar{display:flex; align-items:center; gap:14px; margin-top:4px}
.install-mode{width:max-content}
.api-panel{display:flex; flex-direction:column; gap:16px}
.api-keys-hint{display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--r); padding:12px 16px}
.api-keys-link{background:none; border:none; cursor:pointer; font-family:var(--fh); font-weight:700;
  font-size:12.5px; letter-spacing:.03em; text-transform:uppercase; color:var(--accent); padding:0}
.api-keys-link:hover{color:var(--accent-ink)}

/* ---- bestellungen ---- */
.stat-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:18px; margin-bottom:28px}
.stat-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm); padding:20px 22px; display:flex; flex-direction:column; gap:6px}
.stat-card.accent{border-color:#f6d8c6; background:#fff7f2}
.stat-label{font-family:var(--fh); font-weight:700; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.stat-value{font-family:var(--fh); font-weight:900; font-size:26px; color:var(--navy)}
.stat-card.accent .stat-value{color:var(--accent)}
.orders-wrap{overflow-x:auto}
.orders-table{width:100%; border-collapse:collapse; font-size:14px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); overflow:hidden}
.orders-table th{font-family:var(--fh); font-weight:700; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); padding:12px 16px; text-align:left; border-bottom:1px solid var(--line);
  white-space:nowrap; background:var(--bg-soft)}
.orders-table td{padding:14px 16px; border-bottom:1px solid var(--line); color:var(--ink); font-family:var(--fb); vertical-align:middle}
.orders-table tr:last-child td{border-bottom:none}
.orders-table tr:hover td{background:var(--bg-soft)}
.margin-cell{font-family:var(--fh); font-weight:800; color:var(--ok-ink)}

/* ====================================================================
   BESTELLUNG ERFASSEN (M4 - in-store manual order wizard)
   ==================================================================== */
.mo-wrap{display:flex; flex-direction:column; gap:24px}
.nav-with-icon{display:inline-flex; align-items:center; gap:7px}
.nav-with-icon svg{width:16px; height:16px; flex:0 0 auto}
.studio-nav a.nav-with-icon::after{display:none}

/* stepper */
.mo-steps{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.mo-step{display:inline-flex; align-items:center; gap:10px; padding:8px 16px 8px 8px; border-radius:40px;
  border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow-sm)}
.mo-step-num{width:26px; height:26px; flex:0 0 auto; border-radius:50%; display:inline-flex; align-items:center;
  justify-content:center; font-family:var(--fh); font-weight:800; font-size:13px; background:var(--bg-soft);
  color:var(--muted); border:1px solid var(--line-strong)}
.mo-step-label{font-family:var(--fh); font-weight:700; font-size:12.5px; letter-spacing:.03em;
  text-transform:uppercase; color:var(--muted)}
.mo-step.on{border-color:#f6d8c6; background:#fff7f2}
.mo-step.on .mo-step-num{background:var(--accent); color:#fff; border-color:var(--accent)}
.mo-step.on .mo-step-label{color:var(--accent-ink)}
.mo-step.done .mo-step-num{background:var(--ok-bg); color:var(--ok-ink); border-color:var(--ok-line)}
.mo-step.done .mo-step-label{color:var(--navy)}
@media(max-width:560px){ .mo-step-label{display:none} .mo-step{padding:6px} }

.mo-actions{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:20px}
.mo-actions .btn-back{background:none; color:var(--muted); border:1.5px solid var(--line-strong)}
.mo-actions .btn-back:hover{border-color:var(--accent); color:var(--accent)}

/* configurator step */
.mo-config-grid{display:grid; grid-template-columns:1fr minmax(240px,300px); gap:22px; align-items:start}
@media(max-width:820px){ .mo-config-grid{grid-template-columns:1fr} }
.mo-viewer{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.mo-viewer .ds-cap{font-family:var(--fh); font-weight:700; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); padding:12px 16px; border-bottom:1px solid var(--line)}
.mo-frame{width:100%; height:560px; border:none; display:block; background:#fff}
@media(max-width:820px){ .mo-frame{height:440px} }
.mo-price-card{position:sticky; top:20px; background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow); padding:22px 24px}
@media(max-width:820px){ .mo-price-card{position:static} }
.mo-price-cap{font-family:var(--fh); font-weight:700; font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.82)}
.mo-price-value{font-family:var(--fh); font-weight:900; font-size:34px; line-height:1.05; margin-top:10px;
  font-variant-numeric:tabular-nums}
.mo-price-hint{font-family:var(--fb); font-size:12.5px; color:rgba(255,255,255,.85); margin-top:8px; line-height:1.5}
.mo-profit{margin-top:16px; background:#fff; border-radius:12px; padding:12px 16px; box-shadow:0 4px 14px rgba(0,0,0,.12)}
.mo-profit-cap{font-family:var(--fh); font-weight:700; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#2f7d4f}
.mo-profit-val{font-family:var(--fh); font-weight:900; font-size:30px; line-height:1.05; margin-top:4px; color:#2f7d4f; font-variant-numeric:tabular-nums}

/* customer form */
.mo-panel{display:flex; flex-direction:column; gap:22px}
.mo-grid-2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media(max-width:520px){ .mo-grid-2{grid-template-columns:1fr} }
.ds-input.invalid,.ds-select.invalid{border-color:#d9534f; box-shadow:0 0 0 3px rgba(217,83,79,.12)}
.mo-note{resize:vertical; min-height:72px; font-family:var(--fb); line-height:1.5}
.mo-check{display:flex; align-items:center; gap:10px; margin-top:16px; cursor:pointer;
  font-family:var(--fh); font-weight:700; font-size:13px; color:var(--navy)}
.mo-check input{width:18px; height:18px; accent-color:var(--accent); cursor:pointer}
.mo-billing{margin-top:16px; padding-top:16px; border-top:1px solid var(--line)}

/* success */
.mo-success{text-align:center}
.mo-success-check{width:56px; height:56px; margin:0 auto 16px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; background:var(--ok-bg); color:var(--ok-ink); border:1px solid var(--ok-line)}
.mo-success-check svg{width:28px; height:28px}
.mo-success-h{font-family:var(--fh); font-weight:900; font-size:22px; text-transform:uppercase; color:var(--navy); margin-bottom:6px}
.mo-success-rows{display:flex; flex-direction:column; gap:2px; max-width:440px; margin:0 auto 8px; text-align:left}
.mo-sr{display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:11px 2px; border-bottom:1px solid var(--line)}
.mo-sr:last-child{border-bottom:none}
.mo-sr .k{font-family:var(--fh); font-weight:700; font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted)}
.mo-sr .v{font-family:var(--fh); font-weight:800; font-size:16px; color:var(--navy); font-variant-numeric:tabular-nums}
.mo-sr .v.accent{color:var(--accent)}
.mo-sr .v.margin{color:var(--ok-ink)}
.mo-success .mo-actions{justify-content:center}

/* ====================================================================
   ADVANCED PRICING PANEL ("Erweitert") - Studio M2
   Collapsible, full-width, sits below the simple markup control.
   ==================================================================== */
.adv-panel{border-top:1px solid var(--line); background:linear-gradient(180deg,#fcfaf5,var(--surface))}

/* disclosure header */
.adv-toggle{width:100%; display:flex; align-items:center; gap:14px; background:none; border:none; cursor:pointer;
  padding:16px 24px; text-align:left; font-family:var(--fh); color:var(--navy); transition:background .18s}
.adv-toggle:hover{background:rgba(236,90,28,.04)}
.adv-toggle .adv-badge{display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px;
  border-radius:8px; background:#fff2ea; border:1px solid #f6d8c6; color:var(--accent); flex:0 0 auto}
.adv-toggle .adv-badge svg{width:16px; height:16px}
.adv-toggle .adv-tt{flex:1; min-width:0}
.adv-toggle .adv-tt .t{font-weight:800; font-size:13.5px; letter-spacing:.05em; text-transform:uppercase; display:block}
.adv-toggle .adv-tt .s{font-family:var(--fb); font-weight:400; font-size:12.5px; letter-spacing:0; text-transform:none;
  color:var(--muted); display:block; margin-top:2px}
.adv-toggle .adv-state{font-family:var(--fh); font-weight:800; font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ok-ink); background:var(--ok-bg); border:1px solid var(--ok-line); padding:4px 10px; border-radius:40px; flex:0 0 auto}
.adv-toggle .adv-state.off{color:var(--muted); background:var(--bg-soft); border-color:var(--line-strong)}
.adv-toggle .chev{flex:0 0 auto; width:20px; height:20px; color:var(--muted); transition:transform .28s cubic-bezier(.4,0,.2,1)}
.adv-toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
.adv-toggle:focus-visible{outline:3px solid var(--accent-2); outline-offset:-3px; border-radius:4px}

/* expandable region (grid-rows trick, animates cleanly) */
.adv-body{display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1)}
.adv-body.open{grid-template-rows:1fr}
.adv-body > .adv-clip{overflow:hidden; min-height:0}
.adv-inner{padding:8px 24px 26px}
.adv-cols{display:grid; grid-template-columns:1.35fr .95fr; gap:26px; align-items:start}
@media(max-width:820px){ .adv-cols{grid-template-columns:1fr; gap:20px} }

/* sub-section heading */
.adv-sub{font-family:var(--fh); font-weight:800; font-size:11px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--navy); margin:0 0 12px; display:flex; align-items:center; gap:8px}
.adv-sub .hint{font-weight:500; letter-spacing:0; text-transform:none; color:var(--muted); font-size:12px; font-family:var(--fb)}
.adv-block{margin-bottom:24px}
.adv-block:last-child{margin-bottom:0}

/* surcharge table */
.sur-list{display:flex; flex-direction:column; gap:10px}
.sur-row{display:grid; grid-template-columns:1.2fr 1fr auto auto; gap:8px; align-items:center;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r); padding:8px 8px 8px 10px;
  animation:sur-in .22s cubic-bezier(.4,0,.2,1)}
@keyframes sur-in{from{opacity:0; transform:translateY(-4px)}to{opacity:1; transform:translateY(0)}}
@media(max-width:520px){ .sur-row{grid-template-columns:1fr 1fr; grid-auto-flow:row} .sur-row .sur-rm{grid-column:2; justify-self:end} }
.sur-sel{width:100%; border:1px solid var(--line-strong); border-radius:5px; background:#fff; font-family:var(--fb);
  font-size:13.5px; color:var(--ink); padding:9px 10px; outline:none; transition:border-color .18s,box-shadow .18s; min-height:40px}
.sur-sel:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(236,90,28,.12)}
.sur-amt{display:flex; align-items:center; background:#fff; border:1px solid var(--line-strong); border-radius:5px;
  padding:0 10px; transition:border-color .18s,box-shadow .18s; min-height:40px}
.sur-amt:focus-within{border-color:var(--accent); box-shadow:0 0 0 3px rgba(236,90,28,.12)}
.sur-amt input{width:74px; border:none; outline:none; background:none; font-family:var(--fb); font-size:14px; color:var(--ink); padding:8px 0; text-align:right}
.sur-amt .u{font-family:var(--fh); font-weight:700; font-size:12px; color:var(--muted); padding-left:4px; white-space:nowrap}
.sur-rm{width:40px; height:40px; flex:0 0 auto; border:1px solid var(--line-strong); background:#fff; color:var(--muted);
  border-radius:5px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s}
.sur-rm:hover{border-color:#d9534f; color:#d9534f; background:#fdf0ef}
.sur-rm svg{width:16px; height:16px}
.sur-empty{font-family:var(--fb); font-size:13px; color:var(--muted); background:var(--bg-soft);
  border:1px dashed var(--line-strong); border-radius:var(--r); padding:14px 16px; text-align:center}
.adv-add{margin-top:12px; display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-family:var(--fh);
  font-weight:700; font-size:12.5px; letter-spacing:.03em; text-transform:uppercase; color:var(--accent);
  background:#fff; border:1.5px dashed #f0b998; border-radius:var(--r); padding:10px 16px; transition:all .16s}
.adv-add:hover{border-color:var(--accent); background:#fff7f2; border-style:solid}
.adv-add svg{width:15px; height:15px}
.adv-add:disabled{opacity:.5; cursor:not-allowed}

/* rounding + min row */
.adv-line{display:flex; flex-wrap:wrap; gap:22px}
.adv-fld{display:flex; flex-direction:column; gap:8px}
.adv-fld > label{font-family:var(--fh); font-weight:700; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted)}
.round-seg{display:inline-flex; background:var(--bg-soft); border:1px solid var(--line-strong); border-radius:var(--r); padding:3px; width:max-content}
.round-seg button{border:none; background:none; cursor:pointer; font-family:var(--fh); font-weight:700; font-size:12.5px;
  padding:9px 15px; border-radius:4px; color:var(--muted); min-height:40px; transition:background .15s,color .15s}
.round-seg button.on{background:var(--accent); color:#fff; box-shadow:0 1px 2px rgba(27,35,44,.14)}
.round-seg button:focus-visible{outline:2px solid var(--accent-2); outline-offset:1px}
.min-field{display:flex; align-items:center; background:#fff; border:1px solid var(--line-strong); border-radius:var(--r);
  padding:0 12px; min-height:42px; transition:border-color .18s,box-shadow .18s; max-width:180px}
.min-field:focus-within{border-color:var(--accent); box-shadow:0 0 0 3px rgba(236,90,28,.12)}
.min-field input{width:100%; border:none; outline:none; background:none; font-family:var(--fb); font-size:15px; color:var(--ink); padding:9px 0}
.min-field .u{font-family:var(--fh); font-weight:700; font-size:13px; color:var(--muted); padding-left:6px}

/* live breakdown card */
.bd-card{position:sticky; top:20px; background:var(--navy); color:#eef2f7; border-radius:var(--r-lg);
  box-shadow:var(--shadow); overflow:hidden}
.bd-card .bd-cap{font-family:var(--fh); font-weight:700; font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted-light); padding:14px 20px 12px; border-bottom:1px solid rgba(255,255,255,.08)}
.bd-rows{padding:8px 20px 6px}
.bd-row{display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:8px 0; font-family:var(--fb)}
.bd-row .k{font-size:13px; color:#c3ccd6}
.bd-row .k .op{display:inline-block; width:14px; color:var(--accent-2); font-family:var(--fh); font-weight:800}
.bd-row .v{font-family:var(--fh); font-weight:700; font-size:14.5px; color:#fff; font-variant-numeric:tabular-nums}
.bd-row.sub .k{color:#9aa6b2; font-size:12.5px}
.bd-row.sub .v{color:#c3ccd6; font-weight:600}
.bd-div{height:1px; background:rgba(255,255,255,.1); margin:4px 0}
.bd-total{display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:16px 20px; background:linear-gradient(135deg,var(--accent),var(--accent-2)); margin-top:6px}
.bd-total .k{font-family:var(--fh); font-weight:800; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#fff}
.bd-total .v{font-family:var(--fh); font-weight:900; font-size:26px; color:#fff; font-variant-numeric:tabular-nums; line-height:1}
.bd-note{padding:0 20px 16px; font-family:var(--fb); font-size:11.5px; color:var(--muted-light); line-height:1.5}
.bd-card.stale{opacity:.72; transition:opacity .2s}
@media(max-width:820px){ .bd-card{position:static} }
.adv-savebar{display:flex; gap:12px; align-items:center; margin-top:22px; padding-top:20px; border-top:1px solid var(--line)}
.adv-savebar .muted{font-family:var(--fb); font-size:12.5px; color:var(--muted)}

@media(prefers-reduced-motion:reduce){
  .adv-body,.chev,.sur-row,.adv-toggle{transition:none; animation:none}
}

/* ---- footer strip ---- */
.studio-foot{border-top:1px solid var(--line); padding:26px 0; color:var(--muted); font-size:13px; background:var(--surface)}
.studio-foot .wrap{display:flex; align-items:flex-end; justify-content:space-between; gap:18px 40px; flex-wrap:wrap}
.foot-left{display:flex; flex-direction:column; gap:4px}
.foot-sub{font-family:var(--fb); font-size:12.5px; color:var(--muted)}
.foot-right{display:flex; flex-direction:column; align-items:flex-end; gap:6px; text-align:right}
.foot-help{font-family:var(--fb); font-size:12.5px; color:var(--muted)}
.foot-contact{display:inline-flex; gap:10px 20px; flex-wrap:wrap; justify-content:flex-end}
.foot-contact a{display:inline-flex; align-items:center; gap:7px; color:var(--ink); text-decoration:none; font-family:var(--fb); font-size:13.5px; font-weight:600; transition:color .15s}
.foot-contact a:hover{color:var(--accent)}
.foot-contact a svg{color:var(--accent)}
.foot-person{font-family:var(--fb); font-size:12px; color:var(--muted)}
@media(max-width:640px){ .studio-foot .wrap{align-items:flex-start} .foot-right{align-items:flex-start; text-align:left} .foot-contact{justify-content:flex-start} }
.studio-foot .brand{font-size:18px}

/* ====================================================================
   LANGUAGE PICKER - compact pill dropdown (matches the storefront bar)
   Placements: top-right of the auth card + in the app header.
   ==================================================================== */
.lang-picker{position:relative; display:inline-flex; font-family:var(--fb)}
.lang-trigger{display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 12px;
  background:var(--bg-soft); border:1px solid var(--line); border-radius:40px; cursor:pointer;
  font-family:var(--fh); font-weight:700; font-size:12.5px; letter-spacing:.03em; color:var(--navy);
  transition:border-color .2s, background .2s, box-shadow .2s}
.lang-trigger:hover{border-color:#e2d3bd; background:var(--surface)}
.lang-trigger:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.lang-trigger .lp-globe{width:16px; height:16px; color:var(--accent); flex:none}
.lang-trigger .lp-flag{font-size:14px; line-height:1}
.lang-trigger .lp-code{color:var(--navy)}
.lang-trigger .lp-chev{width:14px; height:14px; color:var(--muted); transition:transform .2s}
.lang-picker[data-open="true"] .lang-trigger{border-color:var(--accent); background:var(--surface)}
.lang-picker[data-open="true"] .lp-chev{transform:rotate(180deg)}

.lang-menu{position:absolute; top:calc(100% + 8px); right:0; z-index:60; min-width:186px; margin:0; padding:6px;
  list-style:none; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg); max-height:340px; overflow-y:auto;
  opacity:0; transform:translateY(-6px) scale(.98); transform-origin:top right; pointer-events:none;
  transition:opacity .16s ease, transform .16s ease}
.lang-picker[data-open="true"] .lang-menu{opacity:1; transform:translateY(0) scale(1); pointer-events:auto}
.lang-menu li{display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:var(--r);
  cursor:pointer; font-size:14px; font-weight:600; color:var(--ink); line-height:1;
  transition:background .15s, color .15s}
.lang-menu li .lp-flag{font-size:17px; line-height:1; flex:none}
.lang-menu li .lp-name{flex:1}
.lang-menu li .lp-tickwrap{width:16px; height:16px; flex:none; color:var(--accent); opacity:0}
.lang-menu li .lp-tick{width:16px; height:16px}
.lang-menu li:hover{background:var(--bg-soft); color:var(--navy)}
.lang-menu li:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.lang-menu li.on{color:var(--accent)}
.lang-menu li.on .lp-tickwrap{opacity:1}

/* auth-card placement: pinned to the top-right corner of the card */
.auth-card{position:relative}
.auth-lang-mount{position:absolute; top:16px; right:16px; z-index:5}
@media(max-width:480px){
  .auth-card{padding-top:60px}
  .auth-lang-mount{top:14px; right:14px}
}
/* language picker in the sidebar footer: full-width trigger, and the menu
   opens UPWARD so it is never clipped by the bottom of the viewport */
.sb-foot .lang-picker{display:flex; width:100%}
.sb-foot .lang-trigger{width:100%; justify-content:flex-start; height:40px}
.sb-foot .lang-trigger .lp-chev{margin-left:auto}
.sb-foot .lang-menu{top:auto; bottom:calc(100% + 8px); left:0; right:auto; width:100%}
@media(max-width:620px){
  .lang-menu{right:0}
}

/* ====================================================================
   UX OVERHAUL - onboarding strip, per-product install preview, pricing help
   ==================================================================== */

/* ---- getting-started orientation strip (catalogue) ---- */
.gs-strip{background:linear-gradient(135deg,#fff7f2,var(--surface)); border:1px solid #f6d8c6;
  border-radius:var(--r-lg); box-shadow:var(--shadow-sm); padding:22px 24px 24px; margin-bottom:30px}
.gs-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px}
.gs-eyebrow{font-family:var(--fh); font-weight:700; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent)}
.gs-h{font-family:var(--fh); font-weight:900; font-size:clamp(19px,2.2vw,24px); text-transform:uppercase; color:var(--navy); margin-top:6px}
.gs-dismiss{background:none; border:1px solid var(--line-strong); border-radius:40px; cursor:pointer; flex:0 0 auto;
  font-family:var(--fh); font-weight:700; font-size:11px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--muted); padding:7px 14px; transition:color .15s,border-color .15s,background .15s}
.gs-dismiss:hover{color:var(--accent); border-color:var(--accent); background:#fff}
.gs-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
@media(max-width:760px){ .gs-cards{grid-template-columns:1fr} }
.gs-card{display:flex; align-items:flex-start; gap:14px; text-align:left; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px 18px;
  transition:border-color .16s,box-shadow .16s,transform .16s}
.gs-card:hover{border-color:#f0b998; box-shadow:var(--shadow-sm); transform:translateY(-2px)}
.gs-card:focus-visible{outline:3px solid var(--accent-2); outline-offset:2px}
.gs-num{width:30px; height:30px; flex:0 0 auto; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--fh); font-weight:900; font-size:14px; background:var(--accent); color:#fff}
.gs-tt{flex:1; min-width:0; display:flex; flex-direction:column; gap:4px}
.gs-t{font-family:var(--fh); font-weight:800; font-size:14.5px; letter-spacing:.02em; text-transform:uppercase; color:var(--navy)}
.gs-d{font-family:var(--fb); font-size:12.5px; line-height:1.5; color:var(--muted)}
.gs-arrow{flex:0 0 auto; font-family:var(--fh); font-weight:800; color:var(--accent); transition:transform .16s}
.gs-card:hover .gs-arrow{transform:translateX(3px)}

/* ---- per-product install: live branded preview on top ---- */
.inst-preview{display:flex; flex-direction:column}
.inst-preview .ds-field{max-width:360px}
.inst-cap-row{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-top:20px}
.inst-cap-row .ds-cap{font-family:var(--fh); font-weight:700; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.inst-frame-wrap{border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); background:#fff}
.inst-frame{width:100%; height:600px; border:none; display:block; background:#fff}
@media(max-width:820px){ .inst-frame{height:460px} }

/* ---- per-platform step-by-step instructions ---- */
.plat-steps{list-style:none; counter-reset:plat; margin:2px 0 4px; padding:0; display:flex; flex-direction:column; gap:10px}
.plat-steps li{counter-increment:plat; position:relative; padding-left:38px; font-family:var(--fb); font-size:13.5px;
  line-height:1.5; color:var(--ink); min-height:26px; display:flex; align-items:center}
.plat-steps li::before{content:counter(plat); position:absolute; left:0; top:0; width:26px; height:26px;
  border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--fh); font-weight:800;
  font-size:12px; color:var(--accent); background:#fff2ea; border:1px solid #f6d8c6}

/* ---- pricing explainer (Meine Produkte) ---- */
.price-help{font-family:var(--fb); font-size:12.5px; line-height:1.55; color:var(--muted);
  background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--r); padding:11px 14px; margin:14px 0 0}

/* ====================================================================
   IA OVERHAUL - primary page (Design hero + Produkte & Preise)
   ==================================================================== */
.primary-section{margin-top:6px}
.primary-section + .primary-section{margin-top:54px; padding-top:44px; border-top:1px solid var(--line)}
.primary-section .page-head{margin-bottom:22px}

/* product switcher pills, sitting above the large live preview */
.ds-preview .ds-cap-row{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  padding:12px 16px; border-bottom:1px solid var(--line)}
.ds-preview .ds-cap-row .ds-cap{padding:0; border:none}
.ds-cap-hint{font-family:var(--fb); font-size:12px; color:var(--muted)}
.ds-switcher{display:flex; gap:8px; flex-wrap:nowrap; overflow-x:auto; padding:12px 16px;
  border-bottom:1px solid var(--line); background:var(--bg-soft); scrollbar-width:thin}
.ds-pill{flex:0 0 auto; cursor:pointer; font-family:var(--fh); font-weight:700; font-size:12.5px; letter-spacing:.01em;
  color:var(--muted); background:var(--surface); border:1px solid var(--line-strong); border-radius:40px;
  padding:8px 14px; transition:color .15s,background .15s,border-color .15s,box-shadow .15s; white-space:nowrap}
.ds-pill:hover{color:var(--accent); border-color:var(--accent)}
.ds-pill.on{color:#fff; background:var(--accent); border-color:var(--accent); box-shadow:0 1px 3px rgba(236,90,28,.28)}

/* enlarge the design preview - it is the hero of the primary page now */
.design-wrap .ds-frame{height:680px}
@media(max-width:900px){ .design-wrap .ds-frame{height:480px} }

/* ---- design: layout-position control + Desktop/Mobile preview toggle ---- */
.seg.seg-wrap{flex-wrap:wrap}
.ds-viewport-seg{flex:0 0 auto}
.ds-frame-stage{position:relative; background:#fff; transition:background .18s}
.ds-phone-screen{display:block}
.ds-frame-stage.is-mobile{display:flex; justify-content:center; align-items:flex-start;
  padding:22px 16px; background:var(--bg-soft)}
/* Mobile: the phone "screen" is a fixed-height scroll viewport; the iframe inside
   is taller so the seller scrolls within the phone frame to the full configurator. */
.ds-frame-stage.is-mobile .ds-phone-screen{width:390px; max-width:100%; height:660px; overflow-y:auto; overflow-x:hidden;
  border:12px solid var(--navy); border-radius:34px; box-shadow:0 12px 34px rgba(13,27,42,.22);
  -webkit-overflow-scrolling:touch; background:#fff}
.ds-frame-stage.is-mobile .ds-frame{width:100%; height:920px; border:none; border-radius:0}
@media(max-width:900px){ .ds-frame-stage.is-mobile .ds-phone-screen{height:520px} }

/* ---- Installation: three integration-method cards ---- */
.install-methods{display:flex; flex-direction:column; gap:18px; margin-top:28px}
.im-lead{margin-bottom:2px}
.im-lead-h{font-family:var(--fh); font-weight:900; font-size:clamp(19px,2.2vw,24px); text-transform:uppercase; color:var(--navy)}
.im-lead .ds-hint{margin-top:6px; font-size:14px}
.install-method{padding:0; overflow:hidden}
.im-head{display:flex; align-items:flex-start; gap:16px; padding:20px 24px; background:var(--bg-soft); border-bottom:1px solid var(--line)}
.im-num{flex:0 0 auto; width:34px; height:34px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--fh); font-weight:900; font-size:16px; background:var(--navy); color:#fff}
.im-tt{flex:1; min-width:0}
.im-title-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.im-title{font-family:var(--fh); font-weight:800; font-size:17px; letter-spacing:.02em; text-transform:uppercase; color:var(--navy)}
.im-badge{font-family:var(--fh); font-weight:800; font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:#fff; background:var(--accent); padding:3px 9px; border-radius:40px}
.im-intro{margin:6px 0 0; font-family:var(--fb); font-size:13.5px; line-height:1.55; color:var(--muted)}
.im-body{padding:20px 24px 24px; display:flex; flex-direction:column; gap:16px}
.im-body .api-panel{gap:14px}

/* ---- Design: collapsible "Parameter-Namen" accordion ---- */
.ds-accordion{padding:0; overflow:hidden}
.ds-accordion-head{width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:none; border:0; cursor:pointer; padding:20px 24px; text-align:left; color:var(--navy)}
.ds-accordion-head .ds-h{margin:0}
.ds-accordion-head:hover{background:rgba(236,90,28,.04)}
.ds-accordion-chev{color:var(--muted); display:inline-flex; transition:transform .25s}
.ds-accordion.open .ds-accordion-chev{transform:rotate(180deg)}
.ds-accordion-body{display:none; padding:0 24px 24px}
.ds-accordion.open .ds-accordion-body{display:block}

/* ---- Installation: product-picker row (label + "design differently" link) ---- */
.inst-picker-row{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap}
.inst-picker-row .ds-field{margin:0; flex:1 1 auto; max-width:360px}
.inst-picker-row .preview-link{flex:0 0 auto; padding-bottom:10px}

/* ---- Installation: cart-connection explainer note ---- */
.im-note{background:var(--ok-bg); border:1px solid var(--ok-line); border-radius:var(--r); padding:14px 16px}
.im-note-h{font-family:var(--fh); font-weight:800; font-size:13.5px; color:var(--ok-ink); margin-bottom:6px}
.im-note p{margin:0; font-family:var(--fb); font-size:13px; line-height:1.55; color:var(--ink)}

/* ====================================================================
   IA OVERHAUL 2 - dashboard landing page
   ==================================================================== */
.dash-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1000px){ .dash-stats{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:560px){ .dash-stats{grid-template-columns:1fr} }
.dash-section-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  margin:34px 0 16px; flex-wrap:wrap}
.dash-h{font-family:var(--fh); font-weight:900; font-size:clamp(17px,2vw,21px); text-transform:uppercase;
  letter-spacing:.02em; color:var(--navy)}
.dash-actions-h{margin:38px 0 16px}
.dash-actions{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px}
.dash-action{position:relative; display:flex; flex-direction:column; gap:6px; text-align:left; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px 20px 16px;
  transition:border-color .16s,box-shadow .16s,transform .16s}
.dash-action:hover{border-color:#f0b998; box-shadow:var(--shadow-sm); transform:translateY(-2px)}
.dash-action:focus-visible{outline:3px solid var(--accent-2); outline-offset:2px}
.da-t{font-family:var(--fh); font-weight:800; font-size:14.5px; letter-spacing:.02em; text-transform:uppercase; color:var(--navy)}
.da-d{font-family:var(--fb); font-size:12.5px; line-height:1.5; color:var(--muted); padding-right:26px}
.da-arrow{position:absolute; right:16px; top:16px; font-family:var(--fh); font-weight:800; color:var(--accent); transition:transform .16s}
.dash-action:hover .da-arrow{transform:translateX(3px)}

/* page head with an action button beside it (Bestellungen) */
.page-head-row{display:flex; align-items:flex-start; justify-content:space-between; gap:18px; flex-wrap:wrap}
.page-head-row .page-head{flex:1 1 420px}
.page-head-row .btn{flex:0 0 auto; margin-top:34px}
@media(max-width:640px){ .page-head-row .btn{margin-top:0} }

/* ====================================================================
   Design page UX round (2026-07-23): hex inputs, scope badges, presets,
   selling options, hide-param toggles, custom CSS, trust line
   ==================================================================== */
.ds-color-pair{display:flex; align-items:center; gap:8px; width:100%}
/* compact square picker + hex field beside it; the .ds-swatch width:100% rule
   otherwise lets the picker eat the row and squeezes the hex to a "white box" */
.ds-color-pair input[type=color]{flex:0 0 48px; width:48px; height:38px}
.ds-color-pair .ds-hex{flex:1 1 auto; min-width:0; max-width:none}
.ds-color-pair .ds-input-row{flex:1 1 auto; min-width:0}
.ds-hex{max-width:110px; font-family:ui-monospace,monospace; font-size:13px; text-transform:lowercase}
.ds-css{font-family:ui-monospace,monospace; font-size:12.5px; line-height:1.5; resize:vertical; min-height:110px; width:100%}
.ds-section-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px}
.ds-section-head .ds-h{margin:0}
.ds-scope{display:inline-flex; align-items:center; font-family:var(--fh); font-weight:700; font-size:10px;
  letter-spacing:.08em; text-transform:uppercase; padding:3px 9px; border-radius:12px; max-width:100%; white-space:normal; line-height:1.35}
.ds-scope-shop{color:#166534; background:#ecfdf3; border:1px solid #bbe7c8}
.ds-scope-product{color:#9a4112; background:#fff2ea; border:1px solid #f6d8c6}
.ds-accordion-head .ds-scope{margin-left:2px}
.ds-presets{display:flex; gap:8px; flex-wrap:wrap}
.ds-preset{display:inline-flex; align-items:center; gap:8px; cursor:pointer; background:var(--surface);
  border:1px solid var(--line); border-radius:40px; padding:7px 14px; font-family:var(--fh); font-weight:700;
  font-size:12px; color:var(--navy); transition:border-color .15s, box-shadow .15s}
.ds-preset:hover{border-color:#f0b998; box-shadow:var(--shadow-sm)}
.ds-preset-dots{display:inline-flex; gap:3px}
.ds-preset-dots i{width:12px; height:12px; border-radius:50%; border:1px solid rgba(0,0,0,.12)}
.ds-hide-toggle{flex:0 0 auto; cursor:pointer; background:none; border:1px solid var(--line-strong); border-radius:40px;
  font-family:var(--fh); font-weight:700; font-size:11px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--muted); padding:7px 12px; transition:color .15s,border-color .15s,background .15s}
.ds-hide-toggle:hover{color:var(--accent); border-color:var(--accent)}
.ds-hide-toggle.on{color:#fff; background:var(--navy); border-color:var(--navy)}
.ds-param-row.is-hidden .ds-plabel{opacity:.45; text-decoration:line-through}
.ds-param-row.is-hidden .ds-input{opacity:.45}
.ds-trust-line{font-family:var(--fb); font-size:12.5px; color:var(--muted); padding:12px 16px 14px; margin:0;
  border-top:1px solid var(--line)}

/* text-link style reset (used under the optional color pickers) */
.ds-reset-link{align-self:flex-start; background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--fb); font-size:12px; color:var(--muted); text-decoration:underline;
  text-underline-offset:2px; transition:color .15s}
.ds-reset-link:hover{color:var(--accent)}

/* font upload row + CSS class reference (Erweitert panel) */
.ds-font-upload{display:flex; flex-direction:column; gap:8px; margin-top:12px}
.ds-css-ref{margin-top:16px; border-top:1px solid var(--line); padding-top:14px}
.ds-ref-h{font-family:var(--fh); font-weight:800; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); margin:12px 0 8px}
.ds-ref-h:first-child{margin-top:0}
.ds-ref-row{display:flex; align-items:baseline; gap:12px; padding:3px 0}
.ds-ref-row code{flex:0 0 172px; font-family:ui-monospace,monospace; font-size:12px; color:var(--accent-2, #0f9488);
  background:var(--bg-soft); border-radius:4px; padding:1px 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ds-ref-row span{font-family:var(--fb); font-size:12.5px; color:var(--muted)}
.ds-field-hint{display:block; margin-top:6px}

/* ====================================================================
   Installation: big platform chooser + per-platform detail + AI brief
   ==================================================================== */
.plat-chooser{display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:12px}
.plat-card{display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:left; cursor:pointer;
  background:var(--surface); border:1.5px solid var(--line); border-radius:var(--r); padding:16px 18px;
  transition:border-color .16s, box-shadow .16s, transform .16s}
.plat-card:hover{border-color:#f0b998; box-shadow:var(--shadow-sm); transform:translateY(-2px)}
.plat-card.on{border-color:var(--accent); background:#fff7f2; box-shadow:var(--shadow-sm)}
.plat-card:focus-visible{outline:3px solid var(--accent-2); outline-offset:2px}
.pc-label{font-family:var(--fh); font-weight:800; font-size:14px; letter-spacing:.01em; color:var(--navy)}
.plat-card.on .pc-label{color:var(--accent)}
.pc-sub{font-family:var(--fb); font-size:11.5px; color:var(--muted)}
.plat-detail{margin-top:18px}
.plat-detail .im-title{margin-bottom:2px}
.ai-brief{margin-top:22px; border:1px solid #f6d8c6; background:linear-gradient(135deg,#fff7f2,var(--surface));
  border-radius:var(--r-lg); padding:18px 20px}
.ai-brief-h{font-family:var(--fh); font-weight:800; font-size:15px; letter-spacing:.01em; text-transform:uppercase;
  color:var(--navy); margin-bottom:6px}
.ai-brief-actions{margin-top:12px}

/* in-app prompt modal (replaces native window.prompt) */
.mfx-modal-overlay{position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  background:rgba(13,27,42,.45); padding:20px; animation:mfxFade .12s ease}
@keyframes mfxFade{from{opacity:0}to{opacity:1}}
.mfx-modal-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow); padding:22px 24px; width:100%; max-width:420px}
.mfx-modal-h{font-family:var(--fh); font-weight:800; font-size:16px; color:var(--navy); margin:0 0 14px}
.mfx-modal-card .ds-input{width:100%}
.mfx-modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:18px}

/* margin editor: live profit + recommended presets + plan card (2026-07-24) */
.price-summary .ps-profit .k{color:var(--navy)}
.price-summary .ps-profit .v.profit{color:#166534; font-weight:800}
.margin-presets{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.margin-preset{display:inline-flex; align-items:center; gap:6px; cursor:pointer; background:var(--surface);
  border:1px solid var(--line-strong); border-radius:40px; padding:6px 13px; font-family:var(--fh); font-weight:700;
  font-size:12.5px; color:var(--navy); transition:border-color .15s, background .15s, color .15s}
.margin-preset:hover{border-color:var(--accent)}
.margin-preset.on{background:var(--navy); color:#fff; border-color:var(--navy)}
.mp-rec{font-family:var(--fb); font-weight:600; font-size:10px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--accent); background:#fff2ea; border-radius:20px; padding:1px 6px}
.margin-preset.on .mp-rec{color:#fff; background:rgba(255,255,255,.18)}
.margin-warn{margin:8px 0 0; font-family:var(--fb); font-size:12.5px; color:#b45309}
.mine-edit-actions{display:flex; gap:10px; align-items:flex-start; margin-top:4px}
.plan-card{background:linear-gradient(135deg,#fff7f2,var(--surface)); border:1px solid #f6d8c6}
.plan-head{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.plan-head .ds-h{margin:0}
.plan-badge{font-family:var(--fh); font-weight:800; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:#fff; background:var(--accent); border-radius:40px; padding:3px 10px}
.plan-trial{font-family:var(--fh); font-weight:800; font-size:15px; color:var(--navy); margin:0 0 6px}

/* ====================================================================
   TECHNICAL LIGHT CONSOLE - refinement layer (2026-07-27)
   Appended last so it wins the cascade. Shifts the warm-editorial skin
   to a cool, crisp, data-forward console: near-white surfaces, hairline
   borders, monospace numerics, tamed (non-shouty) headings. Brand orange
   + MX chrome stay. Revert = delete this whole block.
   ==================================================================== */
:root{
  /* cooler, crisper surface palette */
  --bg:#f6f7f9;
  --surface:#ffffff;
  --bg-soft:#f1f3f6;
  --bg-band:#e9edf2;
  --ink:#141a22;
  --muted:#5c6673;
  --line:#e7e9ee;
  --line-strong:#d6dae1;
  --navy:#0f1826;
  --navy-2:#16233a;
  --r:7px; --r-lg:11px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.045);
  --shadow:0 1px 3px rgba(15,23,42,.05), 0 8px 22px rgba(15,23,42,.06);
  --shadow-lg:0 2px 6px rgba(15,23,42,.06), 0 20px 48px rgba(15,23,42,.10);
  /* technical monospace for numerics + code */
  --fm:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* tame the shouty uppercase: large headings -> refined sentence case */
.page-head h1{ text-transform:none; font-weight:800; letter-spacing:-.02em; font-size:clamp(26px,3vw,34px) }
.auth-card h1{ text-transform:none; letter-spacing:-.015em }
.p-card h3, .mine-head .mh-main h3, .state h3, .mo-success-h{ text-transform:none; letter-spacing:-.012em }
.p-card h3, .mine-head .mh-main h3{ font-weight:800 }

/* micro-labels: keep uppercase but lighter weight + refined tracking (technical tag feel) */
.page-head .eyebrow, .p-card .cat, .stat-label, .buy-row .lbl, .price-summary .ps .k,
.ds-h, .ds-label, .mlabel, .adv-sub, .bd-cap, .adv-toggle .adv-tt .t{
  font-weight:700; letter-spacing:.09em;
}

/* monospace, tabular numerics wherever a number carries meaning */
.stat-value, .buy-row .val, .price-summary .ps .v, .sell-row .val,
.bd-row .v, .bd-total .v, .mo-price-value, .mo-sr .v, .key-row .kprefix,
.margin-input input, .min-field input, .sur-amt input{
  font-family:var(--fm); font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.stat-value{ font-weight:600; font-size:28px }
.buy-row .val, .price-summary .ps .v{ font-weight:600 }
.sell-row .val{ font-weight:600 }
.bd-total .v{ font-weight:600 }

/* crisper cards: hairline border + minimal shadow */
.p-card,.mine-card,.key-row,.ds-section,.stat-card,.orders-table{ box-shadow:var(--shadow-sm) }
.p-card:hover,.mine-card:hover{ border-color:var(--line-strong); box-shadow:var(--shadow) }
.stat-card{ border-radius:var(--r-lg) }

/* refined arrows: hide the literal "->" text and render a clean glyph that slides on hover */
.arrow,.gs-arrow,.da-arrow{ display:inline-flex; align-items:center; line-height:1; font-size:0 !important; transition:transform .18s ease }
.arrow::after,.gs-arrow::after,.da-arrow::after{ content:"\2192"; font-size:14px; font-family:var(--fb); font-weight:700 }
.btn .arrow::after{ font-size:15px }
.gs-arrow::after{ font-size:16px }
a:hover .arrow,.btn:hover .arrow,.gs-card:hover .gs-arrow,.preview-link:hover .arrow,.da-link:hover .da-arrow{ transform:translateX(3px) }

/* Vorschau / Anpassen: proper secondary buttons, not naked uppercase text */
.preview-link{ text-transform:none; letter-spacing:0; font-weight:700; font-size:13px; color:var(--navy);
  border:1px solid var(--line-strong); border-radius:var(--r); background:var(--surface);
  padding:9px 14px; transition:border-color .16s,color .16s,background .16s }
.preview-link:hover{ border-color:var(--accent); color:var(--accent); background:#fff7f2 }

/* Produkte page: product switcher tabs (replaces the long stacked product list) */
.prod-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px }
.prod-tab{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; white-space:nowrap;
  font-family:var(--fh); font-weight:700; font-size:13.5px; letter-spacing:.01em; color:var(--navy);
  background:var(--surface); border:1px solid var(--line-strong); border-radius:40px; padding:9px 17px;
  transition:border-color .15s, color .15s, background .15s, box-shadow .15s }
.prod-tab:hover{ border-color:var(--accent); color:var(--accent) }
.prod-tab.on{ background:var(--navy); color:#fff; border-color:var(--navy); box-shadow:var(--shadow-sm) }
.prod-tab:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.prod-tab-off{ font-family:var(--fh); font-weight:800; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); background:var(--bg-soft); border-radius:30px; padding:2px 7px }
.prod-tab.on .prod-tab-off{ color:rgba(255,255,255,.72); background:rgba(255,255,255,.14) }
.prod-host .mine-card{ margin:0 }

/* ====================================================================
   INSTALLATION GUIDE - reassurance band + connection-path accordion
   (2026-07-27) Each seller path is a titled, collapsible card with a
   full numbered step-by-step guide + inline copyable Webhook-URL/Secret,
   API-key link, and configurator link. Technical-console styling.
   ==================================================================== */
.inst-intro{background:linear-gradient(135deg,#fff7f2,var(--surface)); border-color:#f6d8c6}
.inst-intro-h{font-family:var(--fh); font-weight:800; font-size:17px; letter-spacing:-.01em; color:var(--navy); margin-bottom:6px}
.inst-intro p{font-family:var(--fb); font-size:14px; line-height:1.6; color:var(--ink); margin:0; max-width:74ch}

.ig-lead{margin:30px 0 16px}
.ig-lead .im-lead-h{margin-bottom:4px}

.ig-accordion{display:flex; flex-direction:column; gap:14px}
.ig-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm);
  overflow:hidden; transition:border-color .16s, box-shadow .16s}
.ig-card.rec{border-color:#f6d8c6}
.ig-card.open{box-shadow:var(--shadow)}
.ig-head{width:100%; display:flex; align-items:center; gap:14px; text-align:left; cursor:pointer; background:none;
  border:none; padding:18px 22px; transition:background .15s}
.ig-head:hover{background:var(--bg-soft)}
.ig-head-main{flex:1 1 auto; display:flex; flex-direction:column; gap:3px; min-width:0}
.ig-title{font-family:var(--fh); font-weight:800; font-size:16px; letter-spacing:-.01em; color:var(--navy)}
.ig-card.rec .ig-title{color:var(--accent-ink)}
.ig-tagline{font-family:var(--fb); font-size:13px; line-height:1.4; color:var(--muted)}
.ig-badge{flex:0 0 auto; font-family:var(--fh); font-weight:800; font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; background:var(--accent); border-radius:40px; padding:4px 11px}
.ig-chev{flex:0 0 auto; width:20px; height:20px; position:relative; transition:transform .2s}
.ig-chev::after{content:"\25BC"; font-size:10px; color:var(--muted); position:absolute; inset:0; display:flex;
  align-items:center; justify-content:center}
.ig-card.open .ig-chev{transform:rotate(180deg)}
.ig-body{display:none; padding:2px 22px 24px}
.ig-card.open .ig-body{display:block}

/* flow chip strip: Kunde bestellt -> Manufaktur X -> wir fertigen & liefern */
.ig-flow-wrap{display:flex; flex-direction:column; gap:20px}
.ig-flow{display:flex; flex-direction:column; gap:9px; background:var(--bg-soft); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:14px 16px}
.ig-flow-chips{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.ig-chip{font-family:var(--fh); font-weight:700; font-size:12px; letter-spacing:.01em; color:var(--navy);
  background:var(--surface); border:1px solid var(--line-strong); border-radius:40px; padding:6px 12px}
.ig-chip-arrow{display:inline-flex; align-items:center; color:var(--muted)}
.ig-flow-margin{font-family:var(--fh); font-weight:800; font-size:12.5px; color:#166534}

.ig-p{font-family:var(--fb); font-size:13.5px; line-height:1.6; color:var(--ink); margin:0; max-width:74ch}
.ig-sub-lead{font-weight:600; color:var(--navy)}

/* platform sub-tabs inside the webhook path */
.ig-subtabs{display:flex; gap:8px; flex-wrap:wrap}
.ig-subtab{font-family:var(--fh); font-weight:700; font-size:13px; cursor:pointer; color:var(--navy);
  background:var(--surface); border:1px solid var(--line-strong); border-radius:40px; padding:8px 16px;
  transition:border-color .15s, color .15s, background .15s}
.ig-subtab:hover{border-color:var(--accent); color:var(--accent)}
.ig-subtab.on{background:var(--navy); color:#fff; border-color:var(--navy)}
.ig-wh-detail{margin-top:16px}

/* major numbered steps (the number lives in the heading text) */
.ig-steps-major{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:22px}
.ig-step{position:relative; padding-left:16px; border-left:2px solid var(--line-strong); display:flex;
  flex-direction:column; gap:11px}
.ig-card.rec .ig-step{border-left-color:#f0b998}
.ig-step-h{font-family:var(--fh); font-weight:800; font-size:15px; letter-spacing:-.005em; color:var(--navy)}

/* sub-steps: the exact click sequence */
.ig-substeps{list-style:none; counter-reset:igsub; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:14px}
.ig-substeps > li{counter-increment:igsub; position:relative; padding-left:36px; font-family:var(--fb); font-size:13.5px;
  line-height:1.55; color:var(--ink)}
.ig-substeps > li::before{content:counter(igsub); position:absolute; left:0; top:-2px; width:25px; height:25px;
  border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--fm); font-weight:600;
  font-size:12px; background:var(--bg-soft); border:1px solid var(--line-strong); color:var(--navy)}
.ig-li-t{display:block}

/* inline copyable value (Webhook-URL / Secret / link) */
.wh-field{margin-top:10px; display:flex; flex-direction:column; gap:6px}
.wh-label{font-family:var(--fh); font-weight:700; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.wh-row{display:flex; align-items:stretch; gap:8px}
.wh-val{flex:1 1 auto; min-width:0; background:var(--navy); color:#e9edf2; border-radius:var(--r); padding:11px 13px;
  overflow-x:auto; white-space:nowrap; display:flex; align-items:center}
.wh-val.mono{font-family:var(--fm); font-size:12.5px; letter-spacing:-.01em}
.wh-val.muted{background:var(--bg-soft); color:var(--muted); font-style:italic}
.wh-copy{flex:0 0 auto}
.wh-copy[disabled]{opacity:.5; cursor:not-allowed; border-color:var(--line-strong); color:var(--muted)}

/* optional cart binding + inline actions + hosted-checkout options */
.ig-cart{display:flex; flex-direction:column; gap:12px; margin-top:2px}
.ig-inline-action{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.ig-opt{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px;
  display:flex; flex-direction:column; gap:6px}
.ig-opt-h{font-family:var(--fh); font-weight:800; font-size:13.5px; color:var(--navy)}
.ig-opt-h-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.ig-status{font-family:var(--fh); font-weight:700; font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent); background:#fff2ea; border:1px solid #f6d8c6; border-radius:40px; padding:2px 9px}

@media(max-width:560px){
  .ig-head{padding:16px 16px}
  .ig-body{padding:2px 16px 20px}
  .ig-title{font-size:15px}
}

/* Installation section heading: sentence-case, not shouty (matches the restyle) */
.im-lead-h{ text-transform:none !important; letter-spacing:-.01em; font-weight:800 }

/* ==================================================================
   DESIGN POLISH PASS (appended last so it wins the cascade).
   Additive, layout-safe refinements: unified focus rings, disabled
   buttons, consistent radii + control heights, premium stat cards.
   ================================================================== */
/* A1 - one focus ring for every interactive control that lacked one */
.copy-btn:focus-visible, .icon-btn:focus-visible, .seg button:focus-visible,
.seg-btn:focus-visible, .mfx-as-chip:focus-visible, .mfx-as-send:focus-visible,
.gs-dismiss:focus-visible, .margin-preset:focus-visible, .ds-pill:focus-visible,
.sur-rm:focus-visible, .ds-reset:focus-visible, .ds-hide-toggle:focus-visible,
.adv-add:focus-visible, .preview-link:focus-visible, .api-keys-link:focus-visible,
.ig-subtab:focus-visible, .auth-toggle button:focus-visible, .embed-scope-change:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r);
}
/* A2 - text inputs share the same orange focus halo */
.mfx-as-inp:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(236,90,28,.12) }
.embed-scope-select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(236,90,28,.12) }

/* B1 - global disabled button state (was clickable-looking) */
.btn:disabled, .btn[disabled]{
  opacity:.5; cursor:not-allowed; transform:none !important; box-shadow:none;
  background:var(--line-strong); border-color:var(--line-strong); color:#fff;
}
.btn-ghost:disabled, .btn-ghost[disabled]{ background:transparent; color:var(--muted); border-color:var(--line) }
/* B2 - fix the broken --accent-hover fallback */
.mfx-as-send:hover:not(:disabled){ background:var(--accent-ink) }
/* B3 - dashboard-scope the oversized primary button */
.card-actions .btn, .ds-savebar .btn, .adv-savebar .btn, .mo-actions .btn,
.pi-savebar .btn, .page-head-row .btn{ padding:12px 22px; font-size:13px }

/* C1 - one-off radii -> tokens */
.sur-sel, .sur-amt, .sur-rm{ border-radius:var(--r) }
.embed-scope-select, .pw-toggle, .adv-toggle .adv-badge{ border-radius:var(--r) }
.gs-dismiss, .ds-hide-toggle{ border-radius:var(--r) }

/* D1 - premium KPI stat cards */
.stat-card{ padding:22px 24px; min-height:104px; justify-content:center; gap:8px }
.stat-value{ font-size:30px }
.dash-stats{ gap:16px }
.stat-card.accent{ border-color:#f3c9b2 }
/* D3 - consistent card hover on the API-keys list */
.key-row{ transition:border-color .16s, box-shadow .16s }
.key-row:hover{ border-color:var(--line-strong); box-shadow:var(--shadow) }
/* D4 - chat bubbles on an even radius step */
.mfx-as-b{ border-radius:12px }

/* E1 - unify primary-control heights so rows line up */
.ds-input, .ds-select{ min-height:42px }
.margin-input{ min-height:42px }
.margin-input input{ padding:10px 0 }
.sur-amt, .sur-sel{ min-height:42px }
.ds-plabel{ letter-spacing:.06em; font-weight:700 }

/* F - sidebar */
.studio-nav a.active{ background:#fff2ea; font-weight:800 }
.sb-foot{ padding-top:14px; gap:10px }
.shop-pill{ min-height:38px }
.sb-logout{ min-height:40px }
.sb-brand .studio-tag{ transform:none }

/* G1 - segmented inner radius nests cleanly in the 7px track */
.seg button, .round-seg button, .seg-btn{ border-radius:5px }
.ds-scope{ border-radius:40px }

/* H - orders table */
.orders-table tr:hover td{ background:#fbf7f2 }
.orders-table td{ font-variant-numeric:tabular-nums }

/* I - toasts + skeletons */
.toast{ min-width:280px }
.state p{ max-width:44ch; line-height:1.6 }
.sk{ background:linear-gradient(100deg,var(--surface) 30%,#eef0f3 50%,var(--surface) 70%); background-size:200% 100% }

/* J - vertical rhythm */
.page-head{ margin-bottom:40px }
.dash-section-head, .dash-actions-h{ margin-top:32px }
.primary-section + .primary-section{ margin-top:48px; padding-top:40px }
.mfx-as{ margin-top:40px }

/* Produkte -> Settings link for the seller's VAT rate */
.vat-link{display:inline-flex; align-items:center; gap:6px; margin-top:10px; font-family:var(--fb); font-size:12.5px; color:var(--accent); text-decoration:none; font-weight:600}
.vat-link:hover{text-decoration:underline}
.vat-link .arrow{transition:transform .15s}
.vat-link:hover .arrow{transform:translateX(3px)}
.vat-link-ic{display:inline-flex; align-items:center}

/* Center the text inside every segmented-control button (Desktop/Mobil, model
   position, margin %/EUR, rounding) so labels sit perfectly centered. */
.seg button, .seg-btn, .round-seg button{ display:inline-flex; align-items:center; justify-content:center; line-height:1 }

/* Defensive: no segmented control / tab row ever clips its labels. In a narrow
   column the items wrap to the next line instead of overflowing the container. */
.seg, .round-seg, .prod-tabs, .ig-subtabs, .install-tabs{ overflow:visible; max-width:100% }
.seg button, .seg-btn, .round-seg button{ min-width:0; flex:0 1 auto }
.round-seg{ display:inline-flex; flex-wrap:wrap; gap:2px }

/* Product card "sell" block: one clear big button into the Integration guide
   (replaced the raw embed snippet that used to sit on every card). */
.mine-sell{display:flex; flex-direction:column; gap:14px; align-items:flex-start; padding:20px 22px; background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--r-lg)}
.mine-sell-t{display:flex; flex-direction:column; gap:4px}
.mine-sell-t strong{font-family:var(--fh); font-weight:800; font-size:15px; color:var(--navy)}
.mine-sell .btn{align-self:flex-start}

/* Miniature 3D product thumbnail (model-viewer) in Meine Produkte */
.mine-thumb{ width:74px; height:74px; overflow:hidden }
.mine-thumb model-viewer{ width:100%; height:100%; display:block; background:transparent; --poster-color:transparent }

/* Live configurator + seller profit - its own padded section below the card body */
.mine-live{ padding:26px 24px; border-top:1px solid var(--line); background:var(--bg-soft) }
.mine-live-head{ display:flex; flex-direction:column; gap:3px; margin-bottom:16px }
/* Give the configurator most of the width; the profit read-out only needs a slim column. */
.mine-live-grid{ display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:22px; align-items:stretch }
@media(max-width:860px){ .mine-live-grid{ grid-template-columns:1fr } }
.mine-cfg{ border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--bg-soft); min-height:540px }
.mine-cfg-frame{ width:100%; height:100%; min-height:540px; border:none; display:block }
.lp-card{ display:flex; flex-direction:column; gap:14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px; box-shadow:var(--shadow-sm) }
.lp-row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px }
.lp-l{ font-family:var(--fh); font-weight:700; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted) }
.lp-v{ font-family:var(--fh); font-weight:800; font-size:20px; color:var(--ink); font-variant-numeric:tabular-nums }
.lp-profit-box{ margin-top:auto; background:#eef7f0; border:1px solid #cfe8d6; border-radius:var(--r-lg); padding:16px 18px; display:flex; flex-direction:column; gap:5px }
.lp-profit-l{ font-family:var(--fh); font-weight:800; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#2f7d4f }
.lp-gewinn{ font-family:var(--fh); font-weight:900; font-size:36px; color:#2f7d4f; line-height:1; font-variant-numeric:tabular-nums }

/* Easy-to-find save button below the product-card edit controls (not full width) */
.mine-save-big{ margin-top:24px }
.mine-save-big .mine-save-btn{ width:auto; min-width:220px; padding:14px 40px; font-size:15px; letter-spacing:.02em; justify-content:center }

/* Sidebar support block ("Brauchst du etwas anderes?" + call/email + 2 CTAs) */
.sb-support{ margin:8px 14px 0; padding:14px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--bg-soft) }
.sb-support-h{ font-family:var(--fh); font-weight:800; font-size:13px; color:var(--navy) }
.sb-support-sub{ font-size:12px; color:var(--muted); margin:2px 0 10px }
.sb-support-contact{ display:flex; flex-direction:column; gap:5px; margin-bottom:11px }
.sb-support-contact a{ display:flex; align-items:center; gap:7px; font-size:12px; color:var(--muted); text-decoration:none }
.sb-support-contact a:hover{ color:var(--accent) }
.sb-support-contact svg{ flex:0 0 auto; opacity:.8 }
.sb-support-btns{ display:grid; grid-template-columns:1fr 1fr; gap:8px }
.sb-support-btn{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  padding:11px 6px; border-radius:var(--r-lg); background:var(--accent); color:#fff; border:1px solid var(--accent);
  text-decoration:none; font-family:var(--fh); font-weight:700; font-size:11px; letter-spacing:.02em; text-align:center;
  transition:filter .15s, background .15s, border-color .15s }
.sb-support-btn svg{ flex:0 0 auto }
.sb-support-btn:hover{ filter:brightness(.95) }
.sb-support-btn.ghost{ background:var(--surface); color:var(--ink); border-color:var(--line) }
.sb-support-btn.ghost:hover{ background:var(--bg-soft); filter:none; border-color:var(--line-strong) }

/* Support view (renderSupport) */
.sp-contact{ display:flex; flex-direction:column; gap:14px }
.sp-contact-t{ display:flex; flex-direction:column; gap:5px }
.sp-contact-t strong{ font-family:var(--fh); font-weight:800; font-size:17px; color:var(--navy) }
.sp-contact-actions{ display:flex; gap:12px; flex-wrap:wrap }
.sp-contact-actions .btn{ display:inline-flex; align-items:center; gap:8px }
.sp-ic{ display:inline-flex; align-items:center }
.sp-contact-person{ font-size:12.5px; color:var(--muted); font-family:var(--fb) }
.sp-form{ margin-top:18px }
.sp-typeseg{ display:flex; gap:10px; margin-bottom:18px; flex-wrap:wrap }
.sp-type{ flex:1; min-width:200px; padding:14px 16px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface);
  font-family:var(--fh); font-weight:700; font-size:14px; color:var(--ink); cursor:pointer; transition:border-color .15s, background .15s, color .15s }
.sp-type:hover{ border-color:var(--line-strong) }
.sp-type.on{ background:var(--navy); color:#fff; border-color:var(--navy) }
.sp-textarea{ resize:vertical; min-height:120px; font-family:var(--fb); line-height:1.5 }
.sp-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:14px 18px }
@media(max-width:640px){ .sp-grid2{ grid-template-columns:1fr } }
.sp-file{ display:none }
.sp-file-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap }
.sp-file-name{ font-size:12.5px; color:var(--muted); font-family:var(--fb) }
.sp-err{ color:#b3261e; background:#fdecea; border:1px solid #f6c9c4; border-radius:var(--r); padding:10px 12px; font-size:13px; margin-top:4px }
.sp-submit{ margin-top:18px }
.sp-submit .btn{ min-width:200px; padding:14px 40px; justify-content:center }

/* Shipping per-country table (Design > Preise & Verkauf) */
.ship-table-box{ font-size:13px; color:var(--muted) }
.ship-table{ width:100%; border-collapse:collapse; max-width:420px }
.ship-table td{ padding:5px 8px; border-bottom:1px solid var(--line) }
.ship-table td.p{ text-align:right; font-family:var(--fh); font-weight:700; color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums }
.ship-table tr:last-child td{ border-bottom:none }

/* Shipping info panel in the product card (Meine Produkte) */
.mine-ship{ margin:2px 0 16px; padding:12px 14px; background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--r-lg) }
.mine-ship-head{ display:flex; align-items:flex-start; gap:9px; font-size:13.5px; color:var(--ink); line-height:1.45 }
.mine-ship-ic{ flex:0 0 auto; margin-top:1px; color:var(--accent) }
.mine-ship-toggle{ margin-top:9px; background:none; border:none; padding:0; cursor:pointer; font-size:12.5px; font-weight:700; color:var(--muted); text-decoration:underline; font-family:var(--fb) }
.mine-ship-toggle:hover{ color:var(--accent-ink) }
.mine-ship-table-wrap{ margin-top:10px }